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

Dans la partie précédente de cette série, nous avons implémenté la pagination pour la liste de souhaits sur la page d'accueil de l'utilisateur. Dans cette partie de la série, nous allons implémenter une option permettant à l'utilisateur de télécharger une image représentant un souhait, une option permettant de marquer le souhait comme étant réalisé et une option permettant de définir la confidentialité..

Commencer 

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

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

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

cd PythonFlaskMySQLApp_Part5 python app.py

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

Modification de l'interface utilisateur

Commençons par modifier notre page "ajouter un souhait" pour inclure une option permettant de télécharger une image. Aller vers templates / addWish.html. Notre forme en addWish.html semble assez petit, modifions donc le code HTML d'amorçage pour rendre le formulaire vertical. 

Tout d'abord, nous allons modifier le forme horizontale à une forme verticale, alors supprimez la classe forme horizontale de la forme. Nous ajouterons également trois nouveaux contrôles: un contrôle de téléchargement de fichier pour télécharger des photos, une case à cocher pour marquer le souhait comme privé et une autre case à cocher pour marquer le souhait comme étant terminé. Voici le modifié addWish.html.

          
 
  
App Flacon Python
 
 
  
Créez votre souhait
  
 Titre  
  
 La description  
 
 Photos 
   Feuilleter…     
 
 
 Marquez ceci comme privé et non visible pour les autres. 
  Marquer comme privé  
 
 Avez-vous déjà accompli cela? 
  Marque comme Terminé  
  
 
  
 
 
  
  

Enregistrez la modification ci-dessus et redémarrez le serveur. Après vous être connecté avec succès, cliquez sur le bouton Ajouter un souhait lien et vous devriez pouvoir voir la page modifiée ajouter souhait.

Mise en œuvre de la fonctionnalité de téléchargement 

Nous utiliserons blueimp jQuery-File-Upload pour implémenter la fonctionnalité de téléchargement de fichier. Téléchargez les fichiers requis à partir de GitHub. Extrayez la source et ajoutez les références de script suivantes à addWish.html.

Sur addWish.html chargement de la page, ajoutez le code d’initiation du plug-in au bouton de téléchargement du fichier, cliquez sur.

$ (function () $ ('# fileupload'). fileupload (url: 'upload', dataType: 'json', ajouter: function (e, data) data.submit ();, succès: function ( réponse, statut) console.log (réponse);, erreur: fonction (erreur) console.log (erreur););)

Comme indiqué dans le code ci-dessus, nous avons joint le plug-in de téléchargement de fichier au #téléchargement de fichiers bouton. Le plug-in de téléchargement de fichier poste le fichier sur le /télécharger gestionnaire de requêtes, que nous définirons dans notre code Python. Nous avons également défini un ajouter fonction pour soumettre les données, et défini Succès et échec callbacks pour gérer le succès et les échecs du téléchargement.

Ensuite, définissons le télécharger Gestionnaire de téléchargement de fichiers Python dans app.py. Définir un itinéraire /télécharger comme montré:

@ app.route ('/ upload', méthodes = ['GET', 'POST']) def upload (): # le code du gestionnaire de téléchargement de fichier sera ici

Vérifier si la demande est un POSTER request, et si c'est le cas, lisez le fichier à partir de request.

si request.method == 'POST': fichier = request.files ['fichier'] 

Nous devrons également obtenir l'extension du fichier image pour enregistrer le fichier. Donc importer os puis diviser le nom de l'extension du nom de fichier.

extension = os.path.splitext (nomfichier.fichier) [1]

Une fois que nous avons l'extension de fichier, nous allons créer un nouveau nom de fichier unique en utilisant uuid. Importation uuid et créer le nom du fichier.

f_name = str (uuid.uuid4 ()) + extension

Créez un dossier appelé Uploads dans le dossier statique. C'est ici que nous allons conserver les images téléchargées. Ajouter le chemin au dossier de téléchargement dans la configuration de l'application.

app.config ['UPLOAD_FOLDER'] = 'static / Uploads' 

Maintenant, enregistrez le fichier posté dans le UPLOAD_FOLDER emplacement et renvoyer le nom du fichier en réponse.

fichier.save (os.path.join (app.config ['UPLOAD_FOLDER'], nom_f))) renvoie json.dumps ('nom_fichier': nom_f)

Enregistrez les modifications ci-dessus et redémarrez le serveur. Pointez votre navigateur sur http: // localhost: 5002 et connectez-vous avec des informations d'identification valides. Essayez de télécharger une image à l’aide du bouton Parcourir, puis, lorsque vous avez terminé, vérifiez la console de votre navigateur. Vous devriez pouvoir voir le nom du fichier téléchargé renvoyé.. 

