Créer une application Web à partir de zéro en utilisant Python Flask et MySQL Partie 4

Dans la partie précédente de cette série de didacticiels, nous avons implémenté les fonctionnalités requises pour permettre à un utilisateur connecté d’ajouter un souhait. Nous avons également vu comment afficher les souhaits entrés par un utilisateur sur la page d'accueil de l'utilisateur..

Dans cette partie, nous allons implémenter la fonctionnalité permettant d’éditer et de supprimer les souhaits entrés par un utilisateur..

Commencer

Commençons par cloner la partie précédente du tutoriel de GitHub.

clone git https://github.com/jay3dec/PythonFlaskMySQLApp_Part3.git

Une fois le code source cloné, accédez au répertoire du projet et démarrez le serveur Web.. 

cd PythonFlaskMySQLApp_Part3 python app.py

Pointez votre navigateur sur http: // localhost: 5002 / et vous devriez avoir l'application en cours d'exécution.

Modification de la liste de souhaits

Étape 1: Afficher l'icône d'édition

Nous lions déjà les données reçues en utilisant jQuery à notre code HTML. Nous allons modifier ce code et utiliser des modèles jQuery pour faciliter la liaison des données. Nous allons aussi ajouter un modifier icône à notre HTML pour fournir un moyen de mettre à jour le souhait. Ouvrir userHome.html et inclure une référence aux modèles jQuery.

Supprimer l'existant groupe de liste div et le remplace par le code HTML suivant:

À l'intérieur de UL avec classe groupe de liste nous allons lier nos données. Définir un listTemplate comme indiqué dans le corps du code HTML:

Modifier le jQuery Rappel de succès AJAX pour lier les données au listTemplate.

En outre, inclure des styles dans userHome.html:

Enregistrez toutes les modifications et redémarrez le serveur. Pointez votre navigateur sur http: // localhost: 5002 et connectez-vous à l'aide d'une adresse e-mail et d'un mot de passe valides. Une fois connecté, vous devriez pouvoir voir les souhaits créés par l'utilisateur.

Étape 2: Afficher le menu contextuel Modifier

Nous utiliserons Bootstrap pour afficher une fenêtre contextuelle afin de fournir une interface permettant de modifier les souhaits. Inclure une référence à Bootstrap dans userHome.html.

Une fois la référence incluse, ajoutez le code HTML suivant à userHome.html.

 
 
 
 ×Fermer  
Mettre à jour le souhait
 
 
 
 
 Titre:  
 
 La description:  
 
 
 
 Fermer Mettre à jour 
 
 
 

Le HTML ci-dessus servira de popup. Lorsque l'utilisateur clique sur le modifier icon le popup montrera. Nous avons déjà ajouté les attributs cible de données et bascule de données qui déclenchera le popup modal.

Enregistrez les modifications ci-dessus et redémarrez l'application. Une fois connecté à l'application, cliquez sur le bouton modifier icône et vous devriez pouvoir voir le popup.

Étape 3: remplir la fenêtre d'édition

Lorsque l’utilisateur clique sur l’icône de modification, la fenêtre de mise à jour apparaît avec Titre et la description mettre à jour. Afin de commencer, nous avons d’abord besoin de l’ID de souhait pour récupérer les détails de ce souhait une fois que l’utilisateur a cliqué sur l’icône de modification. Donc, modifiez le code du modèle jQuery pour inclure un attribut supplémentaire ID de données sur l'élément d'ancrage d'édition.

Nous avons également joint un sur clic event pour appeler la méthode modifier. Dans la fonction Edit, nous allons faire un appel AJAX à une méthode python appelée getWishById qui retournera les détails du souhait.

fonction Edit (elm) $ .ajax (url: '/ getWishById', données: id: $ (elm) .attr ('data-id'), tapez: 'POST', succès: function (res) console.log (res);, erreur: fonction (erreur) console.log (erreur);); 

Ensuite, ouvrez app.py et créer une méthode appelée getWishById. En utilisant cette méthode, nous obtiendrons les détails du souhait de la base de données.

@ app.route ('/ getWishById', method = ['POST']) def getWishById (): try: if session.get ('utilisateur'): _id = request.form ['id'] _user = session.get ('utilisateur') conn = mysql.connect () curseur = conn.cursor () cursor.callproc ('sp_GetWishById', (_id, _user)) resultat = cursor.fetchall () wish = [] wish.append (' Id ': résultat [0] [0],' Titre ': résultat [0] [1],' Description ': résultat [0] [2]) retourne json.dumps (souhait) else: retourne render_template (' error .html ', error =' Accès non autorisé ') sauf Exception en tant que e: return render_template (' error.html ', error = str (e)) 

