Como Crear Un CRUD con Django 4 (Python 3.11) y Bootstrap 5 – Parte 4
6 minuto(s)Demo
En la parte anterior, es decir la parte 3, configuramos las vistas genéricas de Django para: una vista principal que liste todos los registros o jugos en una tabla HTML que cuenta con clases Bootstrap 5, asimismo creamos la vista para el formulario crear, una vista para leer un registro independiente y una vista para el formulario actualizar. La tarea eliminar la haremos en la misma vista principal con JavaScript. En esta Parte 4 continuamos con el tutorial Como Crear Un CRUD con Django 4 (Python 3.11) y Bootstrap 5, vamos con ello.
Partes
Antes de continuar te invito a leer los siguientes artículos:
-
- Que es Django, Historia y tu primer Hola Mundo (Corregido: 31-05-2019)
- Conceptos Iniciales para desplegar Django
- Como usar Django y React JS (Método Manual, no Librería)
- Como crear un CRUD con Django 2 y Bootstrap 4 – Parte 1 (Python 3.7)
- 5 Servicios de Hosting VPS ideales para publicar un Proyecto Creado con Django
- Como Integrar Firebase en Django 3.0.7 – Parte 1
- Como Crear un Enlace de Descarga en Django
- 7 Proyectos que han sido Creados con Django Framework
- Como Crear una API REST con Django 3.1.1 + Consumir Datos en una Aplicación Android – Parte 1
- Puedes leer más en la categoría Django
Asimismo, te invito a escuchar el Podcast: “Dominio del trabajo con Varios Lenguajes de Programación” y “¿ Qué Es NoCode Development ?” (Anchor Podcast):
| Spotify: | Sound Cloud: | Apple Podcasts | Anchor Podcasts |
 |
 |
 |
 |
