Intro au ballon: ajout d'une page de contact

Dans l'article précédent de cette mini-série, nous avons utilisé Flask pour créer un site Web simple qui contient des pages "à la maison" et "à propos" à l'aide d'un flux de travail généralisé que nous pouvons appliquer à d'autres applications Web basées sur Flask. Dans cette leçon, je vais montrer comment ajouter une page de contact qui permet aux utilisateurs de vous envoyer des messages.

Le code utilisé dans cet article peut être trouvé sur GitHub. 

---

Extensions du flacon

Le ballon ne vient pas avec de nombreuses fonctionnalités hors de l'étagère, ce qui facilite le ramassage et l'apprentissage. Il n'y a pas de mappeur d'objet-relation pour l'interaction de base de données ou les interfaces d'administration pour ajouter et mettre à jour le contenu. Il n'offre qu'un petit ensemble de fonctions, dont deux que nous avons déjà utilisées - dender_template () .

Au lieu d'expédier avec des fonctionnalités supplémentaires, le modèle d'extension de FLASK vous permet d'ajouter des fonctionnalités au besoin. Une extension FLASK est un package qui ajoute des fonctionnalités spécifiques à votre application. Par exemple, Flask-Sqlalchemy ajoute la prise en charge de la base de données à votre application, tandis que Flask-Login ajoute la prise en charge de la connexion / déconnexion. Vous pouvez trouver une liste complète des extensions dans le registre d'extension FLASK.

Pour créer une page de contact, nous utiliserons Flask-WTF pour gérer et valider les données du formulaire et Flask-Mail pour envoyer des données de formulaire aux données. Qu'est-ce que cela signifie? Regardez le diagramme suivant:

---

Un utilisateur émet une demande de remise pour une page Web qui contient un formulaire.

L'utilisateur remplit le formulaire. Plus de champs ne valident pas, la page Web contenant le formulaire se charge à nouveau avec un message d'erreur utile, incitant l'utilisateur à réessayer.

Si tous les champs valident, les informations de formulaire sont utilisées à l'étape suivante du pipeline.
2. Une page de contact aura des champs pour le nom, le message, le sujet et le message de l'utilisateur. Dans Flask, nous publierons le formulaire sur une fonction à l'intérieur
Routes.py
3. . Cette fonction est appelée le gestionnaire de formulaire. Nous allons exécuter quelques vérifications de validation, et si l'une des entrées ne passe pas, nous actualiserons la page pour afficher un message qui décrit l'erreur. Une fois que tous les vérifications de validation passent, nous utiliserons les données du formulaire pour la prochaine étape: envoyez le message du message, le propriétaire du site Web. C'est ainsi que le fonctionnement de la gestion et de la validation du formulaire fonctionne. Maintenant, où définissons-nous réellement le formulaire? Nous pourrions écrire HTML en utilisant l'attribut Action
à un script Python. Le script Python refléterait le formulaire afin de capturer chaque champ de formulaire et de valider les données de champ de formulaire. Si nous utilisons cette stratégie, cependant, nous définissons essentiellement le formulaire deux fois - une fois pour le front-end et une fois pour le back-end.

4. Ce serait formidable de définir la forme une seule fois: dans le script Python. C'est exactement ce que Flask-WTF nous permet de faire. Nous définirons le formulaire une seule fois dans un script Python, puis nous laisserons FLASK-WTF générer le HTML du formulaire pour nous. Le point de tout cela est de séparer la présentation du contenu.

   Assez de bavardage. Codesons.

   Création d'une forme

   En première étape, revenons dans l'environnement de développement isolé que nous avons créé la dernière fois.

   $ cd flaskapp<br>$ . bin/activate<br>

   Maintenant que nous avons entré et activé notre environnement de développement, nous pouvons maintenant installer le Flask-wtf:

   pip install -U Flask-WTF<br>

   Définir le formulaire dans un script Python. Nous avons déjà rotes.py , qui mappe les URL aux fonctions. Ne l'encombrons pas avec du code non lié. Au lieu de cela, créez un nouveau fichier appelé forms.py et placez-le dans le dossier app / .

   app / forms.py

   from flask_wtf import FlaskForm<br>from wtforms import StringField, TextAreaField, SubmitField<br><br><br><br>class ContactForm(FlaskForm):<br>  name = StringField("Name")<br>  email = StringField("Email")<br>  subject = StringField("Subject")<br>  message = TextAreaField("Message")<br>  submit = SubmitField("Send") <br>

   Nous venons de créer un formulaire. Qu'avons-nous fait? Tout d'abord, nous avons importé quelques classes utiles à partir du Flask-WTF Contactform , héritant de & lt; input type = "text" & gt; name & lt; / input & gt; Dans un fichier html, vous écrivez à partir des formulaires d'importation de contact script.

   app / rotes.py

   from flask import Flask, render_template<br>from forms import ContactForm<br>

   Ensuite, configurez Flask-WTF pour gérer un exploit de sécurité connu sous le nom de contrefaçon de demande de site transversal (CSRF). Dans un monde parfait, votre serveur ne traiterait que des formulaires qui appartiennent à votre application Web. En d'autres termes, votre serveur ne gérerait et validerait les formulaires que vous avez créés. Cependant, il est possible pour un attaquant de créer un formulaire sur son propre site Web, de le remplir d'informations malveillantes et de la soumettre à votre serveur. Si votre serveur accepte ces informations malveillantes, toutes sortes de mauvaises choses peuvent se produire ensuite.

   Vous pouvez empêcher une attaque CSRF en vous assurant que la soumission de formulaire provient de votre application Web. Une façon de le faire est de garder un jeton unique caché à l'intérieur de votre HTML / Contact , la fonction Contact () , nous créons d'abord une nouvelle instance de notre formulaire de contact dans la ligne trois et l'envoyons à un modèle Web nommé Contact.html en ligne quatre. Nous allons créer ce modèle Web sous peu.

   Nous avons encore du travail à faire ici. Le diagramme ci-dessus a montré que si une demande GET est envoyée au serveur, la page Web contenant le formulaire doit être récupérée et chargée dans le navigateur. Si le serveur reçoit une demande de post, une fonction doit capturer les données de champ de formulaire et vérifier si elle est valide. En termes de Python, cette logique peut être exprimée dans une logique if ... else à la Render_template () dans l'article précédent, alors nous importons ici une classe de balle de plus nommée Demande détermine si la méthode HTTP actuelle est un ou un article. Ensuite, la fonction contact () (lignes 9-13).

   Dans le cas d'une demande de poste, une chaîne indiquant que le formulaire a été publié sera retourné.

   Cette chaîne est un espace réservé temporaire, et nous le remplacerons par du code réel dans la dernière étape de cet article. Sinon, si la demande utilise GET, nous renvoyons le modèle Web contact.html qui contient le formulaire.

   L'étape suivante consiste à créer le modèle Web Contact.html et le mettre à l'intérieur des modèles dossier.

   app / modèles / contact.html

   $ cd flaskapp<br>$ . bin/activate<br>

   comme avec

   home.html et À propos de.html , la contact.html Template étend la mise en page. son propre texte. Nous spécifions d'abord où envoyer les données du formulaire sur la soumission en définissant l'attribut Action Html. Le HTML rendu est renvoyé à rotes.py . Routes.py

Renvoie le HTML au navigateur, et nous voyons la page de contact contenant le formulaire.
5. Bouton.
La demande de poste frappe
6. routes.py , où le contact URL () .
7. La fonction si ... else flux flow pour la demande de post HTTP.
La chaîne / contact
8. et remplissez la forme. Mais que se passe-t-il si l'utilisateur ne remplit pas correctement le formulaire? Nous devons valider l'entrée de l'utilisateur afin qu'elle ne cause pas de problèmes dans les étapes ultérieures. La validation du formulaire est effectuée en utilisant des validateurs de formulaire. Heureusement, Flask-WTF est livré avec de nombreux validateurs utiles et intégrés que nous pouvons utiliser tout de suite. Nous allons mettre ces validateurs dans le validateur intégré de DatareQuired
de [validators = dataREQUIRED ()]
9. à chaque champ de formulaire pour valider sa présence. Remarquez que ce validateur se trouve dans une liste Python, ce qui signifie que nous pouvons facilement ajouter plus de validateurs à cette liste. Ensuite, exigeons que les adresses e-mail correspondent au modèle Email () Validator nécessite le package EMAIL_VALIDATOR à installer, alors installez-le avec PIP comme suit:
10. Mise à jour
Suit:

