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.