Comme vous pouvez le constater dans la méthode ci-dessus, nous avons transmis l'ID de souhait à cette méthode et elle récupère les données de la base de données à l'aide de identifiant d'utilisateur et souhait ID. Une fois les données extraites, il les convertit en une liste, puis les renvoie sous la forme JSON Les données.

Ensuite, créons la procédure stockée MySQL requise pour extraire les données de la base de données.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_GetWishById' (IN p_wish_id bigint, dans p_user_id bigint) COMMENCER à sélectionner * dans tbl_wish où wish_id = p_wish_id et wish_user_id = p_user_id; FIN

Le code ci-dessus est la procédure mémorisée pour obtenir des détails particuliers sur les souhaits à l’aide du souhait ID et identifiant d'utilisateur.

Enregistrez les modifications et redémarrez le serveur. Une fois connecté à l'application, cliquez sur le bouton modifier icône et vous devriez avoir les détails enregistrés dans la console de votre navigateur.

Pour lier les données reçues au popup HTML, commencez par supprimer le cible de données et bascule de données attributs de la balise d'ancrage d'icône d'édition. Ajoutez ensuite le code suivant à la modifier Rappel de succès de la fonction JavaScript pour remplir le popup et le déclencher.

// Analyse de la chaîne JSON reçue var data = JSON.parse (res); // Remplissez le Pop up $ ('# editTitle'). Val (data [0] ['Title']); $ ('# editDescription'). val (data [0] ['Description']); // Déclenche le Pop Up $ ('# editModal'). Modal ();

Enregistrez les modifications et redémarrez le serveur. Une fois connecté à l'application, essayez de cliquer sur l'icône de modification et vous devriez avoir la popup avec le titre et la description..

Étape 4: Mettre à jour les détails du souhait

Pour implémenter la fonctionnalité de mise à jour, créons d'abord une procédure stockée MySQL.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_updateWish' (IN p_title varchar (45), IN p_description varchar (1000), IN p_wish_id bigint, dans p_user_id bigint) BEGIN update tbl_wish set wish_title = pb p_description où wish_id = p_wish_id et wish_user_id = p_user_id; FIN $$ DELIMITER;

Comme indiqué dans la procédure stockée ci-dessus, nous allons passer la modification Titre et la description avec le ID du souhait et de l'utilisateur de mettre à jour les détails dans la base de données.

Ensuite, créons une nouvelle méthode appelée updateWish pour mettre à jour les détails. Voici la updateWish méthode:

@ app.route ('/ updateWish', méthodes = ['POST']) def updateWish (): essayer: si session.get ('utilisateur'): _user = session.get ('utilisateur') _title = request.form ['title'] _description = request.form ['description'] _wish_id = request.form ['id'] conn = mysql.connect () cursor = conn.cursor () cursor.callproc ('sp_updateWish', (_ title, _description, _wish_id, _user)) data = cursor.fetchall () si len (data) vaut 0: conn.commit () renvoie json.dumps ('status': 'OK') sinon: retourne json.dumps ( 'status': 'ERROR') sauf Exception en tant que e: return json.dumps ('status': 'Accès non autorisé') finalement: cursor.close () conn.close () 

Comme indiqué dans le code ci-dessus, après validation pour une session valide, nous avons collecté les données publiées et appelé la procédure stockée. sp_updateWish mettre à jour les détails.

Pour appeler le updateWish méthode, nous devons attacher un événement sur le Mettre à jour cliquez sur le bouton. Alors, nommez le bouton de mise à jour btnUpdate et attacher un sur clic événement comme indiqué:

