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

Dans la partie précédente de cette série de didacticiels, nous avons implémenté la fonctionnalité de connexion et de déconnexion de notre application Bucket List. Dans cette partie de la série, nous allons implémenter le back-end et le front-end nécessaires à un utilisateur pour ajouter et afficher des éléments de liste de compartiments..

Commencer

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

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

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

cd PythonFlaskMySQLApp_Part2 python app.py

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

Ajouter des éléments de la liste de paniers

Étape 1: Créer une interface pour ajouter des éléments

Nous allons commencer par créer une interface permettant à l'utilisateur connecté d'ajouter des éléments de liste de compartiments. Accédez au des modèles dans le répertoire du projet et créez un fichier appelé addWish.html. Ouvrir addWish.html et ajoutez le code HTML suivant:

         
 
  
App Flacon Python
 
 
 
 
  
Créez votre souhait
  
 Titre 
  
 
  
 Poster 
  
 
  
  
  
 
 
 
 
  
  

Ouvrir app.py et ajoutez un nouvel itinéraire et une méthode pour afficher le Ajouter un souhait page.

@ app.route ('/ showAddWish') def showAddWish (): return render_template ('addWish.html')

Ouvrir userHome.html et ajoutez un nouvel élément de menu pour créer un lien vers la Ajouter un souhait page.

Ajouter un souhait

Enregistrez 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é, cliquez sur le bouton Ajouter un souhait lien et vous devriez avoir la page Add Wish affichée.

Étape 2: Mise en œuvre de la base de données

Pour ajouter des éléments à la liste des compartiments, nous devons créer une table appelée tbl_wish.

CREATE TABLE 'tbl_wish' ('wish_id' int (11) NON NULL AUTO_INCREMENT, 'wish_title' varchar (45) DEFAULT NULL, 'wish_description' varchar (5000) DEFAULT NULL, 'wish_user_id' int (11) DEFAULT NULL, 'wish_date' datetime DEFAULT NULL, PRIMARY KEY ('wish_id')) ENGINE = InnoDB AUTO_INCREMENT = 3 DEFAULT CHARSET = latin1; 

tbl_wish aura Titre, la description et le ID de l'utilisateur qui a créé le souhait.

Ensuite, nous devons créer une procédure stockée MySQL pour ajouter des éléments au tbl_wish table.

UTILISEZ 'BucketList'; Procédure DROP SI EXISTE 'BucketList'. '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) BEGIN inséré dans tbl_wish (wish_title, wish_description) , wish_user_id, wish_date) values ​​(p_title, p_description, p_user_id, NOW ()); FIN $$ DELIMITER; ; 

Étape 3: Créez une méthode Python pour appeler la procédure stockée MySQL 

Créez une méthode appelée addWish dans app.py.

@ app.route ('/ addWish', method = ['POST']) def addWish (): # Le code sera ici 

Puisque nous publierons des données sur cette méthode, nous les avons explicitement déclarées dans la route définie..

Quand un appel est fait au addWish méthode, nous devons valider s'il s'agit d'un appel authentique en vérifiant si la variable de session utilisateur existe. Une fois la session validée, nous lirons le message posté. Titre et la description.

_title = request.form ['inputTitle'] _description = request.form ['inputDescription'] _user = session.get ('utilisateur') 

Une fois que nous avons les valeurs d’entrée requises, nous ouvrons une connexion MySQL et appelons la procédure stockée. sp_addWish.

conn = mysql.connect () cursor = conn.cursor () cursor.callproc ('sp_addWish', (_ title, _description, _user)) data = cursor.fetchall () 

Après avoir exécuté la procédure stockée, nous devons valider les modifications dans la base de données..

si len (data) vaut 0: conn.commit () return redirect ('/ userHome') else: return render_template ('error.html', error = 'Une erreur est survenue!') 

Voici le complet addWish méthode.

@ app.route ('/ addWish', méthodes = ['POST']) par addWish (): essayer: si session.get ('utilisateur'): _title = request.form ['inputTitle'] _description = request.form ['inputDescription'] _user = session.get ('utilisateur') conn = mysql.connect () curseur = conn.cursor () cursor.callproc ('sp_addWish', (_ title, _description, _user)) data = cursor.fetchall () si len (data) vaut 0: conn.commit () return redirect ('/ userHome') else: return 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 () 

Enregistrez tout le code source 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é, cliquez sur le bouton Ajouter un souhait lien. Entrer le Titre et la description pour votre souhait et cliquez Publier. En ajoutant avec succès le souhait, il devrait rediriger vers la page d'accueil de l'utilisateur. Connectez-vous à la base de données MySQL et vous devriez avoir le souhait dans votre tbl_wish table. 

Afficher un élément de la liste de compartiments

Étape 1: Créer une procédure stockée pour récupérer un souhait

Créons une procédure stockée MySQL qui obtiendra les souhaits créés par un utilisateur. Il faudra l'utilisateur ID en tant que paramètre et renvoie un ensemble de données de souhaits créé par l'ID utilisateur particulier. 

UTILISEZ 'BucketList'; DROP procedure IF EXISTS 'sp_GetWishByUser'; DELIMITER $$ USE 'BucketList' $$ CREATE PROCEDURE 'sp_GetWishByUser' (IN p_user_id bigint) BEGIN select * from tbl_wish où wish_user_id = p_user_id; FIN $$ DELIMITER; 

Étape 2: Créer une méthode Python pour récupérer des données

