Django: archivos estáticos, templates y Formularios

¿Qué son los archivos estáticos?

Los archivos .js, .css, imágenes son denominados en Django archivos estáticos.

¿Qué son las plantillas (templates)?

Es un archivo de texto marcada con un grupo de etiquetas y filtros reconocidos por el motor de plantillas que estemos usando. Las plantillas es la forma en la que Django genera html dinámico.

Django soporta dos motores de plantillas (via backend y jinja2) estos motores definen una API que se encarga de cargar y representar nuestros plantillas.
Para que django sepa cómo encontrar las plantillas tenemos que especificar el path en la clave dirs de la variable templates.

¿Cómo recibe el servidor los datos?

En la etiqueta form el atributo action contiene una url. Esta url tiene asociada una vista y es esta vista la encargada de procesar la petición y retornar datos, plantillas etc.

IMPORTANTE: Este ejemplo y todos los que muestre en el blog utilizaré la versión 3.1 de Django.

Proyecto Django

Vamos a crear una calculadora para entender todo lo explicado.
Pasos a seguir:

1. Crear el proyecto.
2. crear las carpetas templates y staticfiles(en esta carpeta crearemos 2 subcarpetas: js y css).
3. Construir los paths en el archivo config.
4. Crear el archivo calculadora.html con los tags templates.
5. Creamos el archivo forms.js para procesar la solicitud y el archivo calculadora para dar un poquito de estilos a nuestra calculadora.
6. Creamos el archivo views.py luego creamos la vista que se va a encargar de procesar la solicitud y la vista que va a mostrar el html.
7. Vinculamos las vistas con una url.

#1- Ejecutamos el comando django-admin startproject calculadora
Y el resultado es el siguiente

img 1 - Estructura del proyecto calculadora.

#2 - Creamos las capetas staticfiles y templates dentro de calculadora

img 2- Creación de las carpetas staticfiles, js, css y templates 

#3 -Construimos el path de las carpetas para después poder construir las rutas relativas

img 3- Definimos la ruta para las plantillas.

Construcción dinámica del path.

os.path.dirname(__file__) esto lo que hace es __file__ obtiene el path de donde esta el archivo config. La función dirname devuelve el path de __file__ pero sin los caracteres config.py.

Unimos ese directorio con nuestra carpeta template y después reemplazamos los slash \ por /. 

El path que daría en mi caso "F:/blog/calculadora/calculadora/templates/". Con eso ya podemos llamar a nuestras plantillas.

img 4- Construcción de la ruta para los archivos estáticos.

Para los archivos js y css colocamos la variable STATICFILES_DIRS. Esta contiene una lista con los paths de archivos estáticos que no están dentro de una aplicación.
NOTA: STATIC_URL = "/static/" es la carpeta donde residen los archivos estáticos en las aplicaciones.

#4 - Nuestro archivo template quedaría de la siguiente manera

img 5- Template calculadora con sus archivos estáticos.

La plantilla tiene un formulario que hace una petición get a la url /resultado/. Además contiene una estructura if-else.
Si el usuario ingresa valores validos, la variable resultado será True he imprimirá un menaje.
Si el usuario no ingresa nada y hace el submit, la vista retorna resultado = "" esto es False por lo que ira por el else.
Los archivos estáticos lo agregamos con la plantilla {% load static %} esto le dice a django que debe buscar archivos estáticos en todos los directorios especificados. En nuestro caso es la lista de directorios declarados en STATICFILES_DIRS.
El tag  "{static 'js/forms.js'}" construye el path relativo uniendo lo que cargo en load con la cadena que se le esta pasando. Lo mismo es para el css.

#5 Creamos los archivos forms.js y calculadora.css.

img 6- Contenido de los archivos js y css.

En el archivo forms.js, tomamos los valores de los inputs y la elección del select, los codificamos en json y lo enviamos a la url la cual tiene la vista que va a procesar la solicitud.

#6 - Creamos el archivo views.py.NOTA: Este archivo no se crea al crear el proyecto.

img 7 - Las vistas que renderiza el formulario y los datos.

Tenemos 2 vistas:

1. Una que renderiza nuestra plantilla.

1. La otra es la encargada de procesar la solicitud GET.

Todas las vistas que no estén en una clase deben llevar como primer argumento el objeto request.Este objeto contiene información sobre la conexión y el usuario que se esta conectando.La vista calculate toma los valores a través de el diccionario GET (esta variable y la variable POST están  inspirados en las variables superglobales de php) Trata de convertirlos a un entero. Si no puede,  retornar la plantilla pero la variable resultado tendrá un cadena vacía.
La función render lo que hace es toma solicitud y renderizar una plantilla con las variables de contextos. Estas variables no son más que un diccionario. Si los datos ingresados son válidos empieza a evaluar que operación debe realizar (La operación viene en la variable operation). Una vez que entra en alguna condicional, realiza la operación convierte el resultado en un string y renderiza la variable y la plantilla.
#7-Vinculamos las vistas con las urls.

img 8- Vinculo entre las vistas y las urls.

Vinculamos las urls con las vistas. 
Para ver la plantilla, colocamos en el navegador 127.0.0.1:8000/calc/

Los resultados son:

img 9- Resultado de sumar 3323 + 22

img 10- Resultado de restar 43-22.

img 11- Resultado de dividir 30/2.

img 12 - Resultado de multiplicar 5 * 5.

img 13- Resultado de enviar cadenas vacías

Resumen:

• Especificamos la ruta/s en la clave dirs que está en la variable TEMPLATES.
• Para cargar archivos estáticos que no están en una aplicación usamos la variable STATICFILES_DIRS el cual contiene una lista de directorios donde debe buscar el servidor archivos estáticos.
• Para construir la ruta relativa utilizamos los tags {%load %} y {% static%}.
• El valor del action de los formularios siempre apuntan a una url.
• Las urls están asociadas a una vista. Esta es la encargada de devolver una respuesta.
• El objeto request tiene diccionarios GET  y POST. De esos diccionarios podemos recuperar los datos enviados por el cliente. Todas las vistas deben tener este objeto como primer argumento (A menos que estés trabajando con clases, en ese caso self seria el primer argumento).

Código fuente del ejemplo

¡Saludos pro.grammerjrs del mundo!