Au lieu du champ de texte de saisie en lecture seule, ajoutons un élément d'image pour afficher l'image téléchargée. Donc, remplacez le champ de texte de saisie en lecture seule par le code HTML suivant.

Dans le rappel de succès de téléchargement de fichier, mettez à jour #imgUploadde src à l'image téléchargée.

$ ('# imgUpload'). attr ('src', 'static / Uploads /' + response.filename);

Enregistrez les modifications ci-dessus et redémarrez le serveur. Connectez-vous à l'application et essayez de télécharger un nouveau fichier image. Vous devriez pouvoir voir l'image téléchargée..

Nous devrons modifier notre tbl_wish structure de la table pour inclure trois nouveaux champs. Modifier le tbl_wish comme indiqué ci-dessous:

ALTER TABLE 'BucketList'. 'Tbl_wish' ADD COLUMN 'wish_file_path' VARCHAR (200) NULL APRÈS 'wish_date', ADD COLUMN 'souhait_accompli' INT NULL DEFAULT 0 APRÈS 'wish_file_path', ADD COLUMN ', ADD COLUMN' souhaité_private ', INT DEFULL 0. '; 

Ensuite modifions nos procédures stockées sp_addWish et sp_updateWish inclure les champs récemment ajoutés à la base de données. 

Modifier le sp_addWish procédure stockée pour inclure les trois champs nouvellement ajoutés.

UTILISEZ 'BucketList'; Procédure DROP SI EXISTE 'sp_addWish'; DELIMITER $$ USE 'BucketList' $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_addWish' (IN p_title varchar (45), IN p_description varchar (1000), IN p_user_id bigint, IN p_file_path varchar (200), IN p_is_private int, IN p_is_done int) BEGIN insérer dans tbl_wish (wish_title, wish_description, wish_user_id, wish_file_path, wish_private, wish_accomplished) (p_title, p_description, p_description, p_user_id, point). FIN $$ DELIMITER; 

Modifier également la procédure stockée sp_updateWish inclure les trois nouveaux champs ajoutés.

UTILISEZ 'BucketList'; Procédure DROP IF EXISTS 'sp_updateWish'; DELIMITER $$ USE 'BucketList' $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_updateWish' (IN p_title varchar (45), IN p_description varchar (1000), IN p_wish_id bigint, in p_user_id bigint, in p_user_id bigint, in p_file_path bigchar, 200), IN p_is_private int, IN p_is_done int) BEGIN update tbl_wish set wish_title = p_title, wish_description = p_description, wish_file_path = p_file_path, wish_private = p_isprivate, wish_description = FIN $$ DELIMITER; 

Ensuite, modifiez le / addWish Méthode du gestionnaire de demandes pour lire les champs nouvellement postés et les transmettre à la procédure stockée.

Si request.form.get ('chemin_fichier') est Aucune: _filePath = "else: _filePath = request.form.get ('chemin_fichier') Si request.form.get ('privé') est Aucune: _private = 0 sinon: _private = 1 si request.form.get ('done') est None: _done = 0 sinon: _done = 1 

Une fois les valeurs lues, nous les passerons à l'appel de procédure stockée MySQL..

cursor.callproc ('sp_addWish', (_ title, _description, _user, _filePath, _private, _done)) 

dans le addWish.html la page nous aurons besoin de définir la prénom attribut pour les éléments à poster. Alors ajoutez prénom aux deux cases nouvellement ajoutées.

 Marquer comme privé   Marque comme Terminé 

Maintenant, nous devons également passer le chemin du fichier de téléchargement. Nous allons donc créer un champ de saisie masqué et définir sa valeur dans le rappel de réussite de téléchargement de fichier..

Définir sa valeur dans le rappel de réussite de téléchargement de fichier.

success: function (réponse, statut) var filePath = 'statique / Uploads /' + response.filename; $ ('# imgUpload'). attr ('src', cheminFichier); $ ('# filePath'). val (filePath); 

Enregistrez les modifications ci-dessus et redémarrez le serveur. Connectez-vous avec des informations d'identification valides et essayez d'ajouter un nouveau souhait avec tous les détails requis. Une fois ajouté avec succès, il devrait être répertorié sur la page d'accueil de l'utilisateur.

Modifier l'implémentation Edit Wish

Premièrement, nous devons ajouter du code HTML pour les trois nouveaux champs. Alors ouvre-toi userHome.html et ajoutez le code HTML suivant après la Titre et la description HTML.

 Photos 
   Feuilleter…    
   
 
 
 
 Marquez ceci comme privé et non visible pour les autres. 
  Marquer comme privé  
 
 Avez-vous déjà accompli cela? 
  Marque comme Terminé  

