Exercice 5 Django Framework Corrigé S1

1. Créer le modèle Comment

Dans le fichier models.py, créez le modèle Comment avec les champs requis. Ce modèle est lié à un modèle Post que vous devez déjà avoir dans votre application.

models.py

from django.db import models
from django.contrib.auth.models import User

class Post(models.Model):
    title = models.CharField(max_length=255)
    content = models.TextField()
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    published_date = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.title

class Comment(models.Model):
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    content = models.TextField()
    post = models.ForeignKey(Post, related_name='comments', on_delete=models.CASCADE)
    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return f'Comment by {self.author} on {self.post}'

2. Créer le formulaire pour les commentaires

Dans forms.py, créez un formulaire simple pour le modèle Comment.

forms.py

from django import forms
from .models import Comment

class CommentForm(forms.ModelForm):
    class Meta:
        model = Comment
        fields = ['content']
        widgets = {
            'content': forms.Textarea(attrs={'rows': 3, 'placeholder': 'Écrire un commentaire...'}),
        }

3. Créer une vue pour gérer les soumissions AJAX

La vue recevra les données envoyées par AJAX, ajoutera un commentaire et retournera une réponse JSON.

views.py

from django.http import JsonResponse
from django.shortcuts import get_object_or_404
from django.contrib.auth.decorators import login_required
from django.views.decorators.http import require_POST
from .models import Post, Comment
from .forms import CommentForm

@require_POST
@login_required
def add_comment(request, post_id):
    post = get_object_or_404(Post, id=post_id)
    form = CommentForm(request.POST)
    if form.is_valid():
        comment = form.save(commit=False)
        comment.author = request.user
        comment.post = post
        comment.save()
        return JsonResponse({
            'author': comment.author.username,
            'content': comment.content,
            'created_at': comment.created_at.strftime('%Y-%m-%d %H:%M')
        })
    return JsonResponse({'error': 'Form invalid'}, status=400)

4. Ajouter l'URL pour la vue AJAX

Ajoutez l'URL correspondante dans le fichier urls.py de l'application.

urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('post/<int:post_id>/add_comment/', views.add_comment, name='add_comment'),
]

5. Créer le template pour le post et le formulaire de commentaire

Dans le template du post, affichez la liste des commentaires et le formulaire de commentaire. Vous utiliserez AJAX pour envoyer le formulaire sans recharger la page.

post_detail.html

<h2>{{ post.title }}</h2>
<p>{{ post.content }}</p>

<h3>Commentaires</h3>
<div id="comment-section">
    {% for comment in post.comments.all %}
    <div class="comment">
        <p><strong>{{ comment.author.username }}</strong> - {{ comment.created_at|date:"Y-m-d H:i" }}</p>
        <p>{{ comment.content }}</p>
    </div>
    {% endfor %}
</div>

<h3>Ajouter un commentaire</h3>
<form id="commentForm" method="POST" action="{% url 'add_comment' post.id %}">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Ajouter un commentaire</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $('#commentForm').submit(function(event){
        event.preventDefault();
        var formData = $(this).serialize();
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: formData,
            success: function(response) {
                $('#comment-section').append(`
                    <div class="comment">
                        <p><strong>${response.author}</strong> - ${response.created_at}</p>
                        <p>${response.content}</p>
                    </div>
                `);
                $('#commentForm')[0].reset();
            },
            error: function(response) {
                alert('Erreur lors de l\'ajout du commentaire.');
            }
        });
    });
</script>

6. Tester le système de commentaires

1. Lancez le serveur avec la commande :

python manage.py runserver

2. Accédez à un post dans le navigateur et soumettez un commentaire via le formulaire.

3. Vérifiez que le commentaire est ajouté à la liste dynamiquement sans rechargement de la page.