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

Dans la partie précédente de cette série, nous avons implémenté la fonctionnalité de téléchargement d’images pour les utilisateurs tout en ajoutant un souhait. Nous avons également ajouté quelques options supplémentaires liées au souhait d'un utilisateur sur la page Ajouter un souhait. Dans ce tutoriel, nous allons passer au niveau suivant en implémentant la fonctionnalité pour satisfaire un souhait particulier..

Commencer 

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

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

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

cd PythonFlaskMySQLApp_Part6 python app.py

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

Création de l'interface utilisateur du tableau de bord

Nous allons créer une nouvelle page appelée tableau de bord où tous les souhaits de différents utilisateurs seront affichés. Tout utilisateur peut aimer ou commenter les souhaits affichés dans le tableau de bord. Alors, accédez au dossier des modèles et créez un fichier appelé dashboard.html. S'ouvrir dashboard.html et ajoutez le code HTML suivant:

        
 
  
App Flacon Python
 
 
 
 
 
  
 
Saut à l'élastique
 
véhicula ut id elit.
 
    
 
 
 
 
 
  
 
Saut à l'élastique
 
véhicula ut id elit.
 
    
 
 
 
 
 
  
 
Saut à l'élastique
 
véhicula ut id elit.
 
    
 
 
 
 
 
 
  
 
Saut à l'élastique
 
véhicula ut id elit.
 
    
 
 
 
 
 
  
 
Saut à l'élastique
 
véhicula ut id elit.
 
    
 
 
 
 
 
  
 
Saut à l'élastique
 
véhicula ut id elit.
 
    
 
 
 
 
 
  
  

S'ouvrir app.py et créez un nouvel itinéraire appelé / showDashboard. En utilisant cette route, nous allons rendre la page du tableau de bord.

@ app.route ('/ showDashboard') def showDashboard (): return render_template ('dashboard.html') 

Modifier le / validateLogin méthode pour rediriger l'utilisateur sur la connexion réussie vers la page du tableau de bord au lieu de la page d'accueil de l'utilisateur.

renvoyer la redirection ('/ showDashboard')

Enregistrez les modifications ci-dessus et redémarrez le serveur. Pointez votre navigateur sur http: // localhost: 50002 et connectez-vous à l'aide d'une adresse e-mail et d'un mot de passe valides. Une fois connecté, vous devriez pouvoir voir la page du tableau de bord.

Comme le montre l'image ci-dessus, nous afficherons tous les souhaits créés par différents utilisateurs et donnerons accès à d'autres utilisateurs pour les aimer..

Remplir le tableau de bord

Premièrement, nous devons extraire les données de la base de données pour remplir le tableau de bord. Créons donc une procédure stockée pour obtenir les souhaits créés par les utilisateurs.

UTILISEZ 'BucketList'; DROP procedure IF EXISTS 'sp_GetAllWishes'; DELIMITER $$ USE 'BucketList' $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_GetAllWishes' () BEGIN Sélectionnez wish_id, wish_title, wish_description, wish_file_path à partir de tbl_wish where wish_private = 0; FIN $$ DELIMITER; 

La procédure stockée ci-dessus ira chercher tous les souhaits de tbl_wish qui ne sont pas marqués comme privés.

Ensuite, nous allons créer une nouvelle méthode Python pour appeler la procédure stockée. sp_GetAllWishes. Ouvrir app.py et ajoutez le code suivant pour le getAllWishes méthode.

@ app.route ('/ getAllWishes') def getAllWishes (): essayer: if session.get ('utilisateur'): conn = mysql.connect () curseur = conn.cursor () curseur.callproc ('sp_GetAllWishes') résultat = curseur.fetchall () souhaits_dict = [] pour le souhait dans le résultat: souhait_dict = 'Id': souhait [0], 'Titre': souhait [1], 'Description': souhait [2], 'FilePath': souhait [3] Wish_dict.append (Wish_dict) renvoie json.dumps (Wish_dict) else: return render_template ('error.html', error = 'Accès non autorisé') sauf comme e: return render_template ('error.html', error = str (e))

Dans la méthode ci-dessus, nous avons d’abord vérifié la validité d’une session utilisateur, puis créé une connexion MySQL. Utiliser la connexion MySQL Connecticut, nous avons utilisé un curseur pour appeler la procédure stockée sp_GetAllWishes pour obtenir les données requises. Une fois que les données ont été récupérées, nous avons analysé le résultat et renvoyé une JSON chaîne.