Nous devrons récupérer les données requises pour renseigner les champs ci-dessus lors de la modification. Modifions donc la procédure stockée sp_GetWishById d'inclure les champs supplémentaires comme indiqué: 

CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_GetWishById' (IN p_wish_id bigint, En p_user_id bigint) BEGIN sélectionner wish_id, wish_title FIN

Ensuite, nous devrons modifier le JSON chaîne dans le / getWishById méthode de route pour inclure les nouveaux champs. Modifier la liste de souhaits dans / getWishById comme montré:

wish.append ('Id': résultat [0] [0], 'Titre': résultat [0] [1], 'Description': résultat [0] [2], 'FilePath': résultat [0] [ 3], 'Privé': résultat [0] [4], 'Terminé': résultat [0] [5])

Pour rendre le résultat, nous devons analyser les données reçues dans le rappel de succès de la modifier Fonction JavaScript dans userHome.html.

succès: fonction (res) var data = JSON.parse (res); $ ('# editTitle'). val (data [0] ['Title']); $ ('# editDescription'). val (data [0] ['Description']); $ ('# imgUpload'). attr ('src', data [0] ['FilePath']); if (data [0] ['Private'] == "1") $ ('# chkPrivate'). attr ('coché', 'coché');  if (data [0] ['Done'] == "1") $ ('# chkDone'). attr ('vérifié', 'vérifié');  $ ('# editModal'). modal (); 

Enregistrez les modifications et redémarrez le serveur. Connectez-vous avec des informations d'identification valides et, lorsque vous êtes sur la page d'accueil de l'utilisateur, essayez de modifier un souhait de la liste. Vous devriez avoir les données renseignées dans la fenêtre contextuelle Modifier.

Maintenant, comme nous l’avons fait sur la page d’ajout de souhaits, ajoutez la référence de script jQuery-File-Upload dans userHome.html.

Initialiser le contrôle de téléchargement de fichier dans la fenêtre d'édition en utilisant le même code que celui utilisé sur la page d'ajout de souhait.

$ (function () $ ('# fileupload'). fileupload (url: 'upload', dataType: 'json', ajouter: function (e, data) data.submit ();, succès: function ( response, status) var filePath = 'static / Uploads /' + response.filename; $ ('# imgUpload'). attr ('src', filePath); $ ('# filePath'). val (filePath); , erreur: fonction (erreur) console.log (erreur););)

Ensuite, nous devons modifier le bouton Mettre à jour et cliquer dans la fenêtre contextuelle Modifier pour inclure les champs supplémentaires ajoutés. Donc, dans le btnUpdate Cliquez sur le bouton, modifiez les paramètres de données passés pour inclure les trois nouveaux champs comme indiqué:

données: titre: $ ('# editTitle'). val (), description: $ ('# editDescription'). val (), id: localStorage.getItem ('editId'), filePath: $ ('# imgUpload' ) .attr ('src'), isPrivate: $ ('# chkPrivate'). est (': coché')? 1: 0, isDone: $ ('# chkDone'). est (': coché')? 1 : 0

S'ouvrir app.py et modifier le / updateWish méthode du gestionnaire de requêtes pour analyser les champs nouvellement ajoutés.

_filePath = request.form ['chemin_fichier'] _isPrivate = request.form ['isPrivate'] _isDone = request.form ['isDone'] 

Modifier la méthode d'appel de procédure pour inclure les paramètres supplémentaires.

cursor.callproc ('sp_updateWish', (_ titre, _description, _wish_id, _user, _filePath, _isPrivate, _isDone))

Maintenant ouvrir sp_updateWish et le modifier pour inclure les champs nouvellement ajoutés.

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, IN p_file_path bigchar, dans p_file_path varchar (200), , IN p_is_done int) DEBUT mettre à jour tbl_wish set wish_title = p_title, wish_description = p_description, wish_file_path = p_file_path, wish_private = p_is_private, wish_accomplished = p_is_done = wish_id et p_wish_id FIN

Enregistrez toutes les modifications ci-dessus et redémarrez le serveur. Connectez-vous avec des informations d'identification valides et essayez de modifier et de mettre à jour les entrées existantes..

Envelopper

Dans cette partie de la série de didacticiels, nous avons vu comment intégrer et utiliser le plugin blueimp jQuery-File-Upload pour télécharger des images dans notre application Python Flask. Dans la prochaine partie de cette série, nous montrerons les souhaits réalisés par les utilisateurs sur la page d'accueil de l'application et ajouterons les fonctionnalités qui leur ressemblent..

Faites-nous savoir vos pensées, corrections et suggestions dans les commentaires ci-dessous. Le code source de ce tutoriel est disponible sur GitHub.