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

Dans la partie précédente de cette série de didacticiels, 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 à chaque souhait afin qu'un utilisateur puisse aimer un souhait particulier.

Dans cette partie de la série, nous verrons comment basculer vers l'affichage similaire / différent et afficher le nombre total de «j'aime» reçus par un souhait particulier..

Commencer

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

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

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

cd PythonFlaskMySQLApp_Part7 python app.py

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

Ajouter un nombre similaire

Nous allons commencer par implémenter une fonctionnalité pour afficher le nombre total de comptes qu'un souhait particulier a généré. Quand un nouveau souhait est ajouté, nous allons faire une entrée dans le tbl_likes table. Alors modifiez la procédure stockée MySQL sp_addWish ajouter une entrée dans le tbl_likes table. 

DELIMITER $$ 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_private int, ) BEGIN insérer dans tbl_wish (wish_title, wish_description, wish_user_id, wish_date, wish_file_path, wish_private, wish_accomplished) valeurs (p_title, p_description, p_user_id, NOW (), p_file_path, p_isile_private, p_is_done) SET @last_id = LAST_INSERT_ID (); insérer dans tbl_likes (wish_id, user_id, wish_like) valeurs (@last_id, p_user_id, 0); FIN $$ DELIMITER; 

Comme indiqué dans le code de procédure stockée ci-dessus, après avoir inséré le souhait dans le tbl_wish table, nous avons récupéré le dernier inséré ID et inséré les données dans tbl_likes table.

Ensuite, nous devons modifier le sp_GetAllWishes procédure stockée pour inclure le nombre de goûts que chaque souhait a recueillis. Nous utiliserons une fonction MySQL pour obtenir le nombre total de souhaits. Alors créez une fonction appelée obtenir la somme qui prendra le souhait ID et renvoyer le nombre total de j'aime.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' FUNCTION 'getSum' (p_wish_id int) RETURNS int (11) BEGIN sélectionner la somme (wish_like) dans @sm à partir de tbl_likes où wish_id = p_wish_id; RETOUR @sm; FIN $$ DELIMITER; 

Maintenant, appelez la fonction MySQL ci-dessus appelée obtenir la somme dans la procédure stockée sp_GetAllWishes pour obtenir le nombre total de "j'aime" pour chaque souhait.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_GetAllWishes' () BEGIN Sélectionnez wish_id, wish_title, wish_description, wish_file_path, getSum (wish_id) à partir de tbl_wish où wish_private = 0; FIN $$ DELIMITER; 

Modifier le getAllWishes Méthode Python pour inclure le nombre similaire. Tout en itérant le résultat renvoyé par la procédure stockée MySQL, incluez le champ like comme indiqué:

pour le souhait dans le résultat: wish_dict = 'Id': wish [0], 'Titre': wish [1], 'Description': wish [2], 'FilePath': wish [3], 'Like': wish [ 4] Wish_dict.append (Wish_dict)

Modifier le CreateThumb Méthode JavaScript pour créer une étendue supplémentaire que nous utiliserons pour afficher le nombre de pages similaires.

var likeSpan = $ ('') .attr (' aria-hidden ',' true '). html (' '+ like +' like (s) ');

Et annexer le comme Span au paragraphe parent p. Voici le modifié CreateThumb Fonction JavaScript.

Fonction CreateThumb (id, titre, desc, chemin du fichier, comme) 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 '); var likeSpan = $ ('') .attr (' aria-hidden ',' true '). html (' '+ like +' like (s) '); p.append (btn.append (span)); p.append (likeSpan); caption.append (titre); caption.append (desc); caption.append (p); thumbNail.append (img); thumbNail.append (légende); mainDiv.append (thumbNail); retour mainDiv; 

Inclure le comme paramètre lors de l'appel du CreateThumb Fonction JavaScript du rappel de succès de l'appel jQuery AJAX à / getAllWishes.

CreateThumb (data [i] .Id, data [i] .title, data [i] .Description, data [i] .FilePath, data [i] .Like)

Enregistrez les modifications et redémarrez le serveur. Une fois connecté à l’application, vous devriez pouvoir voir le nombre de points similaires correspondant à chacun des souhaits..

Montrer si un souhait est aimé

En voyant les goûts correspondant à chaque souhait, il n'est pas très clair si l'utilisateur connecté a aimé le souhait ou non. Donc, nous allons montrer un message approprié comme Vous et 20 autres. Afin de mettre en œuvre cela, nous devons modifier notre sp_GetAllWishes d'inclure un bit de code indiquant si l'utilisateur connecté a aimé un souhait particulier ou non. Pour vérifier si un souhait a été aimé, nous effectuons un appel de fonction. Créez une fonction appelée a aimé qui prend en utilisateur ID et souhaite ID en tant que paramètres et renvoie si le souhait a été aimé par l'utilisateur ou non.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' FUNCTION 'hasLiked' (p_wish int, p_user int) RETURNS int (11) BEGIN commencez à sélectionner wish_like dans @myval à partir de tbl_likes où wish_id = p_wish et user_id = p_user; RETOUR @myval; FIN $$ DELIMITER; 

Maintenant, appelez la fonction MySQL ci-dessus a aimé à l'intérieur sp_GetAllWishes pour renvoyer un champ supplémentaire dans le jeu de données renvoyé, indiquant l'état de l'utilisateur.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_GetAllWishes' (p_user int) BEGIN sélectionnez wish_id, wish_title, wish_description, wish_file_path, getSum (wish_id), hasLiked (wish_id, wish_id, p_user) de tbl_wish where FIN