Bien ahora continuemos con el Post: Como Crear Un CRUD con Django 4 (Python 3.11) y Bootstrap 5 – Parte 4.
Rutas
Para el sistema CRUD voy a crear 5 rutas indispesables para que funcione sin problemas. Abro el archivo urls.py que se encuentra en cruddjango4 > cruddjango4 > urls.py
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/cruddjango4 ├── /cruddjango4 ├── __init__.py ├── asgi.py ├── settings.py ├── urls.py // Abro este archivo ├── wsgi.py ├── /jugos ├── db.sqlite3 ├── manage.py ├── /miev |
En el archivo urls.py agrego las siguientes rutas dentro de urlpatterns = [], mediante estas rutas llamamos a una determinada vista HTML, estas vistas HTML las crearé más adelante.
La ruta admin/ la creo el Framework Django automáticamente cuando se creo el proyecto, asi que no hay que tocarla.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
urlpatterns = [ path('admin/', admin.site.urls), # La ruta 'leer' en donde listamos todos los registros o jugos de la Base de Datos path('jugos/', JugosListado.as_view(template_name = "jugos/index.html"), name='leer'), # La ruta 'detalles' en donde mostraremos una página con los detalles de un jugo o registro path('jugos/detalle/<int:pk>', JugoDetalle.as_view(template_name = "jugos/detalles.html"), name='detalles'), # La ruta 'crear' en donde mostraremos un formulario para crear un nuevo jugo o registro path('jugos/crear', JugoCrear.as_view(template_name = "jugos/crear.html"), name='crear'), # La ruta 'actualizar' en donde mostraremos un formulario para actualizar un jugo o registro de la Base de Datos path('jugos/editar/<int:pk>', JugoActualizar.as_view(template_name = "jugos/actualizar.html"), name='actualizar'), # La ruta 'eliminar' que usaremos para eliminar un jugo o registro de la Base de Datos path('jugos/eliminar/<int:pk>', JugoEliminar.as_view(), name='eliminar'), ] |
Con las rutas que definí en el código anterior, estoy llamando a las vistas genéricas (clases) que definimos en la Parte 3 de este tutorial, por ejemplo en la ruta jugos/crear llamamos a la clase JugoCrear la cual debe llamar al template o vista crear.html que se encuentra dentro de la carpeta jugos y al final le asignamos un nombre a esta ruta, el nombre que le asignamos es crear.
Se puede apreciar que las rutas detalle, actualizar y eliminar usan el id del jugo o registro que es un dato de tipo int
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
# La ruta 'detalles' en donde mostraremos una página con los detalles de un jugo o registro path('jugos/detalle/<int:pk>', JugosDetalle.as_view(template_name = "jugos/detalles.html"), name='detalles'), # La ruta 'crear' en donde mostraremos un formulario para crear un nuevo jugo o registro path('jugos/crear', JugoCrear.as_view(template_name = "jugos/crear.html"), name='crear'), # La ruta 'actualizar' en donde mostraremos un formulario para actualizar un jugo o registro de la Base de Datos path('jugos/editar/<int:pk>', JugoActualizar.as_view(template_name = "jugos/actualizar.html"), name='actualizar'), # La ruta 'eliminar' que usaremos para eliminar un jugo o registro de la Base de Datos path('jugos/eliminar/<int:pk>', JugoEliminar.as_view(), name='eliminar'), |
Siempre debemos pasarle a estas 3 rutas el id del registro o jugo con <int:pk> en donde int es integer y pk es primary key, ya que de esta manera Django puede saber cual es el registro que debe de leer, actualizar y eliminar de la Base de Datos.
A continuación el código completo del archivo urls.py:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
"""cruddjango4 URL Configuration The `urlpatterns` list routes URLs to views. For more information please see: https://docs.djangoproject.com/en/4.1/topics/http/urls/ Examples: Function views 1. Add an import: from my_app import views 2. Add a URL to urlpatterns: path('', views.home, name='home') Class-based views 1. Add an import: from other_app.views import Home 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') Including another URLconf 1. Import the include() function: from django.urls import include, path 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) """ from django.contrib import admin from django.urls import path urlpatterns = [ path('admin/', admin.site.urls), # La ruta 'leer' en donde listamos todos los registros o jugos de la Base de Datos path('jugos/', JugosListado.as_view(template_name = "jugos/index.html"), name='leer'), # La ruta 'detalles' en donde mostraremos una página con los detalles de un jugo o registro path('jugos/detalle/<int:pk>', JugoDetalle.as_view(template_name = "jugos/detalles.html"), name='detalles'), # La ruta 'crear' en donde mostraremos un formulario para crear un nuevo jugo o registro path('jugos/crear', JugoCrear.as_view(template_name = "jugos/crear.html"), name='crear'), # La ruta 'actualizar' en donde mostraremos un formulario para actualizar un jugo o registro de la Base de Datos path('jugos/editar/<int:pk>', JugoActualizar.as_view(template_name = "jugos/actualizar.html"), name='actualizar'), # La ruta 'eliminar' que usaremos para eliminar un jugo o registro de la Base de Datos path('jugos/eliminar/<int:pk>', JugoEliminar.as_view(), name='eliminar'), ] |
Ahora vamos a organizar los templates para el sistema CRUD.
Templates
En el archivo urls.py que configuré anteriormente, podemos ver que cada ruta está llamando a un archivo HTML con la vista correspondiente que debe de mostrar dicha ruta, tenemos que crear un directorio llamado templates en donde crearemos 4 archivos HTML que son actualizar.html, crear.html, detalles.html y index.html
El directorio templates no viene con Django Framework o se crea automáticamente, este directorio lo debemos crear manualmente dentro del directorio de nuestra aplicación jugos y dentro del directorio templates debo crear otro directorio llamado jugos, es decir la ruta quedaria como cruddjango4 > jugos > templates >jugos
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/cruddjango4 ├── /cruddjango4 ├── /mientornovirtual ├── /jugos ├── /__pycache__ ├── /migrations ├── /static ├── /templates ├── /jugos ├── actualizar.html // Creamos este archivo ├── crear.html // Creamos este archivo ├── detalles.html // Creamos este archivo ├── index.html // Creamos este archivo ├── __init__.py ├── admin.py ├── apps.py ├── models.py ├── tests.py ├── views.py ├── db.sqlite3 ├── manage.py ├── /miev |
Ahora pasaré a instalar algunas dependencias necesarias para este proyecto.
Instalación y Configuración de Paquetes
Instalaré y configuraré un par de paquetes para mi proyecto:
Bootstrap 5
El Framework Bootstrap 5 nos permite crear interfaces HTML de manera rápida, asi nos enfocamos solamente en la lógica de la aplicación. Voy a instalar la librería django-bootstrap5 ejecutando el siguiente comando, esta librería nos instala Bootstrap 5 dentro del Framework Django:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
# Comando para instalar el paquete 'django-bootstrap5' pip install django-bootstrap5 Collecting django-bootstrap5 Downloading django_bootstrap5-22.2-py3-none-any.whl (24 kB) Requirement already satisfied: Django>=3.2 in d:\xampp\htdocs\xampp\nc\tutoriales\blog\cruddjango4\miev\lib\site-packages (from django-bootstrap5) (4.1.5) Requirement already satisfied: asgiref<4,>=3.5.2 in d:\xampp\htdocs\xampp\nc\tutoriales\blog\cruddjango4\miev\lib\site-packages (from Django>=3.2->django-bootstrap5) (3.6.0) Requirement already satisfied: sqlparse>=0.2.2 in d:\xampp\htdocs\xampp\nc\tutoriales\blog\cruddjango4\miev\lib\site-packages (from Django>=3.2->django-bootstrap5) (0.4.3) Requirement already satisfied: tzdata in d:\xampp\htdocs\xampp\nc\tutoriales\blog\cruddjango4\miev\lib\site-packages (from Django>=3.2->django-bootstrap5) (2022.7) Installing collected packages: django-bootstrap5 Successfully installed django-bootstrap5-22.2 (miev) |
Para más información puedes visitar el enlace del paquete.
Django Widget Tweaks
Ahora instalaré el paquete django-widget-tweaks que me permite renderizar y gestionar los campos de los formularios de manera ágil, ejecuto el siguiente comando para instalarlo:
|
1 2 3 4 5 6 7 8 9 10 |
# Comando para instalar el paquete 'django-widget-tweaks' pip install django-widget-tweaks Collecting django-widget-tweaks Downloading django_widget_tweaks-1.4.12-py3-none-any.whl (8.9 kB) Installing collected packages: django-widget-tweaks Successfully installed django-widget-tweaks-1.4.12 (miev) |
Igualmente, para más información puedes visitar el enlace del paquete.
Para que los paquetes instalados anteriormente funcionen en mi proyecto, debo de instanciarlos dentro del archivo settings.py que se encuentra en cruddjango4 > cruddjango4 > settings.py
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/cruddjango4 ├── /cruddjango4 ├── __init__.py ├── asgi.py ├── settings.py // Abro este archivo ├── urls.py ├── wsgi.py ├── /jugos ├── db.sqlite3 ├── manage.py ├── /miev |
Abro el archivo settings.py y dentro de el instancio el paquete django-bootstrap5 y django-widget-tweaks en la sección INSTALLED_APPS = []:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'jugos', # Registramos la app 'jugos' 'django_bootstrap5', # Registramos Bootstrap 5 (Este comentario es para explicación, debes de eliminarlo para probar la aplicación, si no te va a dar error) 'widget_tweaks', #Registramos widget_tweaks (Este comentario es para explicación, debes de eliminarlo para probar la aplicación, si no te va a dar error) ] |
Bien, hasta aquí hemos creado las rutas, configurado el directorio templates para los archivos HTML e instalado los paquetes que necesitaré para el sistema CRUD.
Ten Paciencia, lo que quiero es que conozcas bien como se crea este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje.
Nota (s)
- Para la siguiente parte de este tutorial, crearé las vistas HTML, añadiremos mensajes despues de haber creado, actualizado y eliminado un postre o registro de la Base de Datos y realizaremos unas configuraciones adicionales para nuestra aplicación CRUD.
- Los pasos mencionados en este tutorial pueden cambiar en un futuro, esto no depende de nosotros si no de las empresas que dan soporte a Django y Python que suelen cambiar el orden y las opciones de sus tecnologías.
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.
- Django Tutoriales
- 03-02-2023
- 10-01-2024
- Crear un Post - Eventos Devs - Foro
Seguimos trabajando las 24 horas y 365 días del año para mejorar tu experiencia en la comunidad.
Seguimos trabajando para brindarte le mejor experiencia en Nube Colectiva.
Social
Redes Sociales (Developers)
Redes Sociales (Digital)