Ensuite, créons une méthode Python qui appellera le sp_GetWishByUser procédure stockée pour obtenir les souhaits créés par un utilisateur. Ajouter une méthode appelée getWish dans app.py.

@ app.route ('/ getWish') def getWish (): try: if session.get ('utilisateur'): _user = session.get ('utilisateur') autre: return render_template ('error.html', error = 'Accès non autorisé') sauf exception comme e: return render_template ('error.html', error = str (e)) 

Comme indiqué dans le code ci-dessus, cette méthode ne peut être appelée qu'avec un code valide. utilisateur session. Une fois que nous avons validé une session utilisateur valide, nous allons créer une connexion à la base de données MySQL et appeler la procédure stockée. sp_GetWishByUser.

 _user = session.get ('utilisateur') # Connectez-vous à MySQL et récupérez des données con = mysql.connect () cursor = con.cursor () cursor.callproc ('sp_GetWishByUser', (_ user,)) souhaite = cursor.fetchall ( )

Une fois que nous avons récupéré les données de MySQL, nous les analyserons et les convertirons en un dictionnaire afin qu'il soit facile de revenir en tant que JSON.

souhaits_dict = [] pour le souhait dans souhaits: souhait_dict = 'Id': souhait [0], 'Titre': souhait [1], 'Description': souhait [2], 'Date': souhait [4] souhaits_dict. append (wish_dict)

Après avoir converti les données en un dictionnaire nous convertirons les données en JSON et retour.

retourne json.dumps (souhaits_dict)

Voici le complet getWish méthode.

@ app.route ('/ getWish') def getWish (): essayer: if session.get ('utilisateur'): _user = session.get ('utilisateur') con = mysql.connect () curseur = con.cursor ( ) cursor.callproc ('sp_GetWishByUser', (_ utilisateur,)) souhaits = curseur.fetchall () souhaits_dict = [] pour souhait dans souhait: souhait_dict = 'Id': souhait [0], 'Titre': souhait [1] , 'Description': souhait [2], 'Date': souhait [4] Wish_dict.append (wish_dict) renvoie json.dumps (Wish_dict) else: renvoie render_template ('error.html', error = 'Accès non autorisé') sauf exception en tant que e: return render_template ('error.html', error = str (e)) 

Étape 3: Liaison de données JSON au HTML

Lorsque la page d'accueil de l'utilisateur est chargée, nous appelons le getWish méthode utilisant jQuery AJAX et lier les données reçues dans notre code HTML. Dans userHome.html ajouter ce qui suit jQuery Script AJAX:

Enregistrez les modifications ci-dessus et redémarrez le serveur. Une fois connecté avec une adresse e-mail et un mot de passe valides, vérifiez la console de votre navigateur et la liste de souhaits devrait être extraite de la base de données, comme indiqué:

["Date": "Vendredi 23 janvier 2015 23:26:05 GMT", "Description": "Je veux escalader le mont Everest", "Id": 1, "Titre": "Ascension de l'Everest",  "Date": "Vendredi 23 janvier 2015 23:27:05 GMT", "Description": "Je veux sauter du haut d'une montagne", "Id": 2, "Titre": "Saut à l'élastique"]

Maintenant, nous devons parcourir le JSON données et le lier dans le code HTML. Nous allons utiliser bootstrap groupe de liste pour afficher les éléments de notre liste de souhaits. Voici le modèle de base pour groupe de liste:

  
Titre de souhait
 
Description du souhait
  

Ajoutez le code HTML ci-dessus au Jumbotron div en userHome.html. Voici à quoi ça ressemble: 

Maintenant, nous allons créer ce qui est montré ci-dessus groupe de liste div dynamiquement pour chaque entrée de la liste de souhaits et l'ajouter à la Jumbotron div. Dans le rappel de succès de la getWish appel de fonction, créez un div comme indiqué:

var div = $ ('
') .attr (' classe ',' groupe-liste ') .append ($ ('') .attr (' classe ',' élément actif de la liste ') .append ($ ('
') .attr (' classe ',' liste-groupe-article-rubrique '), $ ('
') .attr (' classe ',' texte-liste-groupe-article ')));

Nous allons cloner le div ci-dessus pour créer le groupe de liste div pour chaque élément de la liste de souhaits. Ensuite, analyser le rendu JSON chaîne dans un objet JavaScript. 

var wishObj = JSON.parse (res);

Maintenant, parcourez wishObj et pour chaque article souhaité, cloner une nouvelle div et l’ajouter à la Jumbotron div.

var wish = "; $ .each (wishObj, fonction (index, valeur) wish = $ (div) .clone (); $ (wish) .find ('h4'). text (value.Title); $ ( wish) .find ('p'). text (value.Description); $ ('. jumbotron'). append (wish););

Enregistrez les modifications ci-dessus et redémarrez le serveur. Connectez-vous en utilisant une adresse e-mail et un mot de passe valides et vous devriez pouvoir voir la liste des souhaits créés par l'utilisateur..

Conclusion

Dans ce tutoriel, nous avons implémenté une interface permettant à un utilisateur connecté de créer un souhait. Nous avons également implémenté les méthodes requises et la procédure stockée dans la base de données pour extraire et afficher les souhaits créés dans la page d'accueil de l'utilisateur.. 

Dans la prochaine partie de cette série, nous verrons comment mettre en œuvre le modifier et Effacer fonctionnalité pour la liste de souhaits affichée dans la page d'accueil de l'utilisateur.

Le code source de ce tutoriel est disponible sur GitHub.

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