本棚アプリケーションの作成【4-9 CreateViewでブラウザ上からデータを作成しよう】
データをブラウザ上で作れるようにしよう
ここからCreateViewを作っていきます。
CreateViewはブラウザ上で入力されたデータがデータベースに反映（追加）されるという点において、少しコードの中身が変わります。
まずはurls.pyファイルの実装を進めていきます。
ListViewと同じような形で書いていきましょう。
bookproject/book/urls.py
from . import views
urlpatterns = [
path('book/', views.ListBookView.as_view()),
path('book/<int:pk>/detail/', views.DetailBookView.as_view())
]
を
from . import views
urlpatterns = [
path('book/', views.ListBookView.as_view()),
path('book/<int:pk>/detail/', views.DetailBookView.as_view()),
path('book/create/', views.CreateBookView.as_view()),
]
に編集
次にviews.pyファイルを編集します。
bookproject/book/views.py
from .models import Book
class ListBookView(ListView):
template_name = 'book/book_list.html'
model = Book
class DetailBookView(DetailView):
template_name = 'book/book_detail.html'
model = Book
を
from .models import Book
class ListBookView(ListView):
template_name = 'book/book_list.html'
model = Book
class DetailBookView(DetailView):
template_name = 'book/book_detail.html'
model = Book
class CreateBookView(CreateView):
template_name = 'book/book_create.html'
model = Book
に編集
htmlファイルの作成
book_create.htmlファイルを作成していきます。
(venv) $ touch book/templates/book/book_create.html
そして以下のコードを書き込んでいきます。
bookproject/book/templates/book/book_create.html
{% extends 'base.html' %}
{% block title %}書籍作成{% endblock %}
{% block content %}
<form method='POST'>
{{form.as_p}}
</form>
{% endblock content %}
これで実装が完了しました。
CreateViewで必要な設定
サーバーを立ち上げて、ブラウザでhttp://127.0.0.1:8000/book/create/にアクセス
(venv) $ python3 manage.py runserver
そしたらエラーがでます。これは指定したテーブルの中で、どの項目を使うか指定してください、ということを意味しています（fieldsを指定していないことによるエラー）
fieldsの追加
views.pyを編集していきます
bookproject/book/views.py
from .models import Book
class ListBookView(ListView):
template_name = 'book/book_list.html'
model = Book
class DetailBookView(DetailView):
template_name = 'book/book_detail.html'
model = Book
class CreateBookView(CreateView):
template_name = 'book/book_create.html'
model = Book
を
from .models import Book
class ListBookView(ListView):
template_name = 'book/book_list.html'
model = Book
class DetailBookView(DetailView):
template_name = 'book/book_detail.html'
model = Book
class CreateBookView(CreateView):
template_name = 'book/book_create.html'
model = Book
fields = ('title','text','category')
に編集。
これで再度ブラウザでhttp://127.0.0.1:8000/book/create/にアクセス
入力フォームが表示されました。
入力フォームにデータを入れた上で送信ボタンをクリックしてみましょう。
するとエラーがでます。
このエラーは、CSRF(クロスサイトリクエストフォージェリ)のトークンが発行されていないことを示します。
このエラーを解決するためにはcsrf_tokenのタグを埋め込む必要があります。
さっそくcsrf_tokenのタグを埋め込んでいきましょう。
bookproject/book/templates/book/book_create.html
{% extends 'base.html' %}
{% block title %}書籍作成{% endblock %}
{% block content %}
<form method='POST'>
{{form.as_p}}
</form>
{% endblock content %}
を
{% extends 'base.html' %}
{% block title %}書籍作成{% endblock %}
{% block content %}
{{form.as_p}}
</form>
{% endblock content %}
に編集。
これで再度ブラウザでhttp://127.0.0.1:8000/book/create/にアクセスして入力フォームにデータを入力して送信ボタンをクリックしましょう。
今度は、どのページに遷移させるかが指定されていないことを示すエラーです。
エラーを解決するためにURLを指定していきます。
bookproject/book/views.py
from .models import Book
class ListBookView(ListView):
template_name = 'book/book_list.html'
model = Book
class DetailBookView(DetailView):
template_name = 'book/book_detail.html'
model = Book
class CreateBookView(CreateView):
template_name = 'book/book_create.html'
model = Book
fields = ('title','text','category')
を
from .models import Book
class ListBookView(ListView):
template_name = 'book/book_list.html'
model = Book
class DetailBookView(DetailView):
template_name = 'book/book_detail.html'
model = Book
class CreateBookView(CreateView):
template_name = 'book/book_create.html'
model = Book
fields = ('title','text','category')
success_url = reverse_lazy('list-book')
に編集。
bookproject/book/urls.py
from . import views
urlpatterns = [
path('book/', views.ListBookView.as_view()),
path('book/<int:pk>/detail/', views.DetailBookView.as_view()),
path('book/create/', views.CreateBookView.as_view()),
]
を
from . import views
urlpatterns = [
path('book/', views.ListBookView.as_view(), name='list-book'),
path('book/<int:pk>/detail/', views.DetailBookView.as_view()),
path('book/create/', views.CreateBookView.as_view()),
]
に編集。
そしてもう一度編集します。
from . import views
urlpatterns = [
path('book/', views.ListBookView.as_view(), name='list-book'),
path('book/<int:pk>/detail/', views.DetailBookView.as_view()),
path('book/create/', views.CreateBookView.as_view()),
]
を
from . import views
urlpatterns = [
path('book/', views.ListBookView.as_view(), name='list-book'),
path('book/<int:pk>/detail/', views.DetailBookView.as_view(),name='detail-book'),
path('book/create/', views.CreateBookView.as_view(), name='create-book'),
]
に編集。
これでCreateViewの実装は完了です。
本棚アプリケーションの作成【4-8base.htmlファイルの作成】
同じレイアウトを使いまわす。
定形のhtmlを別のファイルとして作成しておき、その中身を別のhtmlファイル内でそのたびに呼び出していきます。
さっそくベースのhtmlを作成していきます。
なおbase.htmlのような、どのアプリでも使いまわすことができるファイルは、プロジェクト直下のディレクトリ(manage.pyファイルが入っているディレクトリの中)に作成するのが一般です。
以下のコマンドでtemplatesフォルダーを作成し、そのフォルダーの中にbase.htmlファイルを作成します。
(venv) $ mkdir templates
(venv) $ touch templates/base.html
そして作成したbase.htmlファイルにコードを書き込んでいきます。
bookproject/templates/base.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/
bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldv
KuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldv
KuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>{% block title %}{% endblock title %}| 本棚アプリ</title>
</head>
<body>
{% bloack content %}{% endblock content %}
</body>
</html>
これがベースになります。
次にbook_list.htmlファイルを編集します。
bookproject/book/templates/book/book_list.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/
bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldv
KuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldv
KuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>本棚アプリ</title>
</head>
<body>
{% for item in object_list %}
<div class="card">
<h5 class="card-header">{{ item.title }}</h5>
<div class="card-body">
<p class="card-text">{{ item.text }}</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
<h6 class="card-title">{{ item.category }}</h6>
</div>
</div>
{% endfor %}
</body>
</html>
を
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/
bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldv
KuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldv
KuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>本棚アプリ</title>
</head>
<body>
{% extends 'base.html' %}
{% block title %}書籍一覧{% endblock %}
{% bloack content %}
{% for item in object_list %}
<div class="card">
<h5 class="card-header">{{ item.title }}</h5>
<div class="card-body">
<p class="card-text">{{ item.text }}</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
<h6 class="card-title">{{ item.category }}</h6>
</div>
</div>
{% endfor %}
{% endblock content %}
</body>
</html>
に編集
次にbook_detail.htmlファイルを編集します。
bookproject/book/templates/book/book_detail.html
{{ object.category }}
{{ object.title }}
{{ object.text }}
を
{% extends 'base.html' %}
{% block title %}書籍詳細{% endblock %}
{% bloack content %}
<div class="card">
<h5 class="card-header">{{ object.title }}</h5>
<div class="card-body">
<p class="card-text">{{ object.text }}</p>
<a href="#" class="btn btn-primary">ボタン</a>
<h6 class="card-title">{{ object.category }}</h6>
</div>
</div>
{% endblock content %}
に編集。
本棚アプリケーションの作成【4-7Bootstrapで見た目を整えよう】
Bootstrapの使い方
次のURLからStarter trmplateのコードをコピーします。
コピーしたコードをbook_list.htmlに当てはめていきます。この時必要ないコードは削除して修正します。
bookproject/book/templates/book/book_list.html
{% for item in object_list %}
<ul>
<li>{{ item.title }}</li>
<li>{{ item.text }}</li>
<li>{{ item.category }}</li>
</ul>
{% endfor %}
を
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/
bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFl
dvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFl
dvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>本棚アプリ</title>
</head>
<body>
{% for item in object_list %}
<ul>
<li>{{ item.title }}</li>
<li>{{ item.text }}</li>
<li>{{ item.category }}</li>
</ul>
{% endfor %}
</body>
</html>
に編集
レイアウトの調整
今度はさっきのサイトからコードをコピーしてさらにbook_list.htmlを編集していきます。
bookproject/book/templates/book/book_list.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
ldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>本棚アプリ</title>
</head>
<body>
{% for item in object_list %}
<ul>
<li>{{ item.title }}</li>
<li>{{ item.text }}</li>
<li>{{ item.category }}</li>
</ul>
{% endfor %}
</body>
</html>
を
<!doctype html>
<html lang="en">
<head>
<!-- Required mate tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftj
DbrCEXSUloBoqy12QvZ6jIW3" crossorigin="anonymous">
<title>本棚アプリ</title>
</head>
<body>
{% for item in object_list %}
<div class="card">
<h5 class="card-header">{{ item.title }}</h5>>
<div class="card-body">
<p class="card-text">{{ item.text }}</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
<h6 class="card-title">{{ item.category }}</h6>>
</div>
</div>
{% endfor %}
</body>
</html>
そしてサーバーを立ち上げてhttp://127.0.0.1:8000/book/ にアクセスすると
(venv) $ python manage.py runserver
このように見た目がきれいになります。
本棚アプリケーションの作成【4-6詳細画面(DatailViewの作成)】
urls.pyファイルとviews.pyファイル
まずはurls.pyファイルを編集していきます
bookproject/book/urls.py
from . import views
urlpatterns = [
path('book/', views.ListBookView.as_view()),
]
を
from . import views
urlpatterns = [
path('book/', views.ListBookView.as_view()),
path('book/detail/', views.DetailBookView.as_view())
]
に編集
次にviews.pyファイルを編集していきます。
from .models import Book
class ListBookView(ListView):
template_name = 'book/book_list.html'
model = Book
を
from .models import Book
class ListBookView(ListView):
template_name = 'book/book_list.html'
model = Book
class DetailBookView(DetailView):
template_name = 'book/book_detail.html'
model = Book
に編集
次にhtmlファイルを作成していきます。)
(venv) $ touch book/templates/book/book_detail.html
そして作成したbook_detail.htmlファイルに以下のコードを書き込む
{{ object.category }}
{{ object.title }}
{{ object.text }}
そしてサーバーを立ち上げてhttp://127.0.0.1:8000/book/detail/にアクセス
(venv) $ python manage.py runserver
すると、エラーが出てしまいました。
エラーを修正する
エラーを修正するためにurls.pyファイルを編集します。
from . import views
urlpatterns = [
path('book/', views.ListBookView.as_view()),
path('book/detail/', views.DetailBookView.as_view())
]
を
from . import views
urlpatterns = [
path('book/', views.ListBookView.as_view()),
path('book/<int:pk>/detail/', views.DetailBookView.as_view())
]
に編集
idを確認する方法
サーバーを立ち上げて、http://127.0.0.1:8000/admin/にアクセスし、管理画面を表示させましょう。
（venv）$ python manage.py runserver
そしたらBooksをクリックし、料理本をクリックし、そのページのURLを見ると番号が入っています。
今回の画面では「2」が入っています。
ここで、ブラウザから作成した記事を読みだしてみましょう。
上の画像の記事idは２ですので、ブラウザで127.0.0.1:8000/book/2/detail/と入力します。すると次のような画面が表示されます。
先ほど管理画面で見たidが2のデータと同じことがわかります。
このように、idを使うことで個別のデータを表示させることができました。
本棚アプリケーションの作成【4-3 model(データベース)について】
modelを理解する
データベースの設定が書かれているファイルは「settings.py」ファイルです。
実際に「settings.py」ファイルの中の該当部分を見てみましょう。
bookproject/bookproject/settings.py
・・・省略・・・
DATABASES = {
'default': {
'NAME': BASE_DIR / 'db.sqlite3',
}
}
・・・省略・・・中身を見ると、sqkite3という記載がある通り、Djangoではデフォルトでsqlite3というデータベースマネジメントシステムを使えるように設定されていることがわかります。
Djangoでデータベースを扱う際に使うファイルが「models.py」です。models.pyファイルは、データベースを作成する上で用いられる設計図のようなものです。
実際に簡単なコードを書いてmodels.pyファイルの中身のイメージを膨らませていきましょう。
bookproject/book/models.py
を
class SampleModel(models.Model): #コード追加
title = models.CharField(max_length=100) #コード追加
number = models.IntegerField() #コード追加
に編集
次に「models.py」ファイルの中身を作成したら、データベース（今回の場合はsqlite3）にその内容を反映させる必要があります。
makemigrationsコマンドを実行していきます。
manage.pyのあるディレクトリで以下のコマンドを実行していきます。
(venv) $ python3 manage.py makemigrations
するとターミナルに次のような出力がされます
次にデータベースに反映させるために以下のコマンドを実行します
(venv) $ python3 manage.py migrate
管理画面でユーザーテーブルを確認する
管理画面上で確認するのですがそのためにはユーザー名とパスワードを入れてログインしなければいけません。
その為以下のコマンドを実行していきます。
(venv) $ python3 manage.py createsuperuser
ユーザー名とパスワードを入れて進めていきます。
サーバーを立ち上げて確認してみましょう。
(venv) $ python3 manage.py runserver
この状態では作成したアプリが表示されません。表示させるためにadmin.pyを編集していきます
bookproject/book/admin.py
を
に編集
これでサーバーを立ち上げて確認してみましょう
本棚アプリケーションの作成【4-5一覧画面(ListView)】
urls.pyファイルの作成
前回作成したurls.pyを編集してViews.pyファイルで定義するListBookViewというclassを呼びだす流れを作成していきます。
bookproject/book/urls.py
urlpatterns = []
を以下のように変更
from . import views
urlpatterms = [
path('book/', views.ListBookView.as_view()),
]
views.pyファイルの作成
次にviews.pyファイルにコードを書いていきます。
bookproject/book/viwes.py
を以下のように編集
from .models import Book
class ListBookView(ListView):
template_name = 'book/book_list.html'
model = Book
models.pyファイルの作成
models.pyファイルの作成を進めていきます。
まずはタイトル、内容、カテゴリーの３つの情報を扱えるようにしていきます。
bookproject/book/models.py
class SmpleModel(models.Model):
title = models.CharField(max_length=100)
number = models.IntegerFirld()
を以下のように変更
モデルの定義はclassによって行います。classの名前は今回はBookとします
そして、modelsモジュールの中のModelクラスを継承させるために、Bookの中でmodels.Modelというこーどを書いています。
またSampleModelの削除に伴い、admin.pyファイルで書いたこーども削除します。
bookproject/book/admin.py
を以下のように変更
Djangoで準備されているフィールド
ここで、Djangoで準備されているフィールドの一部を紹介します。
次のURLをブラウザに入力することによって、Djangoが準備しているフィールドを確認することができます。
「https:/docs.djangoproject.com/ja/3.2/ref/models/fields/」
Djangoで準備されているフィールドを3つ使用します
「CharField」「TextField」「CharField」
作成したファイルをデータベースに反映させるため、bookprojectディレクトリに移動した上で、mkemigrationsとmigrateコマンドを実行しましょう。次のコマンドを実行します。
(venv) $ python3 manage.py makemigrations
(venv) $ python3 manage.py migrate
ここでエラー、「データベースが見つかりません」と出てきたので一旦
(venv) $ python3 manage.py migrate --fake book zero
を実行して、再度migrateコマンドを実行
(venv) $ python3 manage.py migrate
bookproject/book/admin.py
を以下のように編集
(venv) $ python3 manage.py runserver
管理画面からいくつかデータを作成していきます。上の画像のBooksの右にあるAddをクリックして
上の画像の画面から以下のデータを入力して作成
①
Title:ビジネス本
Text:ビジネスのノウハウについて
Category:ビジネス
②
Title:料理本
Text:おいしい料理の作り方について
Category:生活
作成したら
上の画像のようになります。
この状態だとタイトルがBook objectとなっており、これではタイトルから中身を推測することができません。この記載を変更するためにmodels.pyファイルに一部こーどを追加します
bookproject/book/models.py
CATEGORY = *2
class Book(models.Model):
title = models.CharField(max_length=100)
text = models.TextField()
category = models.CharField(
max_length=100,
choices = CATEGORY
)
を
CATEGORY = *3
class Book(models.Model):
title = models.CharField(max_length=100)
text = models.TextField()
category = models.CharField(
max_length=100,
choices = CATEGORY
)
def __str__(self):
return self.title
に編集,再度サーバーを立ち上げ、管理画面に入ってデータを表示させましょう。
するとタイトルが表示されます。
htmlファイルを作成していきます。今回はbookアプリ直下にtemplatesディレクトリを作成し、そこにbookファイルを作成し、そこにhtmlファイルを作成していきます。
(venv) $ cd book
(venv) $ mkdir templates
(venv) $ cd templates
(venv) $ mkdir book
(venv) $ cd book
(venv) $ touch book_list.html
そして作成したhtmlファイルに以下のこーどを書きます
bookproject/book/templates/book/book_list.html
{% for item in object_list %}
{{ item.title }}
{{ item.text }}
{{ item.category }}
{% endfor %}
そしてサーバーを立ち上げて
(venv) $ python3 manage.py runserver
にアクセスします
データが順番に表示されていることが確認できました。
そしたらまたbook_list.htmlファイルを編集していきます
{% for item in object_list %}
{{ item.title }}
{{ item.text }}
{{ item.category }}
{% endfor %}
を
{% for item in object_list %}
<ul>
<li>{{ item.title }}</li>
<li>{{ item.text }}</li>
<li>{{ item.category }}</li>
</ul>
{% endfor %}
に編集
そして再度http://127.0.0.1:8000/book/にアクセス
すると、リストとしてデータが縦に表示されます。
本棚アプリケーションの作成【4-2初期設定】
仮想環境の構築と、Djangoのインストール
仮想環境を作成していきます。
まずは以下のコマンドで「project3」というディレクトリを作成します。
$ mkdir project3
次に作成した「project3」ディレクトリに移動して仮想環境を作成します。
以下のコマンドで「project3」ディレクトリに移動します
$ cd project3
次に以下のコマンドで仮想環境を作成します。
$ python3 -m venv venv
仮想環境を作成したら、次は仮想環境を立ち上げて、次にDjangoのインストールを進めていきます
以下のコマンドで仮想環境を立ち上げます
$ source venv/bin/activate
次に以下のコマンドでDjangoをインストールしていきます
(venv) $ pip install django==3.2
これで仮想環境の構築及びDjangoのインストールは完了です。
プロジェクトとアプリのベースの作成
以下のコマンドで「bookproject」名のプロジェクトを作成します
(venv) $ django-admin startproject bookproject
作成した「bookproject」に以下のコマンドで移動して「book」名のアプリを作成します
(venv) $ cd bookproject
(venv) $ python3 manage.py startapp book
bookproject/bookproject/urls.pyのコードを編集していく
from django.contrib import admin
from django.urls import path
urlpatterns = [
path('admin/', admin.site.urls),
]
を以下のように変更
from django.contrib import admin
from django.urls import path, include #コード追加
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('book.urls')), #コード追加
]
bookoproject/bookoproject/setting.pyのコードを編集していく
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
・・・省略・・・
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ,
を以下のように変更
INSTALLED_APPS = [
'book.apps.BookConfig', #コード追加
]
・・・省略・・・
最後にbookproject/bookディレクトリに移動して「urls.py」ファイルを作成します。
作成した「urls.py」ファイルの中身は
urlpatterns =
このように書き込みます。
これにて初期設定は完了です。
