Como Crear Un CRUD con Django 5 – Parte 4
6 minuto(s)Demo
En la parte 3 de este tutorial, creamos las vistas genéricas para nuestro sistema CRUD.
Las vistas genéricas nos permite cargar nuestras páginas HTML de forma dinámica, es decir nos permite llamar a los datos desde nuestra tabla jugos y mostrarlos al usuario final.
En esta cuarta parte continuaremos continuamos con el tutorial Como Crear Un CRUD con Django, vamos con ello.
Partes
Para poder visualizar en el navegador las páginas del sistema CRUD, vamos a crear sus rutas, empecemos por allí a continuación.
Rutas
Crearé 5 rutas indispensables para las tareas CRUD.
Para ello abro el archivo urls.py que se encuentra en crud-django5 > cruddjango5 > cruddjango5 > urls.py:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/crud-django5 ├── /cruddjango5 ├── /cruddjango5 ├── __pycache__ ├── __init__.py ├── asgi.py ├── settings.py ├── urls.py // Abro este Archivo ├── wsgi.py ├── /jugos ├── db-sqlite3 ├── manage.py ├── /mientornovirtual |
Dentro del archivo urls.py agregamos las siguientes rutas dentro de urlpatterns = [], mediante estas rutas llamamos a una determinada vista HTML, estas vistas HTML las crearemos más adelante.
Recuerda que la ruta admin/ la creo el Framework Django automáticamente cuando se creo el proyecto, así que no hay que tocarla, a menos que sepas lo que haces.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
urlpatterns = [ path('admin/', admin.site.urls), # La ruta 'leer' en donde listamos todos los registros o jugos de la Base de Datos path('jugos/', ListarJugos.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>', DetalleJugo.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', CrearJugo.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>', ActualizarJugo.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>', EliminarJugo.as_view(), name='eliminar'), ] |
Mediante 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 CrearJugo 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.
Puedes 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 |
# La ruta 'detalles' en donde mostraremos una página con los detalles de un jugo o registro path('jugos/detalle/<int:pk>', DetalleJugo.as_view(template_name = "jugos/detalles.html"), name='detalles'), # La ruta 'actualizar' en donde mostraremos un formulario para actualizar un jugo o registro de la Base de Datos path('jugos/editar/<int:pk>', ActualizarJugo.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>', EliminarJugo.as_view(), name='eliminar'), |
Cada ves que ingresemos a las vistas detalle, actualizar y eliminar debes 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.
Te dejo 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 41 42 |
""" URL configuration for cruddjango5 project. The `urlpatterns` list routes URLs to views. For more information please see: https://docs.djangoproject.com/en/5.0/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 # Importamos las clases de las vistas genéricas del archivo 'views.py' from jugos.views import ListarJugos, DetalleJugo, CrearJugo, ActualizarJugo, EliminarJugo urlpatterns = [ path('admin/', admin.site.urls), # La ruta 'leer' en donde listamos todos los registros o jugos de la Base de Datos path('jugos/', ListarJugos.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>', DetalleJugo.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', CrearJugo.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>', ActualizarJugo.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>', EliminarJugo.as_view(), name='eliminar'), ] |
Fíjate también que importamos las clases que creamos en el archivo views.py en la tercera parte de este tutorial:
|
1 2 3 4 |
# Importamos las clases de las vistas genéricas del archivo 'views.py' from jugos.views import ListarJugos, DetalleJugo, CrearJugo, ActualizarJugo, EliminarJugo |
Pasemos ahora a organizar los templates o plantillas para el sistema CRUD.
Templates
Anteriormente creamos las rutas para el sistema CRUD en el archivo urls.py, y podemos ver que cada ruta está llamando a un archivo HTML con la vista correspondiente que debe de mostrar dicha ruta.
Entonces tenemos que crear un directorio llamado templates en donde crearemos 4 archivos HTML que son actualizar.html, crear.html, detalles.html e index.html
Recuerda que 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 debemos crear otro directorio llamado jugos, es decir la ruta quedara como crud-django5 > cruddjango5 > 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 |
/crud-django5 ├── /cruddjango5 ├── /cruddjango5 ├── /jugos ├── /migrations ├── /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 // Abro este archivo ├── test.py ├── views.py ├── db-sqlite3 ├── manage.py ├── /mientornovirtual |
Vamos a instalar algunas dependencias necesarias para este proyecto a continuación.
Instalación y Configuración de Dependencias
Solo necesitaré 2 dependencias para este proyecto:
Bootstrap 5
Bootstrap 5 es un framework CSS que nos permite crear interfaces HTML de manera rápida, de esta manera solo nos enfocamos en la lógica de la aplicación.
Para usar Bootstrap 5 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 |
pip install django-bootstrap5 Collecting django-bootstrap5 Downloading django_bootstrap5-23.4-py3-none-any.whl (25 kB) ... ... (Continua la instalación)... ... Installing collected packages: django-bootstrap5 Successfully installed django-bootstrap5-23.4 |
Ahora pasemos a instalar la segunda dependencia.
Django Widget Tweaks
También 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 11 12 |
pip install django-widget-tweaks Collecting django-widget-tweaks Downloading django_widget_tweaks-1.5.0-py3-none-any.whl (9.0 kB) Installing collected packages: django-widget-tweaks Successfully installed django-widget-tweaks-1.5.0 [notice] A new release of pip is available: 23.1.2 -> 23.3.2 [notice] To update, run: python.exe -m pip install --upgrade pip (mientornovirtual) |
Recuerda que para que los paquetes que instalé anteriormente funcionen en el proyecto, debemos de instanciarlos dentro del archivo settings.py que se encuentra en ccrud-django5 > cruddjango5 > cruddjango5 > settings.py:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/crud-django5 ├── /cruddjango5 ├── /cruddjango5 ├── __init__.py ├── asgi.py ├── settings.py // Abro este archivo ├── urls.py ├── wsgi.py ├── /jugos ├── manage.py ├── /mientornovirtual |
Dentro del archivo settings.py 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', '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) ] |
Bueno, hasta aquí llegamos con esta cuarta parte del tutorial en donde hemos creado nuestras rutas, también configuramos el directorio templates para los archivos HTML y por último instalamos las dependencias 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)
- En la quinta parte y última de este tutorial, crearemos las vistas HTML, mostraremos mensajes de confirmación luego de realizar las tareas crear, actualizar y eliminar. Asimismo haremos algunas 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
- 07-01-2024
- 11-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)