Cómo desarrollar un proyecto web completo que permite, vía web, añadir, eliminar y mostrar registros de una base de datos MySQL/MariaDB (válido para otras bases de datos con muy pocos cambios). Como estilo visual CSS usaremos la biblioteca Boostrap instalada en Django. Se mostrarán los registros en una tabla y cada registro tendrá los botones Modificar (modificar el registro actual), Eliminar (eliminar el registro actual) y Detalle (consultar todos los datos del registro). Incluimos la descarga del proyecto completo en este enlace.

Preparar el entorno Django Python, instalar Bootstrap para Django, crear proyecto y aplicación web Django

Antes de continuar, para los usuarios que no tengan un nivel medio de conocimientos de Django, conviene que revisen los siguientes artículos, donde explicamos, entre otras cosas, cómo instalar Django sobre Python, cómo crear un proyecto, cómo crear una aplicación, cómo crear un formulario web para insertar registros, cómo sincronizar el modelo Django con la base de datos MySQL, etc.:

En nuestro caso trabajaremos con un equipo con Windows 10, con Python versión 3.9.0, Django versión 4.0.1, Bootstrap versión 5 y MariaDB versión 5.5. Instalaremos Python y Django como indicamos en los artículos anteriores.

Si queremos usar Bootstrap 5 en nuestro proyecto web de forma más o menos automatizada, podremos instalar el paquete para Django correspondiente. Si bien no es necesario porque en realidad lo único que hace este paquete es agregar una línea de código en el HTML haciendo referencia a la ubicación web del Javascript y el CSS de Bootstrap en Internet. Aún así, si queremos instalarlo, ejecutaremos, desde la línea de comandos (símbolo de sistema), el siguiente comando:

pip install django-bootstrap5

Preparar el entorno Django Python, instalar Bootstrap para Django, crear proyecto y aplicación web Django

Reiteramos que lo anterior no es necesario, podremos usar en nuestros ficheros de plantillas html (templates) un enlace directo al CSS de Boostrap y a su fichero JavaScript, así como a sus componentes (pipe), como indicamos en pasos sucesivos de este artículo.

Si queremos usar un módulo para ayudar a generar formularios instalaremos «django-widget-tweaks». Aunque este módulo tampoco es necesario si establecemos el código HTML de los formularios de manera manual. Si queremos automatizar (en la medida de lo posible) la inserción de campos en formularios podremos instalar este componente con el comando:

pip install django-widget-tweaks

Crearemos el proyecto Django «proyectoa_agenda», para ello accederemos desde la línea de comandos a la carpeta donde queramos que se ubique la subcarpeta del proyecto (la creará el propio comando), en nuestro caso en la uniad D:

d:

Y en la carpeta ProyectoA_Python\Django:

cd ProyectoA_Python\Django

Y ejecutaremos el siguiente comando para crear un proyecto Django llamado «proyectoa_agenda«:

django-admin startproject proyectoa_agenda

Una vez creado el proyecto, accederemos a la carpeta del proyecto con:

cd proyectoa_agenda

Ahora crearemos una app (aplicación) dentro del proyecto, llamada «app_contactos«. Un proyecto puede contener varias aplicaciones. Para crear la aplicación ejecutaremos el comando:

python manage.py startapp app_contactos

Esta es la estructura de carpetas que se habrá creado:

Preparar el entorno Django Python, instalar Bootstrap para Django, crear proyecto y aplicación web Django

Registraremos la app app_contactos en el fichero settings.py de la carpeta del proyecto proyectoa_agenda, para ello agregaremos una línea en INSTALLED_APPS:

Preparar el entorno Django Python, instalar Bootstrap para Django, crear proyecto y aplicación web Django

Crear modelo de datos Contactos en aplicación web Django y persistencia en MySQL/MariaDB

A continuación crearemos el modelo de datos, el model. Una vez creado, desde Django, migraremos este modelo al motor de base de datos elegido para hacerlo persistente. Como mostraremos a continuación.

Para crear el modelo editaremos el fichero models.py ubicado en la carpeta de la aplicación app_agenda y agregaremos el siguiente código Python:

Para indicar a Django que use un servidor de MySQL/MariaDB específico (o cualquier otro motor de base de datos soportado por Django), editaremos el fichero settings.py de la carpeta del proyecto proyectoa_agenda y agregaremos las siguientes líneas en DATABASES:

Indicando que se usará por defecto el motor de base de datos MySQL/MariaDB, del equipo con IP 192.168.1.5, con el usuario y contraseña especificados de acceso a MySQL. Como es lógico, cambiaremos estos datos para acceder a nuestro equipo con MySQL correspondiente.

Se podrá usar cualquier motor de BD soportado por Django: Oracle, PostgreSQL, MySQL, SQLite, MariaDB, etc.. Únicamente habrá que modificar el ENGINE y las posibles OPTIONS. Y tener instalada la librería de acceso al motor de base de datos correspondiente para Python, como indicamos para MySQL/MariaDB en este artículo:

Para que funcione correctamente el enlace entre nuestra aplicación Django y MySQL/MariaDB, editaremos el fichero:

Ubicado en la carpeta del proyecto proyectoa_agenda, y agregaremos las siguientes líneas:

Crear modelo de datos Contactos en aplicación web Django y persistencia en MySQL/MariaDB

También debemos tener creado el esquema (base de datos o catálogo) donde se realizará la persistencia. Será en esta base de datos donde se cree la tabla de la aplicación «contactos». En nuestro caso la base de datos se llamará «agenda». La podremos crear usando un cliente de gestión de MySQL/MariaDB o bien desde la línea de comandos con el comando «mysql»:

Crear modelo de datos Contactos en aplicación web Django y persistencia en MySQL/MariaDB

Cuando tengamos bien definido el modelo de datos (model), creado anteriormente, ejecutaremos los siguientes comandos para sincronizar los cambios en la base de datos «agenda» de MySQL/MariaDB. Se crearán las tablas correspondientes a cada clase del model (models.py) con sus campos. Para ello ejecuaremos el siguiente comando, siempre desde la carpeta del proyecto proyectoa_agenda:

python manage.py makemigrations app_contactos

Devolviendo:

Migrations for ‘app_contactos’:
app_contactos\migrations\0001_initial.py
– Create model Contactos

Y este otro comando para hacer la migración definitiva:

python manage.py migrate app_contactos

Que devolverá algo así:

Operations to perform:
Apply all migrations: app_contactos
Running migrations:
Applying app_contactos.0001_initial… OK

Crear modelo de datos Contactos en aplicación web Django y persistencia en MySQL/MariaDB

Si el proceso de sincronización se ha ejecutado correctamente podremos consultar, en el servidor de base de datos, que se ha creado la tabla contactos con todos los campos indicados en models.py, en la base de datos «agenda»:

Crear modelo de datos Contactos en aplicación web Django y persistencia en MySQL/MariaDB

Esta es la consulta SQL de creación de tabla que ha ejecutado Django:

Crear las vistas views para la aplicación web Contactos de Django

Agregaremos el siguiente código al fichero views.py de la carpeta de la aplicación app_contactos:

Rutas de la aplicación web Agenda en Django

Crearemos las rutas para cada vista en el fichero urls.py del proyecto proyectoa_agenda, agregando el siguiente código:

Plantillas (templates) para la aplicación web Contactos en Django

Crearemos las plantillas html para cada vista de nuestra aplicación web Contactos. Para ello, crearemos la siguiente estructura de carpetas dentro de la carpeta de la aplicación web app_contactos:

Plantillas (templates) para la aplicación web Contactos en Django

Básicamente crearemos la carpeta templates dentro de la carpeta de la aplicación app_contactos y, dentro de la carpeta templates, crearemos la subcarpeta con el nombre de la aplicación app_contactos. Será en esta subcarpeta donde guardaremos los ficheros de las plantillas que crearemos a continuación: crear.html, detalles.html, index.html y actualizar.html:

Plantillas (templates) para la aplicación web Contactos en Django

Nos aseguraremos de que tenemos el siguiente parámetro de configuración en el fichero settings.py de la carpeta del proyecto proyectoa_agenda:

Plantillas (templates) para la aplicación web Contactos en Django

A continuación mostramos el contenido de cada plantilla. Lo ideal y para una mayor eficiencia, sería usar encabezados y pies automatizados, cogidos de otra plantilla por directivas. Esto lo veremos en próximos artículos.

El código fuente completo del proyecto está disponible para su decarga (gratuita) en el final del artículo.

  • index.html:
  • crear.html:
  • actualizar.html:
  • detalles.html:
  • logout.html:

Configuración adicional en settings.py para mostrar mensajes y para ruta de fotos de los contactos