Nous appellerons ce qui précède créé / getAllWishes méthode lors du chargement de la page du tableau de bord. Ouvrir dashboard.html et, à l’aide de jQuery AJAX, appelez le / getAllWishes sur document.ready.

$ (function () $ .ajax (url: '/ getAllWishes', tapez: 'GET', succès: function (réponse) console.log (réponse);, erreur: function (erreur) console.log (Erreur);  ); )

Enregistrez les modifications ci-dessus et redémarrez le serveur. Une fois connecté à l'application, vérifiez la console de votre navigateur et vous devriez pouvoir voir les données extraites de la base de données..

["Description": "Saut à l'élastique", "FilePath": "images_11 / créer une application Web à partir de zéro, en utilisant python-flask-et-mysql-part-7.jpg", "Id" : 10, "Titre": "Saut à l'élastique", "Description": "Mont Everest", "FilePath": "static / Uploads / e3e8f7fa-6cb9-4cc3-9989-a80e5089546f.png", "Id": 11, "Titre": "Mont Everest", "Description": "Rafting sur la rivière", "FilePath": "static / Uploads / dff3a64c-5193-42b5-9cdb-9d67a7bbacab.png", "Id": 14 , "Titre": "Rafting en rivière", "Description": "Plongée en haute mer", "FilePath": "static / Uploads / b0656759-c038-46b4-9529-c208aaa6bfb7.png", "Id": 15, "Titre": "Plongée en haute mer"]

En utilisant les données de la réponse, nous allons remplir notre page de tableau de bord. Tout d’abord, supprimez le code HTML entre les .bien div de dashboard.html.

Dans le rappel de succès de l'appel AJAX, analyser le réponse à un objet JavaScript.

var data = JSON.parse (réponse);

Nous devrons créer le code HTML miniature de manière dynamique en utilisant jQuery pour chaque série de trois souhaits consécutifs. Commençons par créer une fonction JavaScript pour créer le code HTML de manière dynamique. Voici le code HTML que nous allons créer de manière dynamique à l'aide de jQuery:

 
 
 
Test de l'application
 
Bonjour
 
  
 
 
 

Nous nommerons la fonction JavaScript CreateThumb. Dans cette fonction, nous allons créer les éléments HTML et les ajouter à leurs éléments parents pour obtenir le code HTML présenté ci-dessus..