$ ('# btnUpdate'). click (function () $ .ajax (url: '/ updateWish', données: titre: $ ('# editTitle'). val (), description: $ ('# editDescription ') .val (), id: localStorage.getItem (' editId '), tapez:' POST ', succès: function (res) $ (' # editModal '). modal (' hide '); // Re remplir la grille, erreur: fonction (erreur) console.log (erreur);));

Comme on le voit dans le code ci-dessus, nous avons rassemblé les editId de stockage local, donc à l'intérieur du modifier fonction enregistrer le ID dans stockage local.

localStorage.setItem ('editId', $ (elm) .attr ('data-id'));

Envelopper le getWish Appel AJAX dans une fonction, afin que nous puissions le rappeler une fois les données mises à jour.

fonction GetWishes () $ .ajax (url: '/ getWish', type: 'GET', succès: fonction (res) var wishObj = JSON.parse (res); $ ('# ulist'). empty ( ); $ ('# listTemplate'). tmpl (wishObj) .appendTo ('# ulist');, erreur: fonction (erreur) console.log (erreur);); 

Appeler le GetWishes fonctionner dans le rappel de succès de la mettre à jour Appel AJAX.

$ ('# btnUpdate'). click (function () $ .ajax (url: '/ updateWish', données: titre: $ ('# editTitle'). val (), description: $ ('# editDescription ') .val (), id: localStorage.getItem (' editId '), tapez:' POST ', succès: function (res) $ (' # editModal '). modal (' hide '); // Re remplir la grille GetWishes ();, erreur: fonction (erreur) console.log (erreur);));

Enregistrez toutes les modifications et redémarrez le serveur. Une fois connecté à l'application, essayez de modifier les souhaits disponibles créés par l'utilisateur..

Supprimer un souhait

Étape 1: Afficher une fenêtre contextuelle de confirmation

Ajoutez le code HTML suivant à userHome.html.

 
 
 
 
Vous allez supprimer pour toujours !!
 
 
 Annuler Effacer 
 
 
 

Ajouter une icône de suppression à l'intérieur du listTemplate en ajoutant le code HTML suivant:

En cliquant sur l'icône de suppression ci-dessus, nous appellerons une fonction JavaScript appelée Confirmation de la suppression où nous déclencherons le popup de confirmation.

function ConfirmDelete (elem) localStorage.setItem ('deleteId', $ (elem) .attr ('id_données')); $ ('# deleteModal'). modal (); 

Enregistrez les modifications et redémarrez le serveur. Une fois connecté, cliquez sur l'icône de suppression dans la liste de souhaits et vous devriez pouvoir voir la fenêtre de confirmation.

Étape 2: Supprimer un souhait

Pour implémenter la fonctionnalité Supprimer le souhait, créons d'abord la procédure stockée MySQL à supprimer.

DELIMITER $$ USE "BucketList" $$ CREATE PROCEDURE "sp_deleteWish" (IN p_wish_id bigint, IN p_user_id bigint) BEGIN supprimer de tbl_wish où wish_id = p_wish_id et wish_user_id = p_user_id; FIN $$ DELIMITER;

La procédure ci-dessus prend l'ID de souhait et l'ID utilisateur et supprime le souhait correspondant de la base de données..

Ensuite, créons une méthode à l'intérieur app.py appeler la procédure sp_deleteWish. 

Nous allons créer une méthode appelée deleteWish pour supprimer le souhait.

@ app.route ('/ deleteWish', method = ['POST']) def deleteWish (): essayer: if session.get ('utilisateur'): _id = request.form ['id'] _user = session.get ('utilisateur') conn = mysql.connect () curseur = conn.cursor () cursor.callproc ('sp_deleteWish', (_id, _user)) resultat = cursor.fetchall () si len (résultat) est égal à 0: conn. commit () return json.dumps ('status': 'OK') else: return json.dumps ('status': 'Une erreur s'est produite') else: return render_template ('error.html', error = 'Accès non autorisé') sauf Exception comme e: return json.dumps ('status': str (e)) enfin: cursor.close () conn.close () 

Dans la méthode ci-dessus, nous avons d’abord validé la session. Une fois la session utilisateur validée, à l'aide de l'ID de souhait et de l'ID utilisateur, nous avons appelé la procédure stockée. sp_deleteWish.

Pour appeler la méthode ci-dessus deleteWish, ajouter un sur clic événement au bouton Supprimer dans la fenêtre de confirmation de suppression.

Effacer

Créez une fonction JavaScript appelée Effacer, et à l'intérieur de Delete faire un appel AJAX à la méthode python deleteWish.

function Delete () $ .ajax (url: '/ deleteWish', données: id: localStorage.getItem ('deleteId'), tapez: 'POST', succès: fonction (res) var result = JSON. analyse (res); if (result.status == 'OK') $ ('# deleteModal'). modal ('hide'); GetWishes (); else alert (result.status);, erreur : fonction (erreur) console.log (erreur);); 

Sur le rappel de succès de ce qui précède Effacer fonction, nous vérifierons le statut retourné, et si tout va bien, nous cacherons la fenêtre contextuelle modale et rechargerons les souhaits..

Enregistrez les modifications et redémarrez le serveur. Une fois connecté à l'application, essayez de supprimer un souhait de la page d'accueil de l'utilisateur..

Conclusion

Dans cette partie de la série, nous avons vu comment mettre en œuvre le modifier et Effacer souhait fonctionnalité pour notre application liste de seau. Dans la prochaine partie de cette série, nous allons implémenter la pagination pour notre liste de base d’utilisateurs, ainsi que quelques fonctionnalités supplémentaires..

Le code source de ce tutoriel est disponible sur GitHub.

Faites-nous savoir vos pensées dans les commentaires ci-dessous!