viernes, 27 de mayo de 2022

Sumar números de un formulario web con Python y Flask

Puede consultar el código de este proyecto en GitHub: flasksum.

Vamos a crear un formulario web sencillo, usando HTML, con un par de cajas de texto donde el usuario introduzca los valores numéricos y un botón. Al pulsar sobre el botón, se lanza un procedimiento programado en Python, que permitirá sumar los dos números y mostrar el resultado en esa misma página web.

Utilizaremos un servidor Flask, programando en Python y usaremos Jinja2 para hacer la operación matemática con las variables.


Antes de introducir valores.

Sumando dos números.

Estructura de directorios y archivos


Archivo app.py

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        vals = request.form.getlist('misvalores')
        val1 = float(vals[0])
        val2 = float(vals[1])
        result = val1 + val2
    else:
        val1 = ''
        val2 = ''
        result = ''
    return render_template('index.html', val1=val1, val2=val2, result=result)

if __name__ == "__main__":
    app.run(debug=True, port=5000)

Archivo index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página Flask</title>
    <link href="../static/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <h1>Operaciones matemáticas con Flask</h1>
    <h2>Suma de dos números</h2>
    <p>Introduzca dos números y pulse el botón para obtener la suma.</p>
    <form action="/" method="POST">
        <p>Input 1: <input name="misvalores" value="{{ val1 }}"></p>
        <p>Input 2: <input name="misvalores" value="{{ val2 }}"></p>
        <input type="submit" value="Sumar">
    </form>
    <br>
    <p>Resultado: {{ result }}</p>
</body>
</html>

Archivo style.css

body {
    background-color: rgb(225, 255, 240);
  }

h1   {color: blue;}

Dentro de la carpeta static dejamos praparadas para una posible ampliación las carpetas imgs y js.

No hay comentarios:

Publicar un comentario