Embed Size (px)
Citation preview
Forms de Django
En este tutorial aprenderás a crear forms usando las forms de django. Te guiaré paso a paso para que puedas utilizar forms, darles estilo (de Bootstrap) y hacer algo con la información que obtienes de estas.
La idea de este tutorial nació porque al comenzar a utilizar Django tardé bastante tiempo en aprender a usar las forms. Mi propósito es ayudarte y darte una aproximación básica del uso de forms de Django.
Este turtorial fue desarrollado en un sistema operativo Windows 10 Home . Para instalar django en Windows 10, sigue el siguiente tutorial (https://docs.djangoproject.com/en/2.1/howto/windows/).
Prerrequisitos:
Instalar Python 3.6.6 (https://www.python.org/downloads/)
Para lograr concluir este tutorial se necesita:
Python 3.6.6 / Django 2.1.2 / Bootstrap 4.1
Django -> Framework de desarrollo (Python)
Bootstrap -> Framework de comportamiento y diseño (js, css)
Es recomendable concluir el siguiente tutorial (https://docs.djangoproject.com/es/2.1/intro/tutorial01/) antes de comenzar con Forms de Django.
NOTA: Es recomendable crear un ambiente virtual para el desarrollo de este tutorial y de cualquier proyecto que realices. Si no tienes nada de experiencia con Django, sigue este tutorial para la creación de un proyecto y sus respectivas apps (https://docs.djangoproject.com/es/2.1/intro/tutorial01/).
En resumen, se necesita:
1. Dentro del directorio en el que desees crear tu proyecto, ingresa a tu virtual environment
workon nombre_de_mi_virtualEnv
(nombre_de_mi_virtualEnv es el virtual environment que creaste en el
tutorial https://docs.djangoproject.com/en/2.1/howto/windows/)
2. Crear un proyecto (desde la command prompt) django-admin startproject mysite
(El proyecto creado tendrá la siguiente estructura)
Estructura del proyecto
3. Dentro de la carpeta del proyecto (mysite), crear una app (en nuestro caso llamada forms) cd mysitepy manage.py startapp forms
4. Dentro de la carpeta mysite, en el archivo settings.py, incluir forms dentro de INSTALLED APPS. INSTALLED_APPS =
['django.contrib.admin','django.contrib.auth','django.contrib.c
ontenttypes','django.contrib.sessions','django.contrib.messages
','django.contrib.staticfiles','forms',]
5. Dentro de la carpeta mysite, en el archivo urls.py, incluir las urls de nuestra aplicación forms:
mysite/urls.py (Archivo original)
Eliminamos comentarios e importamos include y creamos el path hacia los urls de nuestra app forms. Le diremos a la aplicación que al no leer ningún path en el navegador, se dirija a algún url que definiremos más adelante dentro de urls.py de la carpeta forms.
mysite/urls.py (Archivo editado)
from django.contrib import admin
from django.urls import path, includeurlpatterns = [ path('', include('forms.urls')),
path('admin/', admin.site.urls),
]
Para propósitos del tutorial, más adelante crearemos un modelo de “Usuarios” para guardar la información que enviemos en los posts de nuestros forms en la base de datos.
Creamos la view que mostrará
nuestra form:
Estructura del proyecto
En la carpeta forms, creamos una carpeta templates y dentro de esta, una carpeta llamada forms (en django es buena práctica crear nuestros html templates así).
Dentro de forms/templates/forms/ creamos un archivo llamado mi_form.html que se encargará de mostrar nuestra form y todos los Usuarios que vayamos creando.
NOTA: Por ahora solo le pondremos un HOLA!
En la carpeta forms en el archivo views.py creamos nuestra view llamada index. from django.shortcuts import renderdef index(request): return render(request, 'forms/mi_form.html')
En el archivo urls.py importamos las views de forms y creamos el path que nos llevará a nuestra view. from django.contrib import admin
from django.urls import path
from . import viewsapp_name = 'forms'
urlpatterns = [ path('', views.index, name='mi_form'),
]
NOTA: En este caso, queremos acceder a la form sin necesidad de escribir nada en el url del navegador. O sea…
Queremos tener: http://127.0.0.1:8000/
En lugar de: http://127.0.0.1:8000/path_de_url
Viendo los resultados:
Corremos el server de django py manage.py runserver
En nuestro navegador, nos dirigimos a: http://127.0.0.1:8000/
Y obtendremos la siguiente página:
Ya logramos mostrar contenido en la página! Ahora comenzaremos a meternos con el estilo.
Dándole estilo y estructura a nuestra página:
Cambiamos toda la estructura de nuestro archivo mi_form.html como la estructura base de un archivo html. Además, importamos los .css y .js de Bootstrap.
<!DOCTYPE html>
<html><head>
<title>Mis forms</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bo
otstrap.min.css" integrity="sha384-
MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPM
O" crossorigin="anonymous">
</head><body>
<div class="container text-center pt-5">
<h1>Hola</h1>
<p>Mi tutorial de forms</p>
</div><script src="https://code.jquery.com/jquery-
3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jiz
o" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/um
d/popper.min.js" integrity="sha384-
ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm4
9" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/boot
strap.min.js" integrity="sha384-
ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULT
y" crossorigin="anonymous"></script>
</body>
</html>
Nuestra página ahora se debe ver así:
Creando el modelo que guardará
los datos de los Usuarios:
En la carpeta forms, en el archivo models.py
forms/models.py
Creamos nuestro modelo
forms/models.py from django.db import modelsclass Usuarios(models.Model):
nombre = models.CharField(max_length=15)
telefono = models.CharField(max_length=12)
fecha_de_nacimiento = models.DateField()
email = models.EmailField(max_length=254)
NOTA: Existen muchos tipos de Fields que puedes usar para tus models. Puedes checar estas referencias para conocerlos todos (https://docs.djangoproject.com/es/2.1/ref/models/fields/).
Después de la creación de nuestro modelo, realizamos las migraciones: py manage.py makemigrationspy manage.py migrate
Con estos comandos ya tenemos nuestra base de datos db.sqlite3 en nuestro proyecto lista para usarse.
Ahora sí!! Creamos nuestro form:
Dentro de la carpeta forms, creamos un archivo forms.py copy nul > forms/forms.py
NOTA: También puedes crearlo desde tu IDE o manejador de archivos.
En el archivo forms que acabamos de crear:
1. Importamos forms de Django y el modelo Usuarios que acabamos de crear:
from django import forms
from forms.models import Usuarios
2. Declaramos nuestra form como una class: class RegistrarUsuario(forms.Form):
NOTA: Así como declaramos las variables de nuestro modelo Usuarios en models.py, tenemos que declarar las variables que nuestro form utilizará. Es importante que entre nuestro modelo y nuestra form exista consistencia en las variables.
3. Declaramos las variables que utilizaremos
nombre = forms.CharField(label='Nombre:',max_length=15)
telefono = forms.CharField(label='Teléfono',max_length=12)
fecha_de_nacimiento = forms.DateField(label='Fecha de
nacimiento:')
email = forms.EmailField(label='Email:',max_length=254)
NOTA: En las forms de Django, cada variable que se declare, será un <input> en el html.
Archivo de forms.py:
from django import forms
from forms.models import Usuariosclass
RegistrarUsuario(forms.Form):nombre =
forms.CharField(label='Nombre:',max_length=15)
telefono = forms.CharField(label='Teléfono',max_length=12)
fecha_de_nacimiento = forms.DateField(label='Fecha de
nacimiento:')
email = forms.EmailField(label='Email:',max_length=254)
Modificamos el archivo views.py (de la carpeta forms) importando nuestra form para que se le pase al html que la va a renderizar:
from django.shortcuts import render
from .forms import RegistrarUsuariodef index(request): register_form = RegistrarUsuario()
return render(request, 'forms/mi_form.html', {'register_form':
register_form})
Modificamos el archivo mi_form.html para que muestre los <input> de la register_form que le acabamos de pasar:
<!DOCTYPE html>
<html><head>
<title>Mis forms</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bo
otstrap.min.css" integrity="sha384-
MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPM
O" crossorigin="anonymous">
</head><body>
<div class="container text-center pt-5">
<h1>Hola</h1> <p>Mi tutorial de forms</p> <div class='jumbotron'> <form action="{% url 'forms:mi_form' %}" method="post"> {% csrf_token %} {% for field in register_form %} <div class='form-group'> <label for="{{ field.name }}">{{ field.label }}</label> {{ field }} </div> {% endfor %} <br> <center><button type="submit" class="btn btn-success btn-
lg">Registrar usuario</button></center> </form> </div>
</div><script src="https://code.jquery.com/jquery-
3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jiz
o" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/um
d/popper.min.js" integrity="sha384-
ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm4
9" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/boot
strap.min.js" integrity="sha384-
ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULT
y" crossorigin="anonymous"></script>
</body>
</html>
Explicación de código <p>Mi tutorial de forms</p>
<div class='jumbotron'>
<form action="{% url 'forms:mi_form' %}" method="post"> {% csrf_token %}
{% for field in register_form %}
<div class='form-group'>
<label for="{{ field.name }}">{{ field.label
}}</label>
{{ field }}
</div> {% endfor %}
<br>
<center><button type="submit" class="btn btn-success
btn-lg">Registrar usuario</button></center>
</form>
</div>
En esta parte del código, (gracias a Django) le estamos diciendo al html que por cada variable (field) que declaramos en nuestra form (en forms.py), tiene que mostrar e variable como un <input> con su respectiva <label>. También vemos el {% csrf_token %} que es una llave que utiliza Django para protegernos de Cross Site Request Forgery. <p>Mi tutorial de forms</p>
<div class='jumbotron'>
<form action="{% url 'forms:mi_form' %}" method="post">
{% csrf_token %}
{% for field in register_form %}
<div class='form-group'>
<label for="{{ field.name }}">{{ field.label
}}</label>
{{ field }}
</div>
{% endfor %}
<br>
<center><button type="submit" class="btn btn-success btn-
lg">Registrar usuario</button></center>
</form>
</div>
Esas clases son las que sacamos de Bootstrap para hacer que nuestra página se vea bien… pero… ¿Cómo se ve ahora?
Con lo que hemos creado hasta ahora, nuestra página sólo tiene unos inputs que se pueden enviar pero no se hace nada con esta información. Además, nuestro <input> de fecha es un type=”text” que no nos sirve para nuestro propósito.
Aregando Django widgets a
nuestros inputs:
Para evitar que nuestro <input> de fecha sea un type=”text”, tenemos que agregarle un widget a las variables de nuestra form.
Modificamos nuestro archivo forms.py (de la carpeta forms) para que cada variable (input) tenga un widget del tipo que corresponda: from django import forms
from forms.models import Usuariosclass
RegistrarUsuario(forms.Form):nombre =
forms.CharField(label='Nombre:',max_length=15,
widget=forms.TextInput())
telefono = forms.CharField(label='Teléfono',max_length=12,
widget=forms.TextInput())
fecha_de_nacimiento = forms.DateField(label='Fecha de
nacimiento:', widget=forms.SelectDateWidget(years=range(1900,2001)))
email = forms.EmailField(label='Email:',max_length=254,
widget=forms.EmailInput())
Si es forms.CharField, el widget correspondiente es: widget=forms.TextInput()
En el caso de forms. DateField, el widget correspondiente es: widget=forms.SelectDateWidget(years=range(1900,2001))
Que además de hacer que el <input> sea type=”date”, le damos un rango de fechas para que sólo mayores de 18 puedan “registrarse”.
NOTA: Si quieres conocer todos los widgets de Django, visita la siguiente página (https://docs.djangoproject.com/es/2.1/ref/forms/widgets/).
Aún con los widgets agregados, nuestra form se ve un poco insípida en cuanto a diseño…
Agregando diseño a nuestros
<inputs>: <div class="container text-center pt-5">
<h1>Hola</h1>
<p>Mi tutorial de forms</p>
<div class='jumbotron'>
<form action="{% url 'forms:mi_form' %}" method="post"> {% csrf_token %} {% for field in register_form %} <div class='form-group'> <label for="{{ field.name }}">{{ field.label }}</label> {{ field }} </div> {% endfor %}
<br>
<center><button type="submit" class="btn btn-success
btn-lg">Registrar usuario</button></center>
</form>
</div>
</div>
Aquí podemos ver que cada field (<input>) se inserta uno igual al otro. No existe ningún tipo de consideración al respecto.
NOTA: Existen maneras de darle estilo y personalización a cada input en el htlm pero para propósitos de este tutorial, lo haremos de otra manera que aumenta la mantenibilidad del proyecto.
Dándole estilo a cada <input>
Ya discutimos previamente las variables que dan vida a cada input de los forms y sus respectivos widgets… Ahora, veremos cómo pasar parámetros a los widgets que afectan su comportamiento en el html.
En el archivo forms.py (de la carpeta forms), agregamos attrs={} a los widgets: nombre = forms.CharField(label='Nombre:',max_length=15,
widget=forms.TextInput(
attrs={
'class':'form-control',
'placeholder':'Nombre',
}))
telefono = forms.CharField(label='Teléfono',max_length=12,
widget=forms.TextInput(
attrs={
'class':'form-control',
'placeholder':'4421234567',
}))
fecha_de_nacimiento = forms.DateField(label='Fecha de
nacimiento:',
widget=forms.SelectDateWidget(years=range(1900,2001),
attrs={
'class':'form-control',
}))
email = forms.EmailField(label='Email:',max_length=254,
widget=forms.EmailInput(
attrs={
'class':'form-control',
'placeholder':'[email protected]',
}))
¿Qué falta en esta imagen que sí está en el código de arriba? PISTA: ayuda a los usuarios a
ver un ejemplo de lo que tienen que poner en los inputs.
En el archivo mi_form.html (forms/templates/forms/mi_form.html) agregamos unas cuantas clases de Bootstrap para darle un poco más de estilo: <!DOCTYPE html>
<html><head>
<title>Mis forms</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bo
otstrap.min.css" integrity="sha384-
MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPM
O" crossorigin="anonymous">
</head><body>
<div class="container text-center pt-5">
<h1>Hola</h1>
<p>Mi tutorial de forms</p>
<div class='jumbotron'>
<center> <div class="text-left" style="max-width:500px">
<form action="{% url 'forms:mi_form' %}"
method="post">
{% csrf_token %}
{% for field in register_form %}
<div class='form-group'>
<label for="{{ field.name }}">{{ field.label
}}</label>
{{ field }}
</div>
{% endfor %}
<br>
<center><button type="submit" class="btn btn-
success btn-lg">Registrar usuario</button></center>
</form> </div>
</center>
</div>
</div><script src="https://code.jquery.com/jquery-
3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jiz
o" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/um
d/popper.min.js" integrity="sha384-
ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm4
9" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/boot
strap.min.js" integrity="sha384-
ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULT
y" crossorigin="anonymous"></script>
</body>
</html>
Y ahora nuestra form se ve así:
¿Supiste lo que faltaba?
Ya quedó!!! Estilo y estructura!
Pero… ¿qué hacemos con la información de la form?, ¿cómo la guardamos en la base de datos?
Guardando información en la base
de datos:
Django tiene definidas funciones que ayudan a interactuar con la base de datos sin necesidad de una sola línea de código sql.
NOTA: Para un mayor entendimiento de la forma en la que estas funciones operan, por favor consulta esta página (https://docs.djangoproject.com/es/2.1/topics/db/queries/).
A continuación, mostraré cómo podemos guardar la información de nuestra form con una función declarada dentro de su estructura.
Primero importamos datetime (para trabajar con fechas) y definimos esta función: from datetime import datetimedef registrar_usuario(self):
fecha = datetime(int(self.data['fecha_de_nacimiento_year']),
int(self.data['fecha_de_nacimiento_month']),
int(self.data['fecha_de_nacimiento_day']))
nuevo_usuario = Usuarios(nombre=self.data['nombre'],
telefono=self.data['telefono'],
fecha_de_nacimiento=fecha,
email=self.data['email'])
nuevo_usuario.save()
return 'Registro exitoso'
Aquí le estamos diciendo que cree un objeto de tipo Usuario (como una fila en nuestra base de datos).
NOTA: Lo que está en negritas es la forma en la que el html nos está mandando los inputs de la fecha (year, month, day) por lo que tenemos que hacer un datetime() para guardar estos valores en uno compatible con nuestra base de datos. from datetime import datetimedef registrar_usuario(self):
fecha =
datetime(int(self.data['fecha_de_nacimiento_year']),
int(self.data['fecha_de_nacimiento_month']),
int(self.data['fecha_de_nacimiento_day']))
nuevo_usuario = Usuarios(nombre=self.data['nombre'],
telefono=self.data['telefono'],
fecha_de_nacimiento=fecha,
email=self.data['email']) nuevo_usuario.save()
return 'Registro exitoso'
Pero no es sino hasta esta parte que le decimos que guarde ese nuevo_usuario en nuestra base de datos (gracias al método .save() de Django).
Finalmente sólo confirmamos que el registro fue realizado correctamente.
Para poder utilizar esta función, necesitamos cambiar nuestra view index para hacer que si el request del usuario es un POST, se ejecute el guardado del nuevo_usuario, si no, que sólo se muestre nuestra forma vacía.
Para eso, validamos si el método del request es un POST: def index(request): if request.method == 'POST':
# Aquí guarda la información else:
# Aquí muestra nuestra form
Ahora obtenemos y checamos que la form sea válida. Si sí lo es, se ejecuta nuestra función de guardado de datos y se redirecciona a nuestra form vacía de nuevo: def index(request):
if request.method == 'POST': register_form = RegistrarUsuario(request.POST) if register_form.is_valid(): success = register_form.registrar_usuario(request.user)
return redirect('./')
else:
# Aquí muestra nuestra form
Para el caso else, sólo creamos la form vacía y se la mandamos al html para que la se muestre: def index(request):
if request.method == 'POST':
register_form = RegistrarUsuario(request.POST)
if register_form.is_valid():
success =
register_form.registrar_usuario(request.user)
return redirect('./')
else: register_form = RegistrarUsuario() return render(request, 'forms/mi_form.html', {'register_form':
register_form})
Ahora ya se están guardando Usuarios en nuestra base de datos!!
Pero no los podemos ver…
Modificarémos nuestro <body> del archivo mi_form.html para mostrar una tabla con nuestros usuarios: <div class="container text-center pt-5">
<h1>Hola</h1>
<p>Mi tutorial de forms</p>
<div class='jumbotron'>
<center>
<div class="text-left" style="max-width:500px">
<form action="{% url 'forms:mi_form' %}"
method="post">
{% csrf_token %}
{% for field in register_form %}
<div class='form-group'>
<label for="{{ field.name }}">{{ field.label
}}</label>
{{ field }}
</div>
{% endfor %}
<br>
<center><button type="submit" class="btn btn-
success btn-lg">Registrar usuario</button></center>
</form>
</div>
</center>
<br>
<table class="table table-striped table-bordered">
<thead class="thead-dark">
<tr>
<th>#</th>
<th>Nombre</th>
<th>Telefono</th>
<th>Fecha de nacimiento</th>
<th>Email</th>
</tr>
</thead><tbody>
{% for user in usuarios %}
<tr>
<td>{{ user.id }}</td>
<td>{{ user.nombre }}</td>
<td>{{ user.telefono }}</td>
<td>{{ user.fecha_de_nacimiento }}</td>
<td>{{ user.email }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
Y la view para que le pase al html la lista de usuarios: from django.shortcuts import render, redirect
from .models import Usuarios
from .forms import RegistrarUsuariodef index(request): mis_usuarios = Usuarios.objects.all()
if request.method == 'POST':
register_form = RegistrarUsuario(request.POST)
if register_form.is_valid():
success = register_form.registrar_usuario()
return redirect('./')
else:
register_form = RegistrarUsuario()
return render(request, 'forms/mi_form.html',
{'register_form': register_form,'usuarios': mis_usuarios})
Y listo! Tenemos una aplicación con un diseño que registra usuarios en una base de datos gracias a una form de Django y a las clases de Bootstrap.