Para mostrar mensajes al usuario de finalización existosa de las acciones de alta de contacto, modificación de contacto y eliminación de contacto:

Configuración adicional en settings.py para mostrar mensajes y para ruta de fotos de los contactos

En el fichero de views.py de la aplicación web «app_contactos» habremos añadido el import:

Y en el fichero de configuración settings.py del proyecto proyectoa_agenda, en INSTALLED_APPS, tendremos la línea:

Configuración adicional en settings.py para mostrar mensajes y para ruta de fotos de los contactos

Y tendremos también en este fichero settings.py la línea:

Por último, para establecer la ruta donde se guardarán las imágenes (fotos) asociadas a cada contacto de la agenda, en el fichero settings.py del proyecto agregaremos las líneas:

Para que funcione el componente de creación de formularios django-widget-tweaks tendremos la línea siguiente en INSTALLED_APPS del fichero settings.py:

Y si hemos optado por usar el paquete Bootstrap 5 para Django, también tendremos la línea siguiente INSTALLED_APPS del fichero settings.py:

Puesto que hemos hecho varias modificaciones en el fichero settings.py, a continuación mostramos su contenido completo:

Probando la aplicación web Contactos en Django

Tras establecer todos los ficheros de configuración y creación de la aplicación, podremos realizar las pruebas oportunas de su correcto funcionamiento. Para ello iniciaremos el servidor web de Django, ejecutando, desde la carpeta del proyecto proyectoa_agenda, el siguiente comando:

python manage.py runserver

Si hay algún error de sintaxis o similar nos lo mostrará en la línea de comandos. En caso de que todo sea correcto, nos mostrará el mensaje:

Watching for file changes with StatReloader
Performing system checks…
System check identified no issues (0 silenced).
January 17, 2022 – 21:58:47
Django version 4.0.1, using settings ‘proyectoa_agenda.settings’
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

Probando la aplicación web Contactos en Django

El servidor Django quedará iniciado a la escucha de peticiones por el puerto 8000 (el defecto si no se le indica otro).

Ahora, desde un navegador web, accedermos a la URL:

http://localhost:8000/app_contactos

Nos mostrará la web Contactos, con su menú, la tabla de contactos y el botón «Añadir contacto»:

Probando la aplicación web Contactos en Django

La aplicación web es adaptativa y responsiva, si la ejecutáramos desde un dispositivo móvil, se adaptaría y mostraría el menú contraído:

Probando la aplicación web Contactos en Django

Si pulsamos en el menú «Contactos» y en «Nuevo» (o bien directamente en el botón «Añadir contacto», nos abrirá el formulario para alta de un nuevo contacto. Rellaremos los datos, incluida la foto (pulsando en «Examinar» y eligiendo una foto del disco duro), y pulsaremos en «Guardar contacto»:

Probando la aplicación web Contactos en Django

El contacto quedará guardado, nos lo indicará con el mensaje «Contacto añadido correctamente» y nos llevará a la página inicial, donde listará el contacto creado:

Probando la aplicación web Contactos en Django

Podremos añadir todos los contactos que queramos y también podremos editar (modificar) un contacto pulsando en el botón «Editar» que tiene a su derecha y realizando la modificación correspondiente en el formulario de edición, pulsando en «Guardar»:

Probando la aplicación web Contactos en Django

Podremos consultar todos los datos de un cotacto pulsando en «Ver». Nos mostrará la ventana de detalle del contacto, con todos sus datos, incluida la foto, sólo para consulta:

Probando la aplicación web Contactos en Django

También podremos eliminar un contacto, pulsando en el botón «Eliminar» que tendrá a su derecha. Nos pedirá confirmación para eliminarlo (por seguridad):

Probando la aplicación web Contactos en Django

Si pulsamos «Aceptar» en el mensaje de confirmación, la aplicación eliminará el contacto de la base de datos y volverá al listado (a la página inicial), actualizada sin ese contacto.

En el listado de contactos nos mostrará también la foto asignada a cada contacto (en miniatura):

Probando la aplicación web Contactos en Django

Si pulsamos en el menú «ProyectoA» – «Cerrar sesión»:

Probando la aplicación web Contactos en Django

Nos llevará a la página «logut.html»:

Probando la aplicación web Contactos en Django

Descarga del proyecto completo Agenda y Contactos en Django y Python

A continuación dejamos el enlace a la descarga del proyecto completo desarrollado con Django y Python: