Proyecto Web Python

En este proyecto se van a realizar las siguientes tareas.

• Entorno virtual.
• Creación de la Base de Datos en MySQL.
• Acceso a la DDBB.
• Diseño de la página web usando Bootstrap.
• En este tutorial no haré el trabajo de edición y eliminación de registros.
• Paginación.

Paso 1: Creación del espacio de trabajo.

Lo primero que debemos hacer es crear un espacio para desarrollar nuestro proyecto.

En mi caso, en la carpeta de Mis Documentos creé una carpeta Proyecto_Web_Python y la siguiente estructura de carpetas para alojar el proyecto y el script para la base de datos.

|-- Proyecto_Web_Python
      |-- Script
      |-- proyecto

Tu puedes nombrar las carpetas como mejor te guste.

Paso 2: Creación de la base de datos

Para fines del presente ejemplo, crearemos una base de datos con una sola tabla.

Utilizaré MySQL.

CREATE SCHEMA IF NOT EXISTS DB_PRUEBA;

USE DB_PRUEBA;

CREATE TABLE USERS
	(
	ID_USER INTEGER PRIMARY KEY AUTO_INCREMENT,
	EMAIL VARCHAR(50) NOT NULL UNIQUE,
	DNI VARCHAR(10),
	NAME VARCHAR(20),
	LASTNAME VARCHAR(20)
	);

Procedemos a llenar la DDBB.

Pueden buscar la los archivos en mi repositorio de GitHub.

Hay información de 100 registros creados de forma aleatoria.