fonction CreateThumb (id, titre, desc, chemin du fichier) var mainDiv = $ ('
') .attr (' classe ',' col-sm-4 col-md-4 '); var thumbNail = $ ('
') .attr (' classe ',' miniature '); var img = $ ('') .attr (' src ': chemin du fichier,' rendu du détenteur de données ': true,' style ':' height: 150px; width: 150px; display: block '); var caption = $ ('
') .attr (' classe ',' légende '); var titre = $ ('
') .text (titre); var desc = $ ('
') .text (desc); var p = $ ('
'); var btn = $ ('') .attr (' id ':' btn_ '+ id,' type ':' bouton ',' classe ':' btn btn-danger btn-sm '); var span = $ ('') .attr (' class ':' glyphicon glyphicon-thumbs-up ',' aria-hidden ':' true '); p.append (btn.append (span)); caption.append (titre); caption.append (desc); caption.append (p); thumbNail.append (img); thumbNail.append (légende); mainDiv.append (thumbNail); retour mainDiv; 

Le code ci-dessus est assez simple donc je ne vais pas entrer dans les détails.

À l'avenir, nous allons parcourir l'analyse JSON réponse et créer le HTML en utilisant le CreateThumb une fonction. Nous prévoyons d'afficher trois souhaits par ligne. Nous allons donc vérifier cela et créer une nouvelle ligne à chaque fois pour trois souhaits. Ajoutez le code suivant au Succès rappel de l'appel AJAX dans dashboard.html.

var itemsPerRow = 0; var div = $ ('
') .attr (' classe ',' rangée '); pour (var i = 0; i < data.length; i++)  if (itemsPerRow < 3)  if (i == data.length - 1)  div.append(CreateThumb(data[i].Id,data[i].Title, data[i].Description, data[i].FilePath)); $('.well').append(div);  else  div.append(CreateThumb(data[i].Id,data[i].Title, data[i].Description, data[i].FilePath)); itemsPerRow++;   else  $('.well').append(div); div = $('
') .attr (' classe ',' rangée '); div.append (CreateThumb (data [i] .Id, data [i] .Title, data [i] .Description, data [i] .FilePath)); if (i == data.length - 1) $ ('. well'). append (div);  itemsPerRow = 1; 

Enregistrez les modifications et redémarrez le serveur. Connectez-vous à l'application et sur la page du tableau de bord, vous devriez pouvoir afficher les souhaits ajoutés par différents utilisateurs, avec une option permettant de les aimer..

Ensuite, ajoutons un Cliquez sur événement aux boutons comme sous les vignettes de souhaits. Puisque nous avons créé les boutons de manière dynamique, nous devrons attacher l'événement click aux boutons à l'aide de la méthode jQuery on. 

$ (document) .on ('cliquez', '[id ^ = "btn_"]', function () // la fonction événement peut être ajoutée ici);

Mettre en œuvre une fonctionnalité similaire

Commençons par créer un tableau qui garde en mémoire les goûts d’un souhait particulier. Créez une table appelée tbl_likes. 

CREATE TABLE 'BucketList'. 'Tbl_likes' ('wish_id' INT NOT NULL, 'like_id' INT NOT NULL AUTO_INCREMENT, 'user_id' INT NULL, 'wish_like' INT NULL DEFAUT 0; PRIMARY KEY ('like_id')); 

Maintenant, chaque fois qu'un utilisateur aime ou non un souhait particulier, nous mettons à jour ce tableau. Créons une procédure stockée MySQL pour mettre à jour le tableau ci-dessus.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_AddUpdateLikes' (p_wish_id int, p_user_id int, BE_BIN si (select existe (sélectionnez 1 dans tbl_likes où wish_id = p_wish_id et user_id = p_user_id)) set wish_like = p_like où wish_id = p_wish_id et user_id = p_user_id; sinon insérer dans tbl_likes (wish_id, user_id, wish_like), valeurs (p_wish_id, p_user_id, p_like); fin si; FIN

Dans cette procédure stockée, nous avons simplement vérifié si la personne avait déjà aimé le souhait ou non. Si il ou elle a déjà aimé, alors nous avons mis à jour cette entrée ou ajouté une nouvelle.

Créons une méthode Python pour appeler la procédure stockée ci-dessus.

@ app.route ('/ addUpdateLike', methods = ['POST']) par addUpdateLike (): try: if session.get ('utilisateur'): _wishId = request.form ['wish'] _like = request.form ['like'] _user = session.get ('utilisateur') conn = mysql.connect () curseur = conn.cursor () cursor.callproc ('sp_AddUpdateLikes', (_ wishId, _user, _like)) data = cursor.fetchall () si len (data) vaut 0: conn.commit () renvoie json.dumps ('status': 'OK') sinon: renvoie render_template ('error.html', error = 'Une erreur s'est produite!') else: return render_template ('error.html', error = 'Accès non autorisé') sauf exception comme e: return render_template ('error.html', error = str (e)) enfin: cursor.close () conn.close ( )

C'est la méthode Python qui appellera la procédure stockée sp_AddUpdateLikes. Dans cette méthode, nous avons vérifié la validité d’une session utilisateur, puis nous avons transmis le souhait. ID et comme statut à la procédure stockée pour la mise à jour. Lorsque l'utilisateur clique sur le bouton J'aime, nous devons appeler la méthode Python / addUpdateLike. Alors ajoutez le code suivant à la comme bouton événement clic dans la fonction dashboard.html. 

$ (document) .on ('clic', '[id ^ = "btn_"]', fonction () $ .ajax (url: '/ addUpdateLike', méthode: 'POST', données: souhait: $ (this) .attr ('id'). split ('_') [1], comme: 1, succès: fonction (réponse) console.log (réponse);, erreur: fonction (erreur) console .log (erreur);););

Pour le moment, nous avons codé en dur la valeur de like dans l'appel ci-dessus. Enregistrez donc les modifications et redémarrez le serveur. Connectez-vous à l'application et cliquez sur le bouton J'aime situé sous la vignette de votre choix. Maintenant vérifier tbl_likes et vous devriez avoir une entrée là-bas.

Conclusion

Dans cette partie du didacticiel, nous avons renseigné la page du tableau de bord de notre application avec les souhaits créés par différents utilisateurs. Nous avons également attaché un bouton similaire à chacun afin que les utilisateurs puissent aimer un souhait particulier. Dans la partie suivante, nous verrons comment basculer vers l’affichage et afficher le nombre total de «j'aime» reçues par un souhait.

Postez vos suggestions ou corrections dans la case de commentaire ci-dessous. Le code source de ce tutoriel est disponible sur GitHub.