Salta al contingut principal

Curso Django: Los formularios

Curso Django: Los formularios:
Los formularios permiten el ingreso de datos para su procesamiento, ya sea para crear nuevos contenidos, para modificar el contenido que ya esta registrado previamente y hasta para realizar búsquedas.
Django posee una interfaz administrativa que hemos estado utilizando hasta el momento en lo que va del curso, pero cuando nos encontramos en la posición de elaborar interfaces de entrada o edición de datos, para los usuarios de nuestra aplicación, en algunas circunstancias, darles acceso al administrador de Django resulta contraproducente.
Es por ello que resulta mejor preparar nuestros formularios para manejar estas circunstancias, entre otras ocasiones.
Para entender mejor lo que Django permite, veamos esta lista de ‘superpoderes’ de Django:
  • Mostrar un formulario HTML generado a partir de reglas básicas.
  • Generar formularios HTML validados a partir de modelos ya declarados.
  • Validar la información que se desea registrar a través del formulario.
  • Mostrar nuevamente el formulario, haciendo notar los errores que ha producido la validación.
  • Convertir la información subida en tipos de datos de Python, para procesarlos de acuerdo a las vistas.
Para nuestro ejemplo de la semana, usaremos tres formularios, dos de ellos generados a partir de modelos y uno sin relación a algún modelo, pero con la capacidad de procesar la información y enviar un correo electrónico, utilizando gmail.

Nota: El archivo forms.py

Para crear formularios se usa por convención un archivo nuevo llamado: forms.py que se ubicará en la carpeta de la aplicación, esa misma donde se encuentran los archivos: models.py y views.py. Sin embargo esto no es obligatorio, pueden crearse también en el archivo models.py
Creamos nuestro archivo forms.py y en las primeras líneas ponemos:
forms.py import
forms.py import
Estas líneas permitirán usar los elementos ya construidos (ModelForm para usar los modelos ya declarados, forms para declarar nuevas reglas para un formulario y los modelos de nuestra aplicación principal)

Hoja de Trucos

Como se ha estado haciendo costumbre, esta semana también tenemos una chuleta (cheatsheet) para el manejo de formularios con Django, esta contiene los campos que vienen ya construidos, los atributos y las opciones de validación.
Django Cheatsheet Forms
Django Cheatsheet Forms
Con esta referencia en mano empezamos a crear nuestros formularios.

Objetos Formulario

