Blog with Django (Codemy.com) - 34 Add Comment

Anyone can leave a comment!
If you want only authenticated users leave it, use JS

1. templates

Add Comment link

article_details.html

<a href=""> Add Comment </a>

create a new template add_comment.html
copy and paste the editing form at add_post.html

{% extends 'base.html' %}
{% block title %} New Comment {% endblock %}

{% block content %}

<h1> Add Comment  </h1>
<br/>

<div class="form-group">
    <form method="POST">
        {% csrf_token %}
        {{ form.as_p }}
        <br/>
        <button class="btn btn-secondary"> Add Comment </button>
    </form>
</div>

{% endblock %}

2. Views

from .models import Comment

3. urls

from .views import AddCommentView

 path('article/<int:pk>/comment', 
 	AddCommentView.as_view(), name="add_comment"),

4. add url into template

article_details.html

<a href="{% url 'add_comment' post.pk %}"> Add Comment </a>

we need to pass in post.pk so that urls.py knows where to go.

we still need to fix a few things. such as user doesn't need to select a post to comment.

5. forms.py

we need to create a form for comment, to get rid of select option

attrs={'class': 'form-control'}), form contorl is to be bootsrapified

from .models import Comment
	class CommentForm(forms.ModelForm):
    class Meta:
        model = Comment
        fields = ('name', 'body')

        widgets = {
            'name': forms.TextInput(attrs={'class': 'form-control', 'value': '', 'id': 'users_id'}),
            'body': forms.Textarea(attrs={'class': 'form-control'}),
        }

6. views

when using a form, we don't need to designate fields. fields is commented out

It's directing to home, but we want to comeback to current post. we will tackle this later.

from .forms import CommentForm

class AddCommentView(CreateView):
    model = Comment
    form_class = CommentForm
    template_name = 'add_comment.html'
    #fields = '__all__'
    success_url = reverse_lazy('home')
	

7. views

we want to associate the comment with post id.
pk in the url is passed in as kwargs. we can access pk and assign it

    def form_valid(self, form):
        form.instance.post_id = self.kwargs['pk']
        return super().form_valid(form)

8. templates

I added authenticated user's name automatically added using JS.

{% extends 'base.html' %}
{% block title %} New Comment {% endblock %}

{% block content %}

<h1> Add Comment  </h1>
<br/>

<div class="form-group">
    <form method="POST">
        {% csrf_token %}
   {% if user.is_authenticated %}
        {{ form.media }}
   {% endif %}
        {{ form.as_p }}
        <br/>
        <button class="btn btn-secondary"> Add Comment </button>
    </form>
</div>

<script>
    var name = "{{ user.username }}";
    document.getElementById("users_id").value
             = name;

</script>

{% endblock %}

9. views: redirecting to current page

add function under class

class AddCommentView(CreateView):
~
    def get_success_url(self):
        return reverse_lazy('article-detail', kwargs={'pk': self.kwargs['pk']})

10. Automatically added Username

We can associate username with the comment by configuring forms.py and template with JS.

If user is not logged in, we wouldn't know their username. We can set a form field but in that case, user can modify their name too.

I decided to hard code 'Anonymous User' into name.

forms.py

        widgets = {
            'name': forms.TextInput(attrs={'class': 'form-control', 'value': '', 'id': 'users_id', 'type':'hidden'}),

template

<div class="form-group">
    <form method="POST">
        {% csrf_token %}
   {% if user.is_authenticated %}
        {{ form.media }}
        {{ form.as_p }}

   {% else %}
         {{ form.as_p }}
   {% endif %}
        <br/>
        <button class="btn btn-secondary"> Add Comment </button>
    </form>
</div>
{% if user.is_authenticated %}
    <script>
        var name = "{{ user.username }}";
        document.getElementById("users_id").value
                 = name;

    </script>
{% else %}
    <script>
        var name = "Anonymous User";
        document.getElementById("users_id").value
                 = name;

    </script>

{% endif %}

In case anonymous user wants to leave a comment.