宿題:コメントモデルを作ろう

Django Girls Tutorial: Extensions
Search…
Django Girls Tutorial: Extensions
LANGS
Tutorial Django Girls : Extensiones
آموزش جنگوگرلز: فعالیت‌های اضافه
Django Girls Tutorial: Extensions
장고걸스 튜토리얼 : 심화 (Django Girls Tutorial: Extensions)
Django Girls Tutorial: Extensions
ドメイン
Herokuにデプロイしよう（PythonAnywhereだけでなく）
README
宿題: ウェブサイトにもっと機能を追加しよう!
宿題:コメントモデルを作ろう
宿題: ウェブサイトをセキュアにする
Deploying to PythonAnywhere manually
Summary
宿題:コメントモデルを作ろう
現在、ポストモデルしかありません。 あなたの読者からいくつかのフィードバックを受け取り、彼らにコメントさせるのはどうでしょうか？
ブログにコメントモデルを作る
blog/models.pyを開き、このコードをファイルの最後に追加しましょう：
1
class Comment(models.Model):
2
    post = models.ForeignKey('blog.Post', on_delete=models.CASCADE, related_name='comments')
3
    author = models.CharField(max_length=200)
4
    text = models.TextField()
5
    created_date = models.DateTimeField(default=timezone.now)
6
    approved_comment = models.BooleanField(default=False)
7
​
8
    def approve(self):
9
        self.approved_comment = True
10
        self.save()
11
​
12
    def __str__(self):
13
        return self.text
Copied!
各フィールドタイプの意味を思い出す必要がある場合は、チュートリアルのDjangoモデルの章に戻ることができます。
拡張版チュートリアルでは、新しいフィールドタイプが登場します：
models.BooleanField - こちらはtrue/falseの値が入るフィールドです。
models.ForeignKeyのrelated_name引数は、ポストモデルの中からコメントにアクセスできるようにします。
データベースにモデルのテーブルを作る
今度は、コメントモデルをデータベースに追加します。 これを行うには、モデルを変更したことをDjangoに伝えなければなりません。 コマンドラインに python manage.py makemigrations blogと入力してください。 次のような出力が表示されます：
1
(myvenv) ~/djangogirls$ python manage.py makemigrations blog
2
Migrations for 'blog':
3
  0002_comment.py:
4
    - Create model Comment
Copied!
このコマンドがblog/migrations/ディレクトリに別のマイグレーションファイルを作成したことがわかります。 コマンドラインで python manage.py migrate blogとタイプして変更を適用する必要があります。 出力は次のようになります：
1
    (myvenv) ~/djangogirls$ python manage.py migrate blog
2
    Operations to perform:
3
      Apply all migrations: blog
4
    Running migrations:
5
      Rendering model states... DONE
6
      Applying blog.0002_comment... OK
Copied!
コメントモデルは今データベースに存在します！ 管理画面でアクセスできたら素敵ですよね？
管理画面にコメントモデルを登録する
管理画面にコメントモデルを登録するため、blog/admin.pyファイルに以下の行を追加してください：
1
admin.site.register(Comment)
Copied!
追加する位置は、この行の直下です：
1
admin.site.register(Post)
Copied!
コメントモデルをファイルの先頭でインポートすることも忘れないようにしてください：
1
from django.contrib import admin
2
from .models import Post, Comment
3
​
4
admin.site.register(Post)
5
admin.site.register(Comment)
Copied!
コマンドラインでpython manage.py runserverを入力し、あなたのブラウザで http://127.0.0.1:8000/admin/ に行くと、コメントリストにアクセスすることができ、コメントの追加と削除の機能が使えるようになります。新しいコメント機能で遊んでみましょう！
コメントを見えるようにする
blog/templates/blog/post_detail.htmlというファイルを開き、`
`タグの前に、以下の行を追加してください：
1
<hr>
2
{% for comment in post.comments.all %}
3
    <div class="comment">
4
        <div class="date">{{ comment.created_date }}</div>
5
        <strong>{{ comment.author }}</strong>
6
        <p>{{ comment.text|linebreaks }}</p>
7
    </div>
8
{% empty %}
9
    <p>No comments here yet :(</p>
10
{% endfor %}
Copied!
これで投稿の詳細ページでコメントを見ることができます。
でも、コメントをもう少し良く見せられるかもしれませんね。 static/css/blog.cssファイルの一番下にいくつかのCSSを追加しましょう：
1
.comment {
2
    margin: 20px 0px 20px 20px;
3
}
Copied!
投稿一覧ページでコメントについて、訪問者に知らせることもできます。 blog/templates/blog/post_list.htmlファイルを開き、次の行を追加します：
1
<a href="{% url 'post_detail' pk=post.pk %}">Comments: {{ post.comments.count }}</a>
Copied!
追加したら、テンプレートは次のようになります：
1
{% extends 'blog/base.html' %}
2
​
3
{% block content %}
4
    {% for post in posts %}
5
        <div class="post">
6
            <div class="date">
7
                {{ post.published_date }}
8
            </div>
9
            <h1><a href="{% url 'post_detail' pk=post.pk %}">{{ post.title }}</a></h1>
10
            <p>{{ post.text|linebreaksbr }}</p>
11
            <a href="{% url 'post_detail' pk=post.pk %}">Comments: {{ post.comments.count }}</a>
12
        </div>
13
    {% endfor %}
14
{% endblock content %}
Copied!
読者がコメントを書けるようにする
今は私たちのブログでコメントを見ることができますが、追加することはできません。 それを変えましょう！
blog/forms.pyを開き、以下の行をファイルの最後に追加します：
1
class CommentForm(forms.ModelForm):
2
​
3
    class Meta:
4
        model = Comment
5
        fields = ('author', 'text',)
Copied!
コメントモデルをインポートすることを忘れないでください。以下の行を変更して：
1
from .models import Post
Copied!
このようにします：
1
from .models import Post, Comment
Copied!
今度は、blog/templates/blog/post_detail.htmlを開き、`
`の前に以下の行を追加します：
1
<a class="btn btn-default" href="{% url 'add_comment_to_post' pk=post.pk %}">Add comment</a>
Copied!
もし投稿詳細ページに行くと、以下のエラーが表示されます：
NoReverseMatch
私たちはそれを修正する方法を知っています！ blog/urls.pyを開き、このパターンをurlpatternsに追加してください：
1
path('post/<int:pk>/comment/', views.add_comment_to_post, name='add_comment_to_post'),
Copied!
ページを更新したら、また違うエラーが出てきます！
AttributeError
こちらのエラーを修正するために、blog/views.pyに以下のビューを追加してください：
1
def add_comment_to_post(request, pk):
2
    post = get_object_or_404(Post, pk=pk)
3
    if request.method == "POST":
4
        form = CommentForm(request.POST)
5
        if form.is_valid():
6
            comment = form.save(commit=False)
7
            comment.post = post
8
            comment.save()
9
            return redirect('post_detail', pk=post.pk)
10
    else:
11
        form = CommentForm()
12
    return render(request, 'blog/add_comment_to_post.html', {'form': form})
Copied!
CommentFormをファイルの先頭でインポートすることを忘れないでください：
1
from .forms import PostForm, CommentForm
Copied!
今、詳細投稿ページで”Add Comment”というボタンが表示されています。
AddComment
しかし、そのボタンをクリックしたら、次のように表示されます：
TemplateDoesNotExist
表示されたエラーが伝えているように、テンプレートは存在していないので、blog/templates/blog/add_comment_to_post.htmlという新しいテンプレートを作り、以下のコードを追加してください：
1
{% extends 'blog/base.html' %}
2
​
3
{% block content %}
4
    <h1>New comment</h1>
5
    <form method="POST" class="post-form">{% csrf_token %}
6
        {{ form.as_p }}
7
        <button type="submit" class="save btn btn-default">Send</button>
8
    </form>
9
{% endblock %}
Copied!
わーい！ 今あなたの読者は、ブログの投稿をどう思っているかを知らせることができます！
コメントを管理する
すべてのコメントを表示する必要はありません。 ブログの所有者として、あなたはコメントを承認または削除する選択肢をおそらく望むでしょう。 それについて何かしましょう。
blog/templates/blog/post_detail.htmlを開き、以下の行を：
1
{% for comment in post.comments.all %}
2
    <div class="comment">
3
        <div class="date">{{ comment.created_date }}</div>
4
        <strong>{{ comment.author }}</strong>
5
        <p>{{ comment.text|linebreaks }}</p>
6
    </div>
7
{% empty %}
8
    <p>No comments here yet :(</p>
9
{% endfor %}
Copied!
このように変更してください：
1
{% for comment in post.comments.all %}
2
    {% if user.is_authenticated or comment.approved_comment %}
3
    <div class="comment">
4
        <div class="date">
5
            {{ comment.created_date }}
6
            {% if not comment.approved_comment %}
7
                <a class="btn btn-default" href="{% url 'comment_remove' pk=comment.pk %}"><span class="glyphicon glyphicon-remove"></span></a>
8
                <a class="btn btn-default" href="{% url 'comment_approve' pk=comment.pk %}"><span class="glyphicon glyphicon-ok"></span></a>
9
            {% endif %}
10
        </div>
11
        <strong>{{ comment.author }}</strong>
12
        <p>{{ comment.text|linebreaks }}</p>
13
    </div>
14
    {% endif %}
15
{% empty %}
16
    <p>No comments here yet :(</p>
17
{% endfor %}
Copied!
comment_removeとcomment_approveパターンに一致するURLがまだないので、 NoReverseMatchが表示されます。
こちらのエラーを修正するため、以下のURLパターンをblog/urls.pyに追加してください：
1
path('comment/<int:pk>/approve/', views.comment_approve, name='comment_approve'),
2
path('comment/<int:pk>/remove/', views.comment_remove, name='comment_remove'),
Copied!
さて、あなたにはAttributeErrorが見えています。このエラーを修正するために、以下のビューをblog/views.pyに追加してください：
1
@login_required
2
def comment_approve(request, pk):
3
    comment = get_object_or_404(Comment, pk=pk)
4
    comment.approve()
5
    return redirect('post_detail', pk=comment.post.pk)
6
​
7
@login_required
8
def comment_remove(request, pk):
9
    comment = get_object_or_404(Comment, pk=pk)
10
    comment.delete()
11
    return redirect('post_detail', pk=comment.post.pk)
Copied!
ファイルの先頭に Commentをインポートする必要があります：
1
from .models import Post, Comment
Copied!
すべて動作します！私たちにできる小さな微調整があります。投稿一覧ページ（の投稿の下）には、現在、投稿が受け取ったすべてのコメントの数が表示されます。承認された コメントの数を表示するように変更しましょう。
これを修正するには、 blog/templates/blog/post_list.htmlを開き、次の行を：
1
<a href="{% url 'post_detail' pk=post.pk %}">Comments: {{ post.comments.count }}</a>
Copied!
下記のように変更してください：
1
<a href="{% url 'post_detail' pk=post.pk %}">Comments: {{ post.approved_comments.count }}</a>
Copied!
最後に、このメソッドを blog/models.pyのPostモデルに追加してください：
1
def approved_comments(self):
2
    return self.comments.filter(approved_comment=True)
Copied!
これでコメント機能は終了です！ おめでとう！ :-)
宿題: ウェブサイトにもっと機能を追加しよう!
宿題: ウェブサイトをセキュアにする
Last modified 1yr ago
Copy link
Contents