Un objeto formulario en Django es una secuencia de campos y reglas de validación, que permiten depurar la información requerida y procesarla eficientemente. Estos campos y reglas deben ser declarados en el orden que se desea que aparezcan. Las clases formulario son creadas como subclases de django.forms.Form y tienen un estilo de declaración muy similar a los modelos de Django.
Para nuestro ejemplo consideraremos implementar un formulario de contacto, que tendrá solo dos campos: un correo electrónico y un mensaje, debe lucir así:
ContactoForm
ContactoForm
Este Formulario, debe ir de la mano de una vista que permita procesar los datos que reciba, esta vista será declarada en views.py, primero debemos modificar nuestras primeras líneas para importar todo lo necesario, luego declarar una nueva vista.
views.py import
views.py import
contacto()
contacto()
En donde encontramos: destinatario@email.com, debe ser reemplazado por el email que recibirá el mensaje. Para que funcione el envio del mensaje al correo electrónico debemos, agregar al final de nuestro archivo settings.py, las siguientes configuraciones:
settings.py + gmail
settings.py + gmail
En donde encontramos: remitente@gmail.com, debe ser reemplazado por la cuenta que enviará el mensaje (debe ser una cuenta válida en gmail). Necesitamos también una plantilla, en este caso se llamara: contacto.html
contactoform.html
contactoform.html
Para que nuestra aplicación sea navegable, modificamos base.html, para que quede con el siguiente menú:
base.html menu
base.html menu
También es necesaria una URL que convoque a esta vista por lo tanto debemos agregar la siguiente línea dentro de nuestra configuración en urls.py:
url(r'^contacto/,'principal.views.contacto'),

Formularios a partir de Modelos

Si se esta construyendo una aplicación que gestiona una base de datos, lo más apropiado es usar los modelos ya declarados como formularios, y así evitar estar repitiendo las mismas reglas para procesar los datos.
Por esta razon, Django provee una clase de ayuda que permite crear un formulario a partir de un modelo, esta clase se llama ModelForm, y se emplea así (forms.py):
RecetaForm y ComentarioForm
RecetaForm y ComentarioForm
Las vistas para manejar estos formularios serían estas:
nueva_receta() y nuevo_comentario()
nueva_receta() y nuevo_comentario()
Notar que se usa HttpResponseRedirect para redireccionar a una URL. Las plantillas recetaform.html y comentarioform.html serían estas:
recetaform.html
recetaform.html


comentarioform.html
comentarioform.html
Y tendríamos que modificar recetas.html para agregar un enlace para la creación de nuevas recetas
<a href="/receta/nueva">Agregar una receta</a>
La configuración para la URL esta:
url(r'^receta/nueva/,'principal.views.nueva_receta'),
url(r'^comenta/,'principal.views.nuevo_comentario'),

Resultado final

Los archivos: forms.py, views.py, urls.py y base.html quedán de la siguiente manera:
forms.py
forms.py
views.py (primera parte)
views.py (primera parte)
views.py (segunda parte)
views.py (segunda parte)
urls.py
urls.py
base.html
base.html
Y debemos tener las siguientes interfaces, como resultado:
Página de inicio
Página de inicio


Recetas
Recetas


Nueva receta
Nueva receta


Nuevo comentario
Nuevo comentario


Contacto
Contacto

Documentación oficial de Django

La mejor forma de enterarse todo lo que puede hacer Django, es revisando su documentación, para el caso de formularios tiene: La API de formularios, Campos de formulario, Validación de campos y formularios, Formularios múltiples, Archivos para procesar Formularios, Asistente para formularios, entre otras cosas más. Si deseas ir mas alla con los formularios, pues este es tu punto de partida.

Repositorio del proyecto y video complementario

Si te perdiste de algún detalle, o deseas ver como va quedando el código oficial de nuestro proyecto de ejemplo, no te olvides que siempre puedes revisar el repositorio del proyecto en github.
Por otro lado este video nos da mayores referencias del procesamiento de formularios con Django.


La próxima semana: Archivos Estáticos

La próxima semana se viene un capítulo interesante sobre los archivos estáticos dentro de nuestro proyecto, los mas comunes son archivos CSS, JavaScript o imágenes que pertenezcan a la interfaz de nuestra aplicación. Veremos como agregarlos y ya podremos usar cualquier framework frontend para construir rápidamente nuestra interfaz.
No se olviden prácticar con proyectos propios, probar cosas diferentes al ejemplo, escribir código (no se aprende copiando y pegando), revisar la documentación, dejar sus comentarios que enriquecen increiblemente el curso, difundirlo a los que aún no conocen Django, twittear sobre el curso y todo lo que ustedes vienen haciendo con el curso.
Que tengan un buen inicio de semana :) . Happy coding!

Sergio Infante Montero Sergio Infante Montero para Maestros del Web.
Agrega tu comentario | Enlace permanente al artículo

Síguenos en: @maestros | Fan page

Comentaris

Entrades populars d'aquest blog

15 Tutoriales CSS3 para mejorar tus paginas web

15 Tutoriales CSS3 para mejorar tus paginas web : Les dejo una pequeña recopilación de tutoriales CSS3 que espero sean de utilidad para ustedes, intentamos hacer una recopilación bastante completa para crear impresionantes diseños web con CSS3 y aprovechar las bondades de CSS3 incluso para aplicar efectos, son un total de 15 tutoriales CSS3 gratis . Crear menu dropdown con CSS3 Crear breadcrumbs con estilo Transiciones de paginas con CSS3 Crear timeline con CSS3 y jQuery Reproductor de video con HTML5, CSS3 y jQuery Crear efecto acordion CSS3 Aplicar degradado a texto Crear texto en curva con CSS3 y jQuery Aplicar textura a texto con Magic Pill Crear slider de imagenes con CSS3 y jQuery Rotar texto con CSS3 Crear menu vertical con CSS3 Crear formulario con HTML5 y CSS3 Crear efecto de imagenes apiladas con CSS3 Aplicar estilos para imagenes con CSS3  

Averiguar la Salud del Disco Duro, con Crystal Disk Info [Windows]

Averiguar la Salud del Disco Duro, con Crystal Disk Info [Windows] : El actual “cuello de botella” en nuestras PCs; es decir, donde todo el rendimiento de nuestra PC llega a estancarse , es en el Disco Duro. Si bien los procesadores han evolucionado considerablemente en velocidad / rendimiento, el RAM no sólo es más económico, sino más veloz, y las tarjetas de video siguen innovando con cada generación, los discos duros han permanecido idénticos desde hace años, limitados por la física. Y es que un disco duro tradicional sólo tiene un máximo de velocidad con el que puede girar (medido en revoluciones por minuto, o RPM) que, a su vez, limita la velocidad de lectura y escritura. En pocas palabras, a pesar de que nuestras PCs pueden procesar información mucho más rápido que hace 5 años, los discos duros siguen leyendo (y escribiendo) esta información prácticamente a la misma velocidad. Esto ha cambiado con la llegada de los SSD, los Discos de Estado Sólo que no están limitados por la velo...

Learn Composition from the Photography of Henri Cartier-Bresson

“Do you see it?” This question is a photographic mantra. Myron Barnstone , my mentor, repeats this question every day with the hopes that we do “see it.” This obvious question reminds me that even though I have seen Cartier-Bresson’s prints and read his books, there are major parts of his work which remain hidden from public view. Beneath the surface of perfectly timed snap shots is a design sensibility that is rarely challenged by contemporary photographers. Henri Cartier-Bresson. © Martine Franck Words To Know 1:1.5 Ratio: The 35mm negative measures 36mm x 24mm. Mathematically it can be reduced to a 3:2 ratio. Reduced even further it will be referred to as the 1:1.5 Ratio or the 1.5 Rectangle. Eyes: The frame of an image is created by two vertical lines and two horizontal lines. The intersection of these lines is called an eye. The four corners of a negative can be called the “eyes.” This is extremely important because the diagonals connecting these lines will form the breakdown ...