Intro: English
Title: How to create a Django form using the django-widget-tweaks library.
Language: Spanish / Español
This is a step-by-step guide about how to create a Django form and manipulate the submited data in python-level code. We will use the
django-widget-tweakslibrary to tweak the form field rendering and to customize the fields presentation.
We will use the django-base repository to start a new Django project quickly and to write the code of this tutorial. Previously I have created a tutorial about how to setup a new Django project using this repository. In this tutorial, we will create a form with three fields: name, email and message, and then we're going to manipulate the submited data with our Python code.
Con el fin de crear documentación útil en nuestro idioma sobre el uso de Django, he venido abordando en mis últimos tutoriales temas referentes a la configuración inicial, despliegue en producción, sistema de usuarios y seguridad en una aplicación web creada con este framework web. En esta ocasión voy a hablar de cómo crear un formulario y cómo manipular los datos ingresados por el usuario en la respectiva solicitud "post". Vamos a utilizar la librería django-widget-tweaks para generar el formulario a nivel de "html". Esta librería nos permite modificar de forma muy sencilla los atributos de los campos del formulario desde la plantilla y no desde nuestro código Python. En este tutorial usaremos el repositorio django-base como base de inicio para escribir nuestro código.
1. Levantar proyecto Django.
El primer paso es crear nuestro proyecto Django. Mi recomendación es utilizar Docker siempre que debamos iniciar un nuevo proyecto Django. He creado previamente el repositorio django-base, que tiene toda la configuración inicial necesaria para iniciar un nuevo poyecto DJango usando Docker, y en este tutorial describo paso a paso como configurar un nuevo proyecto Django haciendo uso de este repositorio.
Una vez configurado, visitamos en el navegador la url localhost:8000 y debemos ver la siguiente imangen:
2. Instalar librería django-widget-tweaks
para instalar esta librería simplemente la agregamos al archivo requirements.txt, en el cual definimos las librerias Python que vamos a necesitar en nuestra aplicación. Inidicamos su versión más reciente de la siguiente forma:
Después corremos el siguiente comando:
$ docker-compose build
Este comando revisará los cambios en el archivo requirements.txt e instalará las librerías allí especificadas. Una vez corrido este comando, agregamos la librería a los INSTALLED_APPS en el archivo app/settings.py de la siguiente forma:
3. Definir formulario
Una vez que hayamos configurado nuestro proyecto Django, iniciamos a crear el formulario. Lo que haremos será crear un formulario en la página de inicio de nuestro proyecto con los campos Nombre, correo electrónico y mensaje.
Creamos el archivo forms.py dentro de la carpeta app/ con el siguiente contenido:
app/forms.py
Código fuente
Cómo podemos ver, estamos definiendo el formulario "ContactForm" con los campos name, email y message. Django nos permite crear de forma predefinida campos de tipo EmailField, lo que nos genera validaciones para comprobar que el valor ingresado corresponde efectivamente a un correo electrónico. El campo message se define como un CharField, y por medio del atributo widget cambiamos el tipo de campo para que luzca como un Textarea, debido a que este campo por lo general recibe valores de bastantes caracteres.
4. Cargar el formulario
Vamos a cargar nuestro formulario en la página inicial de nuestra aplicación. Para eso, debemos ir al archivo app/views.py e importar el formulario que acabamos de definir. Después de importar el formulario, debemos ir a la clase HomeView y modificarla de la siguiente forma:
app/views.py
Código fuente
Como podemos ver, estamos agregando el formulario a las variables de contexto de nuestra clase HomeView, lo que nos permite manipular el formulario en la plantilla app/templates/home.html mediante la variable contact_form.
Ahora vamos al archivo app/templates/home.html e imprimimos el formulario de la siguiente forma.
Código fuente
Cómo podemos ver, estamos utilizando la clase row de Bootstrap y la caracteristica offset, esto con el fin de que el formulario se vea centrado. Recordemos que el repositorio django-base ya viene con Boostrap instalado.
Si cargamos de nuevo la url locahost:8000 en un navegador, debemos ver el formulario de la siguiente forma:
5. Integrar librería django-widget-tweaks
Ya estamos cargando los campos del formulario en nuestra aplicación, pero ahora necesitamos modificar sus atributos CSS. Aquí es donde entra la fabulosa librería django-widget-tweaks, un proyecto open source que nos permite personalizar la presentación de un formulario desde la plantilla y no en las definiciones del formulario a nivel de Python. En la plantilla app/templates/home.html cargamos la librería de la siguiente forma:
{% load widget_tweaks %}
Y utilizamos la función render_field de la librería para imprimir los campos y agregar la clase form-control de la siguiente forma:
{% render_field contact_form.name class+="form-control" %}
Esto nos permite agregar la clase de Bootstrap form-control directamente a los elementos input del formulario, lo que va a permitir que nuestro formulario tenga estilos CSS definidos personalizadamente. Lo que haremos será imprimir uno por uno cada uno de los campos del formulario de la siguiente forma:
app/templates/home.html
Código fuente
Como podemos ver, también hemos agregado el elemento form para indicar que el método por medio del cual enviarémos los datos será una solicitud post, y hemos agregado el botón enviar, de tipo submit, para enviar nuestro formulario. También Estamos imprimiendo los errores de cada campo, que validará Django por defecto dependiendo de como definimos cada campo. SI cargamos la url locahost:8000 en nuestro nacegador, ahora el formulario se vera así:
Observamos que ahora el formulario luce mucho mejor gracias al uso de la librería django-widget-tweaks.
6. Manipuar datos enviados en el formulario
Ahora solo falta manipular los datos ingresados por los usuarios en el formulario por medio de nuestro código Python. Cómo vimos en el paso anterior, cuando el usuario haga submit del formulario, se generará una solicitud post en la que estarán incluidos los valores de los campos del formulario. Uno de los atributos importantes en un elemento form en el código html es el atributo action. En este atributo definimos la url a la que queremos que se dirija la solicitud post generada el enviar el formulario. En este caso no definimos este atributo, por lo que la solicitud post se drigirá a la url localhost:8000 por defecto; es decir, la solicitud post va a ser manipulada en la clase HomeView definida en nuestro archivo app/views.py.
La clase HomeView herada de la vista genérica de Django TemplateView, la cual solo tiene predefinida una acción para procesar una solicitud get. Para poder manipular una solicitud post en esta vista, debemos definirlo de la siguiente forma:
app/views.py
Código fuente
Cómo podemos ver, estamos obteniendo los valores de los campos del formulario por medio del comando name = request.POST.get('name'). Los valores de los campos del formulario están definidos dentro del diccionario POST de la solicitud. Importamos la función redirect para redireccionar al usuario a la vista de nombre home una vez hayamos manipulado los datos.
agregamos las siguientes lineas para comprobar que estamos manipulando correctamente los valores de los campos del formulario dentro de nuestra vista:
print("Nombre")
print(name)
print('-----------------')
print("Correo electrónico")
print(email)
print('-----------------')
print("mensaje")
print(message)
Ahora diligenciamos los campos del formulario y hacemos click en el botón enviar:
Tras hacer click en el botón enviar, debemos ver en la terminal las lineas que imprimimos en nuestra vista, con los nombres de los campos y el respectivo valor ingresado:
Esto compureba que ya estamos manipulando correctamente en nuestra vista los valores ingresados por los usuarios en el fomulario. Tras enviar el formulario, se debe recargar de nuevo la página de inicio de la aplicación con los campos vacíos debido a que estamos redirigiendo a los usuarios al home una vez que hayan hecho la solicitud post.
Y esto es todo!!! De esta sencilla forma creamos un formulario en Django y manipulamos los valores ingresados por los usuarios en nuestro código Python. Además echamos in vistazo a la librería django-widget-tweaks, bastante útil para personalizar los estilos de nuestros formularios. En el próximo tutorial vamos a ver como tomar estos valores ingresados por el usuario y enviaremos un correo electrónico con estos datos.
Felices días ✌
Posted on Utopian.io - Rewarding Open Source Contributors
Hi Andres :) I just found your post with my app I launched today. Post about it
App
I see you are dev, hope you understand
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Hey @kit.andres I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x
Congratulations @kit.andres! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here
If you no longer want to receive notifications, reply to this comment with the word
STOP