Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Como Crear Un CRUD con Django 5 – Parte 5 (Final)

Como Crear Un CRUD con Django 5 – Parte 5 (Final)

Como Crear Un CRUD con Django 5 – Parte 5 (Final)

Demo Github

Y llegamos a la última parte de este tutorial, que consta en general de 5 partes.

En la penúltima o cuarta parte hicimos uso de las vistas genéricas nativas del framework Django para poder hacer que nuestros datos interactúen con las vistas HTML.

En esta última vamos a realizar ciertas tareas que forman parte del tutorial llamado Como Crear Un CRUD con Django, vamos con ello.

Partes

Mediante Bootstrap 5 podemos hacer que la interfaz del sistema CRUD se adapte a los dispositivos móviles

En la cuarta parte de este tutorial creamos 4 archivos HTML dentro de nuestra carpeta templates

Estos archivos son actualizar.html, crear.html, detalles.html e index.html y ahora los vamos a usar para las vistas del usuario final.

Vistas HTML (Bootstrap 5)

Antes de poder crear las vistas HTML debemos de instanciar la librería o core de Bootstrap 5 junto a su archivo de estilos CSS, todo esto debemos hacerlo en cada archivo HTML de nuestro Sistema CRUD, lo colocamos entre las etiquetas <head></head>:


Luego de instanciar Bootstrap 5 correctamente, ya podemos crear las vistas HTML para las operaciones CRUD.

Página Principal (Listado de Todos los Registros )

Acá listamos todos los jugos en una tabla HTML de Bootstrap 5, abro el archivo index.html y agrego lo siguiente:


En el código anterior, puedes fijarte que antes de la tabla, he colocado un botón Crear, con el creamos un nuevo registro en la base de datos:


Con ello tenemos nuestra vista principal (index.html) con el listado respectivo de los jugos o registros.

Recuerda que cada ves agreguemos un nuevo registro a la base de datos, este aparecerá en la tabla HTML y automáticamente el sistema le asigna una tira de botones que son Ver, Editar y Eliminar:

Todos los elementos de esta vista de usuario están diseñados con Bootstrap 5

Ya tenemos la vista principal o main del sistema CRUD, ahora pasemos a crear las vistas especificas para las tarea CRUD.

Crear (Create)

Mediante esta vista podemos crear un nuevo registro o jugo.

Abro el archivo crear.html el cual lo creamos en la tercera parte de este tutorial, este archivo se encuentra dentro de la carpeta templates y en el agrego el siguiente formulario:


En el código anterior del archivo crear.html estamos usando la librería widget_tweaks que instale en la Parte 4 de este tutorial,

Esta librería nos permite gestionar nuestros formularios creados mediante Vistas Genéricas de Django.

Con ello tenemos nuestra vista crear.html con el formulario para ingresar un nuevo jugo o registro:

Al presionar el botón Aceptar, los datos de este formulario, se insertan en la tabla jugos

Pasemos a crear la vista para leer los detalles de un registro.

Leer (Read)

Esta vista la usaremos para mostrar los detalles de un registro de manera independiente, cada ves que el usuario presione el botón Ver que se encuentra en la columna Acciones al lado de un determinado registro en la tabla HTML del archivo index.html

Agrego el siguiente código HTML al archivo detalles.html que se encuentra en la carpeta templates, con este código imprimimos los objetos o datos con la información de un registro específico:


El sistema envía el id del registro al archivo o template llamado detalles.html para mostrar los detalles de dicho registro, el envío de este id lo hace por la ruta jugos/detalle/<int:pk>:


La ruta anterior la definimos en la cuarta parte de este tutorial, específicamente dentro del archivo urls.py

Entonces con ello tenemos nuestra vista Leer con los datos de un registro determinado:

Podemos ver los valores de un registro a detalle

Pasemos a crear la vista para actualizar un registro.

Actualizar (Update)

Para esta vista colocaré un formulario HTML para poder editar un registro determinado.

Mostramos los valores específicos de un registro o jugo en cada campo del formulario, para que puedan ser editados.

Abrimos el archivo actualizar.html que se encuentra en la carpeta templates y agrego el siguiente código HTML:

El usuario puede editar uno o más campos de un registro

Ahora veamos la vista HTML Eliminar, pero más que una vista es una función o tarea del sistema CRUD, veámosla mejor a continuación.

Eliminar (Delete)

Para esta vista vamos a usar el archivo index.html que se encuentra dentro de la carpeta templates, en este archivo estamos listando todos los registros o jugos de la base de datos en la vista principal.

Puedes ver en la columna Acciones, he colocado un botón que dice Eliminar. Este botón nos va a servir para eliminar un registro de la tabla jugos:


Lo que haremos es eliminar los registros desde la misma página, no sería muy estético eliminar el registro en una nueva página HTML, salvo que tu proyecto lo requiera.

Por seguridad antes de eliminar un registro, vamos a consultar al usuario si desea eliminar un registro, dentro de nuestro botón para enviar el formulario llamamos a la función Javascript eliminar():  


Si el usuario hace clic en el botón Eliminar, le mostramos una alerta con el mensaje: Eliminar Producto ?

Mi función eliminar(); la he creado con Javascript y la colocamos al final antes de cerrar la etiqueta </body> de nuestro archivo HTML llamado index.html:


Cuando el usuario haga clic en el botón Eliminar de alguno de los registros de la tabla HTML, le lanzamos la alerta para que confirme la eliminación del registro:

La alerta tiene 2 opciones por defecto: Aceptar y Cancelar

Mediante la alerta, impedimos que el usuario borre por error alguno de los registros.

Mensajes

Dentro del archivo index.html van a mostrarse todos los mensajes de las operaciones Crear, Eliminar y Actualizar.

Es decir después de Insertar, Eliminar o Actualizar un registro o jugo de la base de datos, mostramos un mensaje para confirmar que dicha operación ha sido realizada Correctamente.

Abrimos el archivo index.html que se encuentra en la carpeta templates y agregamos el siguiente código:


Entonces cuando el usuario realice alguna tarea en el sistema CRUD, como editar un registro o jugo, se le va mostrar un mensaje diciendo que la operación ha sido realizada correctamente.

Este mensaje también le va aparecer cuando Crea o Elimina un registro:

El mensaje le da tranquilidad al usuario y le confirma que la operación se realizó correctamente

Necesitamos una carpeta para subir las imágenes de cada registro, veamos esto a continuación.

Carpeta Para Subir las Imágenes

Debemos crear una carpeta para las imágenes de cada registro que el usuario crea, yo le pondré de nombre uploads a esta carpeta y la creamos dentro de la carpeta crud-django5 > cruddjango5 > jugos > static > uploads:


Ahora vamos a realizar algunas configuraciones adicionales.

Configuraciones Adicionales

Recuerda revisar el archivo settings.py alojado en el repositorio GitHub de este proyecto en donde esta toda la configuración que he realizado en todo este tutorial de 5 partes.

Debo destacar las siguientes configuraciones (He colocado comentarios para explicar que hace cada parte del código):


¡ Hemos terminado nuestro sistema CRUD !

Recuerda que ee colocado una Demo al inicio de cada parte del tutorial, para que veas el sistema CRUD en acción, asimismo he colocado el código fuente en GitHub en la última parte del tutorial.

Nota (s)

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil