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}'
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...'}),
}
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)
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'),
]
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>
python manage.py runserver
Accédez à un post dans le navigateur et soumettez un commentaire via le formulaire.
Vérifiez que le commentaire est ajouté à la liste dynamiquement sans rechargement de la page.
Ajouter un commentaire
Veuillez vous connecter pour ajouter un commentaire.
Pas encore de commentaires.