Diferència entre revisions de la pàgina «Email check amb Flask»

De Cacauet Wiki
Salta a la navegació Salta a la cerca
 
(Hi ha 13 revisions intermèdies del mateix usuari que no es mostren)
Línia 3: Línia 3:
  
 
== Intro ==
 
== Intro ==
 +
Realitzarem una simple aplicació que agafi les dades d'un formulari per POST i ens validi si el email enviat és correcte o no.
 +
 +
Per decidir si el email és correcte farem una simple comprovació: primer ha d'aparèixer una @ i més tard, com a mínim un punt "." (corresponent al domini del correu). Si no té aquests dos elements el donarem per erroni i ho notificarem a l'usuari.
 +
 +
Per poder fer aquesta pràctica heu d'haver llegir i provar el primer exercici de [[Desenvolupament d'aplicacions web amb frameworks]] a cacauet.org
 +
 
Referències:
 
Referències:
 
* flask.pocoo.org
 
* flask.pocoo.org
Línia 10: Línia 16:
 
* [[Desenvolupament d'aplicacions web amb frameworks]] a cacauet.org
 
* [[Desenvolupament d'aplicacions web amb frameworks]] a cacauet.org
  
 +
Recorda els diversos passos per començar el projecte:
 +
* Has de tenir un [[Virtualenv]] per instal·lar els paquets de Python necessaris (Flask). Recorda a activar-lo amb <pre>$ source ~/env/bin/activate</pre>
 +
* Activa el mode de DEBUG amb:<pre>$ export FLASK_DEBUG=1</pre>
 +
* Arrenca el servidor amb<pre>$ python main.py</pre>
 +
* Apunta el ''browser'' a<pre>http://localhost:5000</pre>
  
 
== Codi ==
 
== Codi ==
−
Aquest és el codi per a l'arxiu .py:
+
El projecte tindrà 2 arxius:
 +
* main.py : té el codi que processa les dades.
 +
* checkmail.html : plantilla HTML+Jinja2. S'encarrega de la part gràfica, hem d'intentar calcular la menor quantitat de coses possibles.
 +
 
 +
 
 +
=== Arxiu .py ===
 +
Aquest és el codi per a l'arxiu .py
 +
 
 +
Fixa't en què:
 +
* Capturem les dades enviades per '''POST''' a través de la variable global '''<code>request.form</code>''' , que és un diccionari. Concretament accedim amb: <pre>email = request.form["email"]</pre>
 +
*: Recorda que cal importar request al inici del codi.
 +
* Si es tractés de dades enviades per '''GET''' hauríem de fer servir l'atribut '''args''', d'aquesta manera:<pre>email = request.args["email"]</pre>
  
 
<syntaxhighlight lang="python">
 
<syntaxhighlight lang="python">
Línia 19: Línia 41:
 
app = Flask(__name__)
 
app = Flask(__name__)
  
 +
# el decorator (@) estableix la ruta (URL). A mes, activem el mètode POST
 
@app.route("/checkemail", methods=["GET","POST"])
 
@app.route("/checkemail", methods=["GET","POST"])
 
def checkemail():
 
def checkemail():
−
missatge = "No has enviat cap email encara per comprovar."
+
    # inicialitzem missatge
−
if request.method == "POST":
+
    miss = "No has enviat cap email encara per comprovar."
−
email = request.form["email"]
+
    if request.method == "POST":
−
# quan posem accents cal avisar que és un string unicode amb la "u" a davant
+
        # si entrem aquí és que ja hem enviat alguna dada del formulari (POST)
−
missatge = "L'email <b>" + email + u"</b> és incorrecte ja que no té una @"
+
        email = request.form["email"]
−
# busquem que el email contingui al menys una @ i un .
+
        # quan posem accents cal avisar que és un string unicode amb la "u" a davant
−
trobat = 0
+
        miss = "L'email <b>" + email + u"</b> és incorrecte ja que no té una @"
−
for lletra in email:
+
        # busquem que el email contingui al menys una @ i un .
−
if trobat==0 and lletra=='@':
+
        trobat = 0
−
trobat = 1
+
        for lletra in email:
−
missatge = "L'email <b>" + email + u"</b> té una @ pero li falta un . del domini posterior"
+
            if trobat==0 and lletra=='@':
−
elif trobat==1 and lletra=='.':
+
                trobat = 1
−
trobat = 2
+
                miss = "L'email <b>" + email + u"</b> té una @ pero li falta un . del domini posterior"
−
missatge = "L'email <b>" + email + u"</b> és correcte! (te una @ i un . de domini)"
+
            elif trobat==1 and lletra=='.':
−
return render_template( "checkemail.html", missatge=missatge )
+
                trobat = 2
 +
                miss = "L'email <b>" + email + u"</b> és correcte! (te una @ i un . de domini)"
 +
    # renderitzem el template amb el missatge pertinent
 +
    # "missatge" serà el nom de la variable dins del template
 +
    return render_template( "checkemail.html", missatge=miss )
  
 
if __name__ == "__main__":
 
if __name__ == "__main__":
Línia 41: Línia 68:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 +
=== Template checkmail.html ===
 +
I aquí tenim el template. Recordem que Flask utilitza Jinja2 per defecte.
  
−
=== Template ===
+
Fixa't en què:
−
I aquí tenim el template:
+
* Per printar el missatge, enlloc de simplement <code><nowiki>{{missatge}}</nowiki></code> fem<pre>{{missatge|safe}}</pre>
 +
*: això ho fem perquè si no, el propi Jinja ens filtra els tags HTML <nowiki><b> i </b></nowiki> i no ens sortiria la negreta que volem.
 +
*: Aquest recurs es diu FILTRE, i hi ha diversos amb diferents utilitats.
 +
* Prova de treure'l i observa què passa si deixes <code><nowiki>{{missatge}}</nowiki></code> a seques.
  
 
<syntaxhighlight lang="html4strict">
 
<syntaxhighlight lang="html4strict">
Línia 49: Línia 81:
  
 
<body>
 
<body>
−
<h2>Validació de email</h2>
+
    <h2>Validació de email</h2>
−
 
 
−
<div class="missatge">
 
−
{{missatge|safe}}
 
−
</div>
 
−
<br>
 
  
−
<form method="post">
+
    <div class="missatge">
−
Introdueix adreça d'email a comprovar: <input type="text" name="email" /><br>
+
        {{missatge|safe}}
−
<input type="submit">
+
    </div>
−
</form>
+
    <br>
  
 +
    <form method="post">
 +
        Introdueix adreça d'email a comprovar: <input type="text" name="email" /><br>
 +
        <input type="submit">
 +
    </form>
 
</body>
 
</body>
 
</html>
 
</html>
 
</syntaxhighlight>
 
</syntaxhighlight>

Revisió de 18:44, 7 nov 2016

Aquest és un exemple de com treballar amb el microfamework web Flask per Python.


Intro[modifica]

Realitzarem una simple aplicació que agafi les dades d'un formulari per POST i ens validi si el email enviat és correcte o no.

Per decidir si el email és correcte farem una simple comprovació: primer ha d'aparèixer una @ i més tard, com a mínim un punt "." (corresponent al domini del correu). Si no té aquests dos elements el donarem per erroni i ho notificarem a l'usuari.

Per poder fer aquesta pràctica heu d'haver llegir i provar el primer exercici de Desenvolupament d'aplicacions web amb frameworks a cacauet.org

Referències:

Recorda els diversos passos per començar el projecte:

  • Has de tenir un Virtualenv per instal·lar els paquets de Python necessaris (Flask). Recorda a activar-lo amb 
    $ source ~/env/bin/activate
  • Activa el mode de DEBUG amb:
    $ export FLASK_DEBUG=1
  • Arrenca el servidor amb
    $ python main.py
  • Apunta el browser a
    http://localhost:5000

Codi[modifica]

El projecte tindrà 2 arxius:

  • main.py : té el codi que processa les dades.
  • checkmail.html : plantilla HTML+Jinja2. S'encarrega de la part gràfica, hem d'intentar calcular la menor quantitat de coses possibles.


Arxiu .py[modifica]

Aquest és el codi per a l'arxiu .py

Fixa't en què:

  • Capturem les dades enviades per POST a través de la variable global request.form , que és un diccionari. Concretament accedim amb: 
    email = request.form["email"]
    Recorda que cal importar request al inici del codi.
  • Si es tractés de dades enviades per GET hauríem de fer servir l'atribut args, d'aquesta manera:
    email = request.args["email"]
# -*- coding: utf-8 -*-
from flask import Flask, render_template, request
app = Flask(__name__)

# el decorator (@) estableix la ruta (URL). A mes, activem el mètode POST
@app.route("/checkemail", methods=["GET","POST"])
def checkemail():
    # inicialitzem missatge
    miss = "No has enviat cap email encara per comprovar."
    if request.method == "POST":
        # si entrem aquí és que ja hem enviat alguna dada del formulari (POST)
        email = request.form["email"]
        # quan posem accents cal avisar que és un string unicode amb la "u" a davant
        miss = "L'email <b>" + email + u"</b> és incorrecte ja que no té una @"
        # busquem que el email contingui al menys una @ i un .
        trobat = 0
        for lletra in email:
            if trobat==0 and lletra=='@':
                trobat = 1
                miss = "L'email <b>" + email + u"</b> té una @ pero li falta un . del domini posterior"
            elif trobat==1 and lletra=='.':
                trobat = 2
                miss = "L'email <b>" + email + u"</b> és correcte! (te una @ i un . de domini)"
    # renderitzem el template amb el missatge pertinent
    # "missatge" serà el nom de la variable dins del template
    return render_template( "checkemail.html", missatge=miss )

if __name__ == "__main__":
    app.run()

Template checkmail.html[modifica]

I aquí tenim el template. Recordem que Flask utilitza Jinja2 per defecte.

Fixa't en què:

  • Per printar el missatge, enlloc de simplement {{missatge}} fem
    {{missatge|safe}}
    això ho fem perquè si no, el propi Jinja ens filtra els tags HTML <b> i </b> i no ens sortiria la negreta que volem.
    Aquest recurs es diu FILTRE, i hi ha diversos amb diferents utilitats.
  • Prova de treure'l i observa què passa si deixes {{missatge}} a seques.
<html>

<body>
    <h2>Validació de email</h2>

    <div class="missatge">
        {{missatge|safe}}
    </div>
    <br>

    <form method="post">
        Introdueix adreça d'email a comprovar: <input type="text" name="email" /><br>
        <input type="submit">
    </form>
</body>
</html>
Obtingut de «https://cacauet.org/wiki/index.php?title=Email_check_amb_Flask&oldid=3563»