11. qui le fait pour notre validation de formulaire. Flashing Messages d'erreur

    En regardant en arrière le diagramme d'origine, si une vérification de validation échoue, la page de contact doit se recharger avec un message d'erreur afin que l'utilisateur puisse corriger l'erreur et réessayer. Ce message d'erreur ne doit apparaître que lorsque la validation échoue et disparaît lorsque l'erreur a été corrigée.

    Notre prochaine étape consiste à envoyer ce type de message d'erreur temporaire à l'utilisateur lorsque la validation échoue. Flask rend cela très facile en utilisant sa fonction flash ()

    pip install -U Flask-WTF<br>

    au début du script.

    app / routes.py

    from flask_wtf import FlaskForm<br>from wtforms import StringField, TextAreaField, SubmitField<br><br><br><br>class ContactForm(FlaskForm):<br>  name = StringField("Name")<br>  email = StringField("Email")<br>  subject = StringField("Subject")<br>  message = TextAreaField("Message")<br>  submit = SubmitField("Send") <br>

    $ cd flaskapp<br>$ . bin/activate<br>

    Une fois que le formulaire de contact publie sur le serveur, toute panne de validation doit recharger le formulaire avec un message d'erreur utile. Sinon, les données d'entrée peuvent être utilisées pour un traitement futur. Encore une fois, cette logique peut être exprimée dans une logique if ... else à la demande if request.method == 'post': block.

    app / routes.py

    pip install -U Flask-WTF<br>

    si une vérification de validation échoue, faux . Le formulaire de message d'erreur publié , indiquant que le formulaire a été soumis avec succès.

    Ensuite, modifions contact.html afin qu'il puisse recevoir et afficher ces messages d'erreur temporaires. Voir le bloc suivant:

    from flask_wtf import FlaskForm<br>from wtforms import StringField, TextAreaField, SubmitField<br><br><br><br>class ContactForm(FlaskForm):<br>  name = StringField("Name")<br>  email = StringField("Email")<br>  subject = StringField("Subject")<br>  message = TextAreaField("Message")<br>  submit = SubmitField("Send") <br>

    La fonction de la boucle . Ajoutez ce bloc de code à contact.html after & lt; form & gt; tag.

    appre / templates / contact.html

    from flask import Flask, render_template<br>from forms import ContactForm<br>

    Enfin, ajoutons une règle CSS dans main.css jolie.

    main.css

    {% extends "layout.html" %}<br>{% block content %}<br><br>  <h2 id="Contact">Contact</h2><br>  <br>  

    
    {{ form.hidden_tag() }}
    {{ form.name.label }}
    {{ form.name }}
    {{ form.email.label }}
    {{ form.email }}
    {{ form.subject.label }}
    {{ form.subject }}
    {{ form.message.label }}
    {{ form.message }}
    {{ form.submit }}
    
    
    {% endblock %}
    

    Ouvrez votre navigateur et visitez http: // localhost: 5000 / contact. Laissez tous les champs vides et cliquez sur Envoyez pour tester si la validation du formulaire et le message d'erreur Flashing Work.

    

    C'est doux! Nous avons réussi à envoyer un message d'erreur à notre formulaire de contact si une vérification de validation échoue.

    Mais nous n'avons pas fini; Nous pouvons en fait faire un peu mieux. Au lieu d'avoir un message d'erreur générique pour toutes les vérifications de validation échouées, il serait préférable d'avoir un message d'erreur spécifique pour chaque vérification de validation échouée. Par exemple, si l'utilisateur oublie de remplir le champ du sujet, un message d'erreur spécifique qui indique, veuillez saisir votre nom . Nous pouvons y parvenir assez facilement, alors commençons par écrire nos messages d'erreur spécifiques à l'intérieur de chaque validateur dans forms.py .

    app / forms.py

    pip install email-validator<br>

    Nous écrivons simplement des messages d'erreur spécifiques à l'intérieur de chaque validateur. Ensuite, modifions contact.html pour recevoir et afficher ces messages d'erreur spécifiques. Plus tôt, nous nous sommes appuyés sur l'attribut d'erreurs de fonction pour chaque champ de formulaire pour extraire les messages d'erreur spécifiques et les boucler sur eux en utilisant la classe Jinja2 Message et message pour composer un nouvel e-mail et la variable Mail qui contient une instance utilisable de l'application app.config ["Mail_Username"] et Mail 17).

    Vous avez probablement vu des groupes utiliser des adresses e-mail de contact comme support@example.com . Si vous possédez votre propre domaine et que vous pouvez créer une nouvelle adresse e-mail de contact, allez-y et mettez cette adresse e-mail dans si demande.Method == 'Post': Bloquer à nouveau. Nous avons déjà ajouté une logique à l'intérieur du formulaire Form.Validate () sera le bloc autre . Par conséquent, allons-y et ajoutons la logique à l'intérieur de la classe Message prend une ligne d'objet, une adresse "de" et une adresse "à". Nous collectons ensuite les données sur le champ sujet du formulaire de contact avec app.config ["Mail_username"] , c'est donc ce que nous avons utilisé ici pour l'adresse de depuis. L'e-mail sera envoyé à votre adresse e-mail personnelle afin que vous puissiez recevoir et répondre à de nouveaux messages.

    Ensuite, nous écrivons l'e-mail lui-même (lignes 11-14). Nous incluons le nom, l'e-mail et le message de l'utilisateur. J'utilise l'opérateur de formatage de chaîne de Python Mail.send (msg) pour envoyer l'e-mail (ligne 15).

    Voyons si tout fonctionne. Visitez http: // localhost: 5000 / contact, remplissez chaque champ et cliquez sur "Envoyer". Si tout se passe bien, vous recevrez un nouvel e-mail de votre application FLASK.

    Ranger

    Notre avant-dernière étape consiste à supprimer la chaîne temporaire si ... else instruction.

    Lorsque le formulaire de contact aura été soumis avec succès, nous enverrons un indicateur de réussite de routes.py contact.html .

    Nous placerons le vrai , nous afficherons le message de remerciement. Sinon, nous afficherons le formulaire de contact.

    Commençons dans routes.py à l'intérieur du formulaire de retour 'publié.' avec contact () ressemble maintenant à ceci:

    app / routes.py

    $ cd flaskapp<br>$ . bin/activate<br>

    Suivant, Open Contact.HTML %} signifie que si l'indicateur de réussite que nous avons envoyé de routes.py est défini sur & lt; p & gt; merci pour votre message. Nous vous répondrons sous peu. & Lt; / p & gt; . Sinon, suivez l'instruction if ... else avec & lt; en-tête & gt; élément. Faisons également cela pour la page de contact (ligne huit).

    applications / modèles / disposition.html

    pip install -U Flask-WTF<br>

    Ouvrez le navigateur et rafraîchissez http: // localhost: 5000 / pour voir le lien de navigation nouvelle. Nous avons ajouté une page de contact contenant un formulaire à notre application Flask. Les formulaires apparaissent à plusieurs endroits des applications Web, notamment lors de l'inscription et de la connexion. Ce flux de travail peut être adapté pour répondre à ces besoins. Lors de la création d'une page de contact, nous avons appris à utiliser les extensions de flacon.
    Les extensions du flacon sont des outils simples et puissants qui étendent la fonctionnalité de votre application basée sur Flask.

    ---

    Consultez le registre d'extension FLASK pour explorer de nombreuses autres extensions que vous pouvez intégrer dans votre application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!