Ouvrir app.py et modifier l'appel à la procédure stockée MySQL sp_GetAllWishes inclure l'utilisateur ID en paramètre.

_user = session.get ('utilisateur') conn = mysql.connect () curseur = conn.cursor () cursor.callproc ('sp_GetAllWishes', (_ utilisateur,)) 

Maintenant, modifiez le getAllWishes méthode pour inclure le même statut de l'utilisateur pour un souhait particulier. Modifier le code à inclure A aimé dans le dictionnaire créé.

pour le souhait dans le résultat: wish_dict = 'Id': wish [0], 'Titre': wish [1], 'Description': wish [2], 'FilePath': wish [3], 'Like': wish [ 4], 'HasLiked': wish [5] Wish_dict.append (wish_dict)

À l'intérieur de CreateThumb Fonction JavaScript, nous allons vérifier A aimé et ajouter le HTML en conséquence.

if (hasLiked == "1") likeSpan.html ('You &' + (Number (like) - 1) + 'Others');  else likeSpan.html ('' + like + 'like (s)'); 

Comme indiqué dans le code ci-dessus, nous montrons le même nombre si l'utilisateur n'a pas aimé un souhait particulier. Si l'utilisateur a aimé le souhait, nous affichons un message plus descriptif.

Rafraîchir le même nombre

Au moment où nous cliquons sur le bouton "J'aime", le statut "J'aime" est mis à jour dans la base de données, mais ne change pas dans le tableau de bord. Alors mettons à jour dans le rappel de succès de l'appel AJAX sur le comme clic de bouton.

Nous allons commencer par modifier la procédure stockée MySQL. sp_AddUpdateLikes. Auparavant, nous passions dans le même statut, 1 pour un semblable et 0 pour différent. Nous allons modifier cela et basculer comme / différent dans la procédure stockée. Ouvrir sp_AddUpdateLikes et sélectionnez le statut similaire dans une variable et vérifiez le statut de la variable. Si le statut de la variable est similaire, nous le mettrons à la différence et vice-versa. Voici le modifié sp_AddUpdateLikes procédure stockée.

-- -------------------------------------------------------------------------------- -- DDL de routine - Remarque: les commentaires avant et après le corps de la routine ne seront pas stockés par le serveur - ---------------------------- -------------------------------------------------- - DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_AddUpdateLikes' (p_wish_id int, p_user_id int, p_like int) BEGIN si (select existe (sélectionnez 1 dans tbl_likes où wish_id = p_wish_id et user_id = p_user_id) sélectionnez wish_like dans @currentVal à partir de tbl_likes où wish_id = p_wish_id et user_id = p_user_id; if @currentVal = 0 alors mettez à jour tbl_likes set wish_like = 1 où wish_id = p_wish_id et user_id = p_user_id; sinon mettre à jour tbl_likes set wish_like = 0 où wish_id = p_wish_id et user_id = p_user_id; fin si; 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 le CreateThumb Fonction JavaScript, attribuer un ID au comme Span que nous avons créés précédemment, afin que nous puissions mettre à jour le statut selon les besoins.

var likeSpan = $ ('') .attr (' aria-hidden ':' true ',' id ':' span _ '+ id);

S'ouvrir app.py. À l'intérieur de addUpdateLike méthode, une fois que les données ont été mises à jour avec succès, nous allons récupérer le nombre et l'état des souhaits à l'aide d'un autre appel de procédure stockée. Alors créez une procédure stockée MySQL appelée sp_getLikeStatus. À l'intérieur sp_getLikeStatus nous appellerons les fonctions MySQL déjà créées obtenir la somme et a aimé pour obtenir le statut.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_getLikeStatus' (IN p_wish_id int, IN p_user_id int) BEGIN sélectionnez getSum (p_wish_id), hasLiked (p_wish_id, p_user_id); FIN $$ DELIMITER; 

Une fois un appel à sp_AddUpdateLikes de la méthode Python addUpdateLike a été faite, ferme le curseur et la connexion.

si len (data) vaut 0: conn.commit () cursor.close () conn.close ()

Maintenant, appelez la procédure stockée sp_getLikeStatus.

conn = mysql.connect () cursor = conn.cursor () cursor.callproc ('sp_getLikeStatus', (_ wishId, _user)) resultat = cursor.fetchall () 

Renvoie le même nombre et le même statut avec la réponse.

return json.dumps ('status': 'OK', 'total': résultat [0] [0], 'likeStatus': résultat [0] [1] 

Dans dashboard.html, dans le rappel de succès de l’appel AJAX fait à la addUpdateLike méthode, analyser la réponse renvoyée et sur la base du même état afficher le même nombre.

succès: fonction (réponse) var obj = JSON.parse (réponse); if (obj.likeStatus == "1") $ ('# span_' + spId) .html ('You &' + (Number (obj.total) - 1) + 'Autres');  else $ ('# span_' '+ spId) .html (' '+ obj.total +' like (s) '); 

Enregistrez les modifications, redémarrez le serveur et connectez-vous avec des informations d'identification valides. Une fois sur la page du tableau de bord, essayez d’aimer un souhait particulier et voyez comment le statut similaire est mis à jour en conséquence..

Envelopper

Dans cette partie de la série, nous avons implémenté les fonctionnalités de ressemblance / dissemblance pour les souhaits affichés dans la page du tableau de bord. Dans les prochaines parties de la série, nous allons implémenter quelques nouvelles fonctionnalités dans l'application et affiner certaines des fonctionnalités existantes..

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