Como crear un CRUD con Django 2 y Bootstrap 4 – Parte 3 (Python 3.7)

4 minuto(s)

En esta página:

Demo

Esta 3ra parte es la continuación del capítulo anterior Como crear un CRUD con Django 2 y Bootstrap 4 – Parte 2 (Python 3.7) , en esta parte del tutorial crearemos las rutas, organizaremos nuestra carpeta templates en donde colocaremos las vistas de las páginas HTML, desplegaremos Bootstrap y otra utilidad necesaria para nuestro sistema CRUD, vamos con esta 3ra parte del tutorial.

Capítulos

Parte 1
Parte 2
Parte 3
Parte 4 (Final – Código Fuente GitHub)

Bien en este capítulo empezaremos creado las rutas de cada vista de nuestro CRUD.

Rutas

Voy a crear 5 rutas dentro del archivo urls.py, este archivo se encuentra dentro del directorio de tu proyecto app, (nosotros le colocamos a lo largo del tutorial el nombre app, a ti te debe aparecer el nombre que le asignaste durante la creación de tu proyecto) entonces según el orden y estructura que Django nos creo sería app > app


/miapp 
  ├── /env  
       ├── /Include
       ├── /Lib
       ├── /Scripts
       ├── pyvenv.cfg
  ├── /app 
       ├── /app 
            ├── __init__.py
            ├── settings.py 
            ├── urls.py // Abre este archivo 
       ├── manage.py
  ├── /postres        
            ├── __init__.py
            ├── admin.py
            ├── apps.py 
            ├── models.py 
            ├── tests.py 
            ├── views.py

/miapp

├── /env

├── /Include

├── /Lib

├── /Scripts

├── pyvenv.cfg

├── /app

├── __init__.py

├── settings.py

├── urls.py // Abre este archivo

├── manage.py

├── /postres

├── __init__.py

├── admin.py

├── apps.py

├── models.py

├── tests.py

├── views.py

Abre el archivo urls.py y agrega las siguientes rutas dentro de urlpatterns, estas rutas nos sirven para llamar a una vista especifica, colocaré las siguientes rutas, en el código te explico para que sirve cada una.

La ruta admin/ viene por defecto con Django, es decir no la he creado yo.


urlpatterns = [
    path('admin/', admin.site.urls),

    # La ruta 'leer' en donde listamos todos los registros o postres de la Base de Datos
    path('postres/', PostresListado.as_view(template_name = "postres/index.html"), name='leer'),

    # La ruta 'detalles' en donde mostraremos una página con los detalles de un postre o registro 
    path('postres/detalle/<int:pk>', PostreDetalle.as_view(template_name = "postres/detalles.html"), name='detalles'),

    # La ruta 'crear' en donde mostraremos un formulario para crear un nuevo postre o registro  
    path('postres/crear', PostreCrear.as_view(template_name = "postres/crear.html"), name='crear'),

    # La ruta 'actualizar' en donde mostraremos un formulario para actualizar un postre o registro de la Base de Datos 
    path('postres/editar/<int:pk>', PostreActualizar.as_view(template_name = "postres/actualizar.html"), name='actualizar'), 

    # La ruta 'eliminar' que usaremos para eliminar un postre o registro de la Base de Datos 
    path('postres/eliminar/<int:pk>', PostreEliminar.as_view(), name='eliminar'),    
]

urlpatterns = [

path('admin/', admin.site.urls),

# La ruta 'leer' en donde listamos todos los registros o postres de la Base de Datos

path('postres/', PostresListado.as_view(template_name = "postres/index.html"), name='leer'),

# La ruta 'detalles' en donde mostraremos una página con los detalles de un postre o registro

path('postres/detalle/<int:pk>', PostreDetalle.as_view(template_name = "postres/detalles.html"), name='detalles'),

# La ruta 'crear' en donde mostraremos un formulario para crear un nuevo postre o registro

path('postres/crear', PostreCrear.as_view(template_name = "postres/crear.html"), name='crear'),

# La ruta 'actualizar' en donde mostraremos un formulario para actualizar un postre o registro de la Base de Datos

path('postres/editar/<int:pk>', PostreActualizar.as_view(template_name = "postres/actualizar.html"), name='actualizar'),

# La ruta 'eliminar' que usaremos para eliminar un postre o registro de la Base de Datos

path('postres/eliminar/<int:pk>', PostreEliminar.as_view(), name='eliminar'),

]

Lo que hacemos en cada ruta es llamar a una clase determinada del archivo views.py por ejemplo en la ruta postres/crear llamamos a la clase PostreCrear la cual debe llamar al template o vista crear.html que se encuentra dentro de la carpeta postres y al final le asignamos un nombre a esta ruta, el nombre que le asignamos es crear.

Puedes ver que las rutas detalle, actualizar y eliminar usan el id del postre o registro que es un dato de tipo int


path('postres/detalle/<int:pk>', PostreDetalle.as_view(template_name = "postres/detalles.html"), name='detalles'), 

