Peticiones GET y POST, token CSRF y formularios en Django

Vamos a crear una función llamada add(), para agregar comentarios; de momento, el apartado para dibujar una vista:

def add(request):
    return render(request,'add.html')

Tenemos que crea una página:

comments/templates/add.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
  <body>
    <h1>Page to add</h1>
  </body>
</html>

Podemos crear rutas en cada aplicación que luego registramos en el proyecto; vamos a crear un archivo llamado urls.py con el siguiente contenido:

comments/urls.py

from django.urls import path
from . import views

app_name='comments'
urlpatterns = [
    path('add', views.add, name='add')
]

Ahora, vamos a crear un formulario en HTML para crear un comentario:

templates/comments/add.html

<form method="post">
    <label for="id_text">Text:</label>
    <textarea name="text" cols="40" rows="10" class="form-input" required id="id_text">
</textarea>
    <input type="submit" value="Enviar">
</form>

Lucirá como:

Formulario básico en Django
Formulario básico en Django

El formulario es realmente sencillo, tenemos un formulario de tipo POST que apunta a la ruta de /comments/add que es la función de vista de llamada add(), la cual es la misma que se encarga de pintar este formulario.

Al enviar el formulario veremos un error como el siguiente:

Error 403
Error 403

Protección CSRF

El error anterior pasa ya que, Django para evitar el Cross-site request forgery o falsificación de petición en sitios cruzados emplea un token que genera e inyecta en los formularios; así que, para poder emplear este token, basta con emplear la siguiente directiva:

Indicamos el token:

<form method="post">
    {% csrf_token %}
    ***
    <input type="submit" value="Send">
</form>

Y con esto, la petición ya pasaría.

Determinar el tipo de petición desde la vista: GET y POST

Usualmente, cuando queremos cambiar el modelo de datos del proyecto, en este caso, crear un elemento, usamos una petición de tipo POST desde los formularios de HTML:

  • Las peticiones de tipo GET se usan para consultar datos.
  • Las peticiones de tipo POST se usan para cambiar el modelo de datos, entiéndase para crear, actualizar o eliminar.

Ahora, tenemos que recibir esta petición de tipo POST desde la función de vista; para eso, tenemos que manejar la petición o request del usuario, que es el parámetro que recibimos por defecto en las funciones de vistas; por ejemplo:

def add(request):
    return render(request,'comments/add.html')

Mediante:

request.method

Que nos devuelve el tipo de petición; GET o POST.

Con esto, podemos obtener todo lo que tenga que ver con la petición que hizo nuestro usuario desde la página web mediante el formulario; como los headers, tipo de petición y por supuesto, los datos del formulario.

Como la función de add() la vamos a usar para manejar ambos tipos de peticiones:

  • Petición de tipo GET, para pintar la página HTML mediante el template.
  • Petición de tipo POST, para procesar los datos del formulario.

Así que, para determinar el proceso que vamos a ejecutar según un tipo de petición, tenemos:

request.method == 'POST'

Y el código queda de la siguiente manera:

def add(request):

    if request.method == 'POST':
        print("Estamos en el post")
        return 

    return render(request,'comments/add.html')
  • Si la petición es de GET, pintamos el formulario mediante el template.
  • Si la petición es de tipo POST, imprimimos un mensaje por la terminal.

Si envías el formulario, por el navegador debes de ver una excepción de tipo ValueError que indica que no es una respuesta HTTP válida; ya que, no estamos devolviendo nada; pero, por la terminal, veremos el mensaje de:

Estamos en el post

De momento logramos enviar datos a nuestra función de vista con la cual la estamos imprimiendo por consola; pero, cómo podemos crear un registro en la base de datos; para eso, necesitamos conocer la manera en la cual podemos obtener estos datos desde el request.

- Andrés Cruz

In english

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.