Creando un blog con django - parte 4

Después de una eternidad sin escribir y casi abandonar el tema de django, hoy por fin retomo el asunto. Hasta el momento tenemos los post clasificado por tags, pero un blog sin comentarios no es nada, así que hoy veremos como crear el formulario de comentarios.

En django existen dos formas de crear un formulario, una es crear cada campo manualmente y la otra es crearlos automáticamente basados en el modelo de datos.

Ya que casi siempre los formulario se usan para agregar/editar una tabla en una BD, y los campos del formulario reflejan los campos de la tabla, seria un desperdicio de tiempo crearlos manualmente.

Dejemos de hablar y empecemos a escribir código, editemos el archivo forms.py en el directorio de nuestra aplicación:

view plainprint?

1. from django.forms import ModelForm #1  
2. from blog.models import Comment #2  
3.   
4. class CommentForm(ModelForm): #3  
5.     """Formulario de comentarios"""  
6.     class Meta: #4  
7.         model = Comment #5  
8.         exclude = ("post","deleted") #6  

from django.forms import ModelForm #1
from blog.models import Comment #2

class CommentForm(ModelForm): #3
    """Formulario de comentarios"""
    class Meta: #4
        model = Comment #5
        exclude = ("post","deleted") #6

Hora de explicar lo que hemos hecho:

1. Importamos ModelForm, la base para los formularios basados en modelos de datos.
2. Importamos el modelo para el que se creará el formulario
3. Creamos una subclase de ModelForm.
4. En la clase Meta especificamos como crear el formulario
5. model: modelo en el que se basa el formulario.
6. exclude: campos a excluir, en este ejemplo post lo asignamos según el articulo desde el que se envió el comentario y deleted lo decidimos en la pagina de administración si es un comentario insultante. Si son muchos los campos a excluir podemos hacer lo contrario y especificar los que se deben incluir.

Ahora podemos incluir el formulario en la vista single:

view plainprint?

1. # Archivo views.py  
2. from blog.models import Post, Tag, Comment  
3. from blog.forms import CommentForm  
4. ...  
5. # la función recibe el numero capturado  
6. def single(request, id=0):  
7.     # recuperar post según id  
8.     post = Post.objects.get(id=int(id))  
9.     # Crear formulario  
10.     form = CommentForm()  
11.   
12.     return render_to_response("single.html", locals())  

# Archivo views.py
from blog.models import Post, Tag, Comment
from blog.forms import CommentForm
...
# la función recibe el numero capturado
def single(request, id=0):
    # recuperar post según id
    post = Post.objects.get(id=int(id))
    # Crear formulario
    form = CommentForm()

    return render_to_response("single.html", locals())

Para crear el formulario se instancia el objeto adecuado y en la vista se usa esta instancia para mostrar el formulario:

view plainprint?

1. {# plantilla single.html #}  
2. {% extends 'base.html' %}  
3.   
4. {% block main_content %}  
5.     {% include 'include/article.html' %}  
6.     {# necesitamos crear el tag form #}  
7.     <form action="" method="form">  
8.         {{ form }}  
9.     </form>  
10. {% endblock %}  

{# plantilla single.html #}
{% extends 'base.html' %}

{% block main_content %}
    {% include 'include/article.html' %}
    {# necesitamos crear el tag form #}
    <form action="" method="form">
        {{ form }}
    </form>
{% endblock %}

Con esto veremos el formulario en nuestro blog, lo llenamos y enviamos...

Wow un error. Django requiere que incluyamos protección contra ataques csrf, este tipo de ataque permite que alguien engañe a un usuario registrado para enviar datos a nuestro sitio usando un formulario en otra pagina web. Afortunadamente django tiene todo lo necesario para protegernos con unas cuantas lineas de código.

view plainprint?

1. # Archivo views.py  
2. from blog.models import Post, Tag, Comment  
3. from blog.forms import CommentForm  
4. # importamos el decorador  
5. from django.views.decorators.csrf import csrf_protect  
6. # importamos render  
7. from django.shortcuts import render  
8.   
9. ...  
10. # aplicamos el decorador función que recibe datos de formulario  
11. @csrf_protect  
12. def single(request, id=0):  
13.     # recuperar post según id  
14.     post = Post.objects.get(id=int(id))  
15.     form = CommentForm()  
16.       
17.     # usamos render en lugar de render_to_response  
18.     return render(request, "single.html", locals())  

# Archivo views.py
from blog.models import Post, Tag, Comment
from blog.forms import CommentForm
# importamos el decorador
from django.views.decorators.csrf import csrf_protect
# importamos render
from django.shortcuts import render

...
# aplicamos el decorador función que recibe datos de formulario
@csrf_protect
def single(request, id=0):
    # recuperar post según id
    post = Post.objects.get(id=int(id))
    form = CommentForm()
    
    # usamos render en lugar de render_to_response
    return render(request, "single.html", locals())

Ahora incluimos el tag {% csrf_token %} dentro del formulario en la plantilla single.html. Esto crea un elemento input oculto con un token único que se verifica al enviar datos al servidor, si este no coincide, se produce un error 403 (prohibido) y tenemos una app algo mas segura.

Ok, ya podemos enviar datos del formulario al servidor, hora debemos validarlos y guardarlos en la BD.

view plainprint?

1. # Archivo views.py  
2. @csrf_protect  
3. def single(request, id=0):  
4.     # recuperar post según id  
5.     post = Post.objects.get(id=int(id))  
6.     # recuperar comentarios de este post  
7.     comments = Comment.objects.filter(post=post)  
8.   
9.     # Si la petición es POST es porque enviaron el formulario  
10.     if request.method == "POST":  
11.         # Creamos una instancia del modelo Comment asignado el post actual  
12.         comment = Comment(post=post)  
13.         # Creamos una instancia del formulario con los datos recibidos  
14.         form = CommentForm(request.POST, instance=comment)  
15.           
16.         # Validamos los datos  
17.         if form.is_valid():  
18.             # Guardamos el comentario en la BD  
19.             form.save()  
20.             # Enviamos al usuario de nuevo al post  
21.             return HttpResponseRedirect("/post/{0}".format(slug))  
22.       
23.     # De lo contrario creamos un formulario vacío  
24.     else:  
25.         form = CommentForm()  
26.       
27.     return render(request, "single.html", locals())  

# Archivo views.py
@csrf_protect
def single(request, id=0):
    # recuperar post según id
    post = Post.objects.get(id=int(id))
    # recuperar comentarios de este post
    comments = Comment.objects.filter(post=post)

    # Si la petición es POST es porque enviaron el formulario
    if request.method == "POST":
        # Creamos una instancia del modelo Comment asignado el post actual
        comment = Comment(post=post)
        # Creamos una instancia del formulario con los datos recibidos
        form = CommentForm(request.POST, instance=comment)
        
        # Validamos los datos
        if form.is_valid():
            # Guardamos el comentario en la BD
            form.save()
            # Enviamos al usuario de nuevo al post
            return HttpResponseRedirect("/post/{0}".format(slug))
    
    # De lo contrario creamos un formulario vacío
    else:
        form = CommentForm()
    
    return render(request, "single.html", locals())

Podemos notar algunas cosas:

1. Validamos el formulario con el método is_valid que no definimos. ¿como es esto posible?; Al crear el modelo Comment especificamos el tipo de datos admitidos, el formulario "sabe" que si esto datos no corresponden, el formulario contiene errores.
2. Para guardar los datos usamos form.save y no comment.save. Esto se debe a que hay datos que no están incluidos en el formulario (post) pero si en la instancia comment y viceversa, por esto pasamos comment al formulario en el momento de crearlo.

Solo resta mostrar los comentarios, editamos la plantilla single.html:

view plainprint?

1. {# plantilla single.html #}  
2. {% extends 'base.html' %}  
3.   
4. {% block main_content %}  
5.     {% include 'include/article.html' %}  
6.     {% for comment in comments %}  
7.       <div class="comment">  
8.           <div class="user">{{ comment.name }} dijo:</div>  
9.           <div class="body">{{ comment.body }}</div>  
10.           <small>{{ comment.date|date:"d-m-Y" }}</small>  
11.       </div>  
12.     {% endfor %}  
13.     {# necesitamos crear el tag form #}  
14.     <form action="" method="form">  
15.         {{ form }}  
16.     </form>  
17. {% endblock %}  

{# plantilla single.html #}
{% extends 'base.html' %}

{% block main_content %}
    {% include 'include/article.html' %}
    {% for comment in comments %}
      <div class="comment">
          <div class="user">{{ comment.name }} dijo:</div>
          <div class="body">{{ comment.body }}</div>
          <small>{{ comment.date|date:"d-m-Y" }}</small>
      </div>
    {% endfor %}
    {# necesitamos crear el tag form #}
    <form action="" method="form">
        {{ form }}
    </form>
{% endblock %}

Con esto solo falta crear el sitio de administración para agregar post y moderar los comentarios y tendremos un blog terminado. Estén pendientes por la ultima parte de esta serie que seguro saldrá antes que se acabe el mundo este 21 de diciembre XD.