path('postres/crear', PostreCrear.as_view(template_name = "postres/crear.html"), name='crear'),
    path('postres/editar/<int:pk>', PostreActualizar.as_view(template_name = "postres/actualizar.html"), name='actualizar'),
    
path('postres/eliminar/<int:pk>', PostreEliminar.as_view(), name='eliminar'),

path('postres/detalle/<int:pk>', PostreDetalle.as_view(template_name = "postres/detalles.html"), name='detalles'),

path('postres/crear', PostreCrear.as_view(template_name = "postres/crear.html"), name='crear'),

path('postres/editar/<int:pk>', PostreActualizar.as_view(template_name = "postres/actualizar.html"), name='actualizar'),

path('postres/eliminar/<int:pk>', PostreEliminar.as_view(), name='eliminar'),

Es importante pasarle a estas 3 rutas el id del registro o postre 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.

Mi archivo urls.py se vería de la siguiente manera con el código completo


"""crud_django_2_bootstrap_4 URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.2/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
#from django.views.generic import TemplateView
from postres.views import PostresListado, PostreDetalle, PostreCrear, PostreActualizar, PostreEliminar
#from . import views

#from postres.views import PostresList

from django.conf import settings
from django.conf.urls.static import static 

urlpatterns = [
    path('admin/', admin.site.urls),
    path('postres/', PostresListado.as_view(template_name = "postres/index.html"), name='leer'),
    path('postres/detalle/<int:pk>', PostreDetalle.as_view(template_name = "postres/detalles.html"), name='detalles'), 
    path('postres/crear', PostreCrear.as_view(template_name = "postres/crear.html"), name='crear'),
    path('postres/editar/<int:pk>', PostreActualizar.as_view(template_name = "postres/actualizar.html"), name='actualizar'),    
    path('postres/eliminar/<int:pk>', PostreEliminar.as_view(), name='eliminar'),    
] #+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

"""crud_django_2_bootstrap_4 URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:

https://docs.djangoproject.com/en/2.2/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

#from django.views.generic import TemplateView

from postres.views import PostresListado, PostreDetalle, PostreCrear, PostreActualizar, PostreEliminar

#from . import views

#from postres.views import PostresList

from django.conf import settings

from django.conf.urls.static import static

urlpatterns = [

path('admin/', admin.site.urls),

path('postres/', PostresListado.as_view(template_name = "postres/index.html"), name='leer'),

path('postres/detalle/<int:pk>', PostreDetalle.as_view(template_name = "postres/detalles.html"), name='detalles'),

path('postres/crear', PostreCrear.as_view(template_name = "postres/crear.html"), name='crear'),

path('postres/editar/<int:pk>', PostreActualizar.as_view(template_name = "postres/actualizar.html"), name='actualizar'),

path('postres/eliminar/<int:pk>', PostreEliminar.as_view(), name='eliminar'),

] #+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Templates

Como cada ruta esta 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 lo creamos dentro del directorio de nuestra aplicación postres en la siguiente ubicación app > app > postres > templates > postres


/miapp 
  ├── /env  
       ├── /Include
       ├── /Lib
       ├── /Scripts
       ├── pyvenv.cfg
  ├── /app 
       ├── /app 
            ├── __init__.py
            ├── settings.py 
            ├── urls.py
       ├── manage.py
  ├── /postres
       ├── /templates
               ├── /postres
                     ├── 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

/miapp

├── /env

├── /Include

├── /Lib

├── /Scripts

├── pyvenv.cfg

├── /app

├── __init__.py

├── settings.py

├── urls.py

├── manage.py

├── /postres

├── /templates

├── /postres

├── 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

Bootstrap 4

Vamos a desplegar Bootstrap 4 en Django, usaremos esta librería . Abre tu consola de comandos y ejecuta el siguiente comando para instalarla


pip install django-bootstrap4

pip install django-bootstrap4

Si deseas más información de esta librería, por favor visita su enlace.

Adicionalmente para poder renderizar y gestionar sin problemas los campos de nuestros formularios, vamos a usar la librería django-widget-tweaks, abre tu consola de comandos y ejecuta el siguiente comando para instalarla


pip install django-widget-tweaks

pip install django-widget-tweaks

Si deseas más información de esta librería, por favor visita este enlace.

Y para borrar completamente la cache de mi proyecto durante las pruebas y desarrollo, he instalado el paquete django-clear-cache.

Dentro de tu archivo settings.py debes de agregar estas 2 librerías que hemos desplegado en Django.


INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'postres',
    'clear_cache',
    'bootstrap4', # Registramos Bootstrap 4 (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)
]

INSTALLED_APPS = [

'django.contrib.admin',

'django.contrib.auth',

'django.contrib.contenttypes',

'django.contrib.sessions',

'django.contrib.messages',

'django.contrib.staticfiles',

'postres',

'clear_cache',

'bootstrap4', # Registramos Bootstrap 4 (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 con esto ya tenemos todo listo para crear el contenido de nuestras vistas HTML que serán actualizar.html, crear.html, detalles.html y index.html

Notas

En la parte número 4 y última de este tutorial crearemos 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, Python y MySQL que suelen cambiar el orden y las opciones de sus tecnologías.