Djangoドキュメント作成3

今回は前回の記事の続きから説明します

前回の記事はこちら↓
https://qiita.com/rinto____/items/36b1053a6728dd72b9ee

検索フォーム

新規ファイル作成

bbsフォルダ直下にforms.pyファイルを作成

bbs/forms.pyの編集

bbs > forms.py

# formで使える便利な機能をインポート
from django import forms

# 検索する用のクラスを作成
class SearchForm(forms.Form):
    keyword = forms.CharField(label='検索', max_length=100)   #全て追加する

bbs/views.pyの編集

bbs > views.py

from .forms import SearchForm

#省略

def index(request):   #indexの中身を書き換える
    searchForm = SearchForm(request.GET) 
    if searchForm.is_valid():
        keyword = searchForm.cleaned_data['keyword']
        articles = Article.objects.filter(content__contains=keyword).order_by('-id')
    else:
        searchForm = SearchForm()
        articles = Article.objects.all().order_by('-id')

    context = {'message': "Welcome my BBS",
                'articles': articles,
                'searchForm': searchForm,   #この1行を追加する
                }
    return render(request, 'bbs/index.html', context)

index.htmlで表示

index.htmlの編集

index.html

{% block content %}
<h1>Hello Django</h1>
<p>{{ message }}</p>
{% if searchForm %}   <!-- if文を追加する -->
<form action="{% url 'bbs:index' %}" method="get">
  <div class="form-group">
    {{ searchForm }}
    <input type="submit" class="btn btn-outline-primary" value="OK">
    <a href="{% url 'bbs:index' %}" class="btn btn-outline-secondary">クリア</a>
  </div>
</form>
{% endif %}
<p>
  <a href='{% url "bbs:create" %}' class="btn btn-primary">新規作成</a>
</p>

edit,update,new関数作成

ルーティング

bbs/urls.pyの編集

bbs > urls.py

urlpatterns = [
  path('', views.index, name='index'),
  path('<int:id>', views.detail, name='detail'),
  path('new', views.new, name='new'),   #この1行を追加する
  path('create', views.create, name='create'),
  path('<int:id>/edit', views.edit, name='edit'),   #この1行を追加する
  path('<int:id>/update', views.update, name = 'update'),   #この1行を追加する
  path('<int:id>/delete', views.delete, name='delete'),
]

ビュー

動作確認のために直接テキストを返す

bbs/views.pyの編集

bbs > views.py

#下記の関数全てを追加する
def new(request):
    return HttpResponse('new')

def edit(request, id):
    return HttpResponse(str(id)+'をedit')

def update(request, id):
    return HttpResponse(str(id)+'をupdate')

確認

下記のURLで画面が表示されるならOK

http://localhost:8000/bbs/new
http://localhost:8000/bbs/1/edit
http://localhost:8000/bbs/1/update

フォームの作成

ライブラリインストール

フォームでBootstrapを使えるようにする

ターミナルで

pip install django-bootstrap4

エラーがでた場合pipではなくpip3を試してください

django-bootstrap4をDjangoで使うための設定

myapp/settings.pyの編集

myapp > settings.py

INSTALLED_APPS = [
    'bbs.apps.BbsConfig',
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "bootstrap4",   #この1行を追加
]

新規投稿フォーム

フォームの定義

bbs/forms.pyの編集

bbs > forms.py

from django import forms
from .models import Article  #この1行を追加する

#省略
#この下を追加する
class ArticleForm(forms.ModelForm):
    class Meta:
        model = Article
        fields = ('content', 'user_name')

データを保存、編集したい場合はModelFormを使用
Meta はDjangoフォームの特別なクラスで、フォームの情報を定義するために使用。フォームのバリデーションやデータベースへのデータ保存などが簡単にできる

ビュー

bbs/views.pyの編集

bbs > views.py

from django.shortcuts import render,get_object_or_404
from django.http import HttpResponse
from .models import Article
from .forms import SearchForm
from .forms import ArticleForm   #この1行を追加する

#省略

def new(request):   #new関数を編集する
    articleForm = ArticleForm()

    context = {
        'message': 'new Article',
        'articleForm':ArticleForm,
    }
    return render(request, 'bbs/new.html', context)

テンプレート

テンプレートファイル新規作成

bbs/templates/bbs/new.htmlを新規作成

bbs > templates > bbs > new.html

{% extends './base.html' %}   #全て追加する
{% load bootstrap4 %}

{% block content %}
<h1>{{ message }}</h1>

<form action="{% url 'bbs:create' %}" method="post" class="form">
  {% csrf_token %}
  {% bootstrap_form articleForm layout="horizontal" %}
  <button type="submit" class="btn btn-outline-primary">作成する</button>
<a href="{% url 'bbs:index' %}" class="btn btn-outline-secondary">戻る</a>
</form>
{% endblock %}

入力内容を確認

bbs/views.pyの編集

bbs > views.py

def create(request):
    if request.method == 'POST':   #ここからcontext前まで追加する
        articleForm = ArticleForm(request.POST)
        if articleForm.is_valid():
            article = articleForm.save()
            articles = Article.objects.all().order_by('-id')
    context = {'message': str(article.id)+"をArticleに追加",
                'article': article,
                }   #contextの中を書き換える
    return render(request, 'bbs/detail.html', context)   #bbs/indexからbbs/detailに変える

編集用フォーム

bbs/views.pyの編集

bbs > views.py

def edit(request, id):   #edit関数の中を編集
    article = get_object_or_404(Article, pk=id)
    # instance=article：フォームが既存の記事の情報を編集する際に使用
    articleForm = ArticleForm(instance=article)

    context = {
        'message': 'ページID:'+ str(id) +"を編集",
        'article': article,
        'articleForm': articleForm,
    }
    return render(request, 'bbs/edit.html', context)

テンプレート

templatesにedit.htmlファイル作成

bbs > templates > bbs > edit.html

{% extends './base.html' %}
{% load bootstrap4 %}

{% block content %}
<h1>{{ message }}</h1>
<form action='{% url "bbs:update" article.id %}' method="post" class="form">
  <!-- セキュリティーの為必須！ -->
  {% csrf_token %}
  {% bootstrap_form articleForm layout="horizontal" %}
  <button type="submit" class="btn btn-outline-primary">保存</button>
<a href="{% url 'bbs:detail' article.id %}" class="btn btn-outline-secondary">戻る</a>
</form>
{% endblock %}

ビュー

bbs/views.pyの編集

bbs > views.py

def update(request, id):   #update関数の中を編集する
    if request.method == 'POST':
        article = get_object_or_404(Article, pk=id)
        articleForm = ArticleForm(request.POST, instance=article)
        if articleForm.is_valid():
            article.save()

    context = {
        'message': 'ページID:'+ str(id) +"を更新",
        'article': article,
    }
    return render(request, 'bbs/detail.html', context)

確認

このような画面になり、全てのボタン、検索機能が動作していればOKです
また、詳細ページに遷移した後「一覧に戻る」「編集」「削除」が正常に作用できていればOKです

これでDjangoを用いて簡単なサイトをつくることができました。
長い記事でしたがここまでお付き合いいただきありがとうございました！