INSERT INTO USERS (EMAIL, DNI, NAME, LASTNAME) VALUES
	('Audrey.Conley@empresa.com','AC-57939','Audrey','Conley'),
	('Sara.Wyatt@empresa.com','SW-68605','Sara','Wyatt'),
	('Tasha.Cross@empresa.com','TC-49609','Tasha','Cross'),
	('Martina.Howard@empresa.com','MH-94200','Martina','Howard'),
	('Latifah.Glover@empresa.com','LG-82330','Latifah','Glover'),
	('Quemby.Schroeder@empresa.com','QS-53622','Quemby','Schroeder'),
	('Renee.Franco@empresa.com','RF-21457','Renee','Franco'

Ahora, podemos ejecutar código MySQL.

USE DB_PRUEBA;

SELECT * FROM USERS;

SELECT * FROM USERS LIMIT 0,10;

Paso 3: Creación del entorno virtual

Nos ubicamos en la carpeta proyecto y, desde la terminal -ubicados en la indicada carpeta- ejecutamos los comandos necesarios para la creación del entorno virtual.

La pagina de la documentación oficial de Python enseña como es la creación de entornos virtuales.

python3 -m venv venv

En mi caso, el nombre que le di a la carpeta virtual es venv. Tú puedes darle cualquier otro nombre.

Esperamos unos momentos y, una vez creado el entorno virtua., procedemos a activar dicho entorno:

En Windows:

venv\\Scripts\\activate.bat

En Unix o Mac OS:

source venv/bin/activate

Instalación de Flask

pip install flask

¿Lo lograste? ¡Perfecto!

Sigamos adelante.

Paso 4: Creación de la aplicación

Nos ubicamos en la carpeta proyecto y abrimos el editor de código que más les guste. Yo usaré VSCode.

Luego creamos los archivos app.py, index.html y layout.html.

Debemos tener una estructura más o de la siguiente forma:

|-- proyecto
      |-- venv
      |-- templates
            |-- index.html
            |-- layout.html
      |-- app.py

• El archivo app.py contendrá el acceso a DDBB y la lógica del proyecto.
• El archivo index.html contendrá una tabla para mostrar la información de la DDB.
• El archivo layout.html tendrá el diseño de la página web, como el navbar y el footer.

Paso 5: Comenzamos con la app

La página oficial de Flask nos ofrece la manera de crear una aplicación simple.

Agregamos el siguiente código:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello, World!'

if __name__ == '__main__':
  app.run(debug=True)

Ejecutamos la aplicación con el siguiente comando.

python3 app.py

Al ingresar al localhost en el puerto 5000, podremos observar la bienvenida de Flask.

Solo veremos Hello, World!.

Paso 6: Acceso a la Base de datos

MySQL ofrece una manera de conectarse a nuestra base de datos.

Para poder acceder a ella debemos importar las siguiente librería:

import mysql.connector

Y luego configurar los parámetros necesarios:

config = {
  'user': 'root',
  'password': '****',
  'database': 'db_prueba',
}

Volvemos a revisar el localhost y si no da ningún error, entonces podemos estar seguros que lo hicimos bien.

Python nos ofrece las herramientas necesarias para acceder a los datos de la DDBB.

Copia el siguiente código.

@app.route("/")
def index():
  conn = mysql.connector.connect(**config)
  cursor = conn.cursor()
  cursor.execute("SELECT * FROM users LIMIT 0,10")
  users = cursor.fetchall()
  conn.commit()
  return render_template('index.html', users=users)

¿Qué nos dice el código?

1.- Nos conectamos a la DDBB.

2.- Ejecutamos una sentencia SQL para listar todos los registros de la tabla.

3.- Pintamos todos los resultados y los guardamos en una variable users.

4.- Retornamos estos valores en el index.htm.

Si observas bien, con el SELECT solo se reciben los 10 primero registros.

Por otro lado, no olvides agregar la siguiente línea en el archivo app.py:

from flask import Flask, render_template, request, url_for

Pero… ¿Dónde está la información?, ¿Cómo la podemos ver en la página web?

Paso 7: Diseño de la tabla

Nos centraremos en mostrar los datos de ID, Nombre, Apellido, e-mail.

| ID | Nombre | Apellido | e-mail |
-----------------------------------
|    |        |          |        |
-----------------------------------
|    |        |          |        |

El archivo index.html debe quedar con el siguiente código. Dentro de un container agregamos un card y dentro la table.

<div class="container">

  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Listado de usuarios</h5>
      <p class="card-text">

        <!-- TABLE -->
      <table class="table table-light table-hover">
        <thead class="thead-light">
          <tr>
            <th>ID</th>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>e-mail</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>  </td>
            <td>  </td>
            <td>  </td>
            <td>  </td>
          </tr>
        </tbody>
      </table>

Como podrás observar es una tabla vacía. Lo que debemos hacer es llenar la tabla con la información que proviene de nuestra DDBB.

Con la sentencia SELECT * FROM users LIMIT 0,10 tenemos los primeros 10 registros, entonces, para mostrarlos, lo que podemos hacer es recorrer con un ciclo for al rededor del <tr>

Además, extraemos los valores de cada uno de los users.

				<tbody>
          {% for user in users %}
          <tr>
            <td>{{ user[0] }}</td>
            <td>{{ user[3] }}</td>
            <td>{{ user[4] }}</td>
            <td>{{ user[1] }}</td>
          </tr>
          {% endfor %}
        </tbody>

¡Vamos muy bien!

Pero quiero que notes algo: solo se está mostrando la información de los primeros 10 registros. Lo ideal sería tener una manera de ir filtrando la data por páginas.

7.3.- Archivo Layout

Antes de continuar, debemos configurar el archivo layout.html para darle diseño a nuestra página web.

En el body agregamos el ***navbar*** que mejor nos guste. Además, agregamos el siguiente código:

{% block body %}
{% endblock %}

En el index.html agregamos un extends y el block body.

{% extends 'layout.html' %}

{% block body %}

	<div class="container">

	</div>

{% endblock %}

El extends permitirá que el diseño de Bootstrap se agregue a toda las páginas que elaboremos. El block body contendrá las secciones que queremos «envolver» de nuestro diseño.

Paso 8: Paginación

Para el presente proyecto, se ha propuesto una alternativa simple para visualizar los datos por páginas. En ese sentido, al archivo index.html agregamos el siguiente código para iniciar la paginación.

Usé un modelo que puedes encontrar en la web oficial de Bootstrap.

			<nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">

          <li class="page-item">
            <a class="page-link" href=" "> 1 </a>
          </li>

        </ul>
      </nav>

Este código solo nos muestra un link con el número 1, es decir, página 1.

Pero no queremos eso.

Lo que nos interesa es crear una numeración de paginas para que nos muestre los datos de la DDBB en grupos de diez. Es decir del 1-10, del 11-20, etc.

Eso nos da una idea: Usar un ciclo for para generar las páginas del 1 al 10.

				{% for pag in range(1,11) %}
          <li class="page-item">
            <a class="page-link" href="/page/{{pag}}">{{ pag }}</a>
          </li>
        {% endfor %}

De esta manera creamos 10 botones que corresponderán a cada página.

Como se puede observar, estamos accediendo a un page que aún no hemos creado. Si hacemos 127.0.0.1:5000/page, no obtendremos nada.

Capturamos los pag que van desde 1 hasta 10 (que serán los botones). Observa que tendremos botones que nos llevarán a los enlaces de cada página.

/page/1
/page/2
...
/page/10

Sin embargo, nos falta crear el método de paginación, es decir el /page/.

En el archivo app.py agregamos el siguiente código:

@app.route("/page/<number_page>")
def page(number_page):
  conn = mysql.c
onnector.connect(**config)
  cursor = conn.cursor()

  if number_page == '1':
    cursor.execute("SELECT * FROM users LIMIT 0,10")
  if number_page == '2':
    cursor.execute("SELECT * FROM users LIMIT 10,10")
  if number_page == '3':
    cursor.execute("SELECT * FROM users LIMIT 20,10")
  if number_page == '4':
    cursor.execute("SELECT * FROM users LIMIT 30,10")
  if number_page == '5':
    cursor.execute("SELECT * FROM users LIMIT 40,10")
  if number_page == '6':
    cursor.execute("SELECT * FROM users LIMIT 50,10")
  if number_page == '7':
    cursor.execute("SELECT * FROM users LIMIT 60,10")
  if number_page == '8':
    cursor.execute("SELECT * FROM users LIMIT 70,10")
  if number_page == '9':
    cursor.execute("SELECT * FROM users LIMIT 80,10")
  if number_page == '10':
    cursor.execute("SELECT * FROM users LIMIT 90,10")

  users = cursor.fetchall()
  list_users = len(users)
  conn.commit()
  return render_template('index.html', users=users)

¿Qué nos dice el código?

1.- Nos conectamos a la DDBB.

2.- Ejecutamos la sentencia SQL según la numeración de la página que corresponda.

3.- Pintamos los resultados y los guardamos en una variable users.

4.- Retornamos estos valores en el index.htm.

Ahora si, los botones deben llevarnos a cada página según la numeración que corresponda.

Comentarios finales

Este proyecto fue elaborado con fines didácticos para ayudar a las personas que también están interesadas en el desarrollo.

Este proyecto está alojado en mi repositorio de GitHub.