新規作成ページの作成について
前回はブログのトップページを作成した。
この記事では、ブログ記事を新規作成する手順をまとめる。
現在のディレクトリ構成は以下の通り。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
デスクトップ └Blog ├Blog_app │ ├migrations │ ├__init__.py │ ├admin.py │ ├apps.py │ ├models.py │ ├tests.py │ ├views.py │ ├urls.py │ └templates │ └Blog_templates │ └index.html ├db.sqlite3 ├config │ ├・・・ │ └urls.py ├env_blog └manage.py |
前回：【Django】ブログのトップページを作成(htmlファイルを表示させる)
新規作成ページを作る手順
アプリケーションのurls.pyを編集
|
1 2 3 4 5 6 7 8 9 |
from django.urls import path from .views import index, create #[1] app_name = 'Blog_app' #[3] urlpatterns = [ path('', index, name='index'), #[2] path('index/', index, name='index'), #[2] path('create/', create, name='create'), #[2] ] |
[1]createを追記
from .views import index, create
ここではviews.pyからcreate関数をインポートするためにcreateを追加している。
今の段階ではviews.pyにはcreate関数はないので、次の手順(views.pyの編集)で作成する。
[2]利用者からのリクエストをURLに応じて呼び出すviews.pyの関数を指定
urls.pyのurlspatternsにおいて、path関数は利用者からのリクエストをURLに応じて振り分けを行っている。
第一引数は利用者が入力したURLパターンを指し、
第二引数はviews.pyのどの関数を呼び出すかを指定し、
第三引数(name)はURLパターンと呼び出すviews.pyの関数に名前を付けて、htmlファイルから呼び出せるようにしている。
今回は、トップページから新規作成ページを呼び出すために、逆に新規作成ページからトップページを呼び出すために第三引数(name)で名前を付けている。
path(”, index, name=’index’),
path(‘index/’, index, name=’index’),
以下のいずれかのURLをブラウザで検索した場合に、views.pyのindex関数を呼び出す2行に、name=’index’を追記して、html側から呼び出すようにした。
‘http://127.0.0.1:8000/’
‘http://127.0.0.1:8000/index/’
path(‘create/’, create, name=’create’),
この行では利用者からのリクエストを受けた際、create/があればviews.pyのcreate関数を呼びだすよう記述している。
[3]
変数app_nameにBlog_appを格納することでアプリケーション名を与えている。
これにより、htmlファイルでAタグによるリンクを作成することができる。この記事の最後の手順でindex.htmlの編集を行うが、トップページから新規作成ページへのリンクを作成するときに必要になる。
views.pyを編集
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
from django.shortcuts import render from .models import Blog #[1]追記 # Create your views here. def index(request): template_name = "blog_templates/index.html" return render(request, template_name) #[2]追記 def create(request): template_name = "blog_templates/create.html" if request.POST: title = request.POST["title"] content = request.POST["content"] object_ = Blog(title=title, content=content) object_.save() return render(request, template_name) |
[1]models.pyからBlogモデルをインポートする指示を追記
from .models import Blog
「 .models 」とあるが、ドット「 . 」は同じディレクトリにあるmodels.pyを指している。
[2]ブログ記事を新規作成するcreate関数を作成
template_name = “blog_templates/create.html”
template_nameには利用者側で表示・入力するためのページを記述したcreate.htmlファイルへのアドレスを保存している。
今の段階ではcreate.htmlはないが、次の手順でblog_templatesディレクトリ内に作成する。
if文の中では、利用者が入力した新しいブログ記事(タイトルとコンテンツ)をデータベースに保存している。
POSTメソッドは、HTTPプロトコルで用いられるメソッドの1つ。
HTTPプロトコルはWebアプリケーションと利用者が通信を行うために使われる決まり・ルールのようなもの。
そして、HTTPプロトコルというルールの下で、利用者からアプリケーションに対してデータの作成や更新などを行う時にPOSTメソッドが用いられる。
今回は新しくブログ記事を作成するので、タイトルとコンテンツを利用者が入力し、POSTメソッドを使ってアプリケーション側へ送る。views.pyのcreate関数ではPOSTメソッドが使われていた場合のみ、新しく作成されたブログ記事をデータベースへ保存する。
object_ = Blog(title=title, content=content)
object_.save()
ここではmodels.pyに記述されているBlogモデルを呼び出して、インスタンスとしてobject_という名前の変数を作成した。
Blogモデルの呼び出しの際、第一引数のtitleには上記のif文の中でrequestから取得したtitleを、第二引数のcontentにはif文の中でrequestから取得したcontentを格納している。
また、Blogモデルのインスタンスであるobject_は2行目の”object_.save()”でデータベースに保存している。
新規作成用のhtmlファイルを作成
blog_templatesディレクトリでcreate.htmlというファイルを作る。
※Windowsなら右クリックで新規作成してhtmlファイルとして保存しても良いし、コマンドプロンプトで以下のコマンドを入力して作成しても良い。
～デスクトップ/Blog/Blog_app/templates/blog_templates
|
1 |
type nul > create.html |
~デスクトップ/Blog/Blog_app/templates/blog_templates/create.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ブログ</title> </head> <body> <h1>新規作成</h1> <form method="POST"> {% csrf_token %} <div><input name="title" type="text" placeholder="タイトル"></div> <div><textarea name="content" placeholder="内容"></textarea></div> <button type="submit">登録</button> </form> </body> </html> |
{% csrf_token %}
セキュリティ上の理由から、POSTメソッドを用いる際は必ずこの内容を記述する。
<div><input name=”title” type=”text” placeholder=”タイトル”></div>
<div><textarea name=”content” type=”text” placeholder=”内容”>
</textarea></div> <button type=”submit”>登録</button>
1行目と2行目でタイトル、内容を入力するためのエリアを作成し、3行目で登録するためのボタンを設置している。
index.htmlを編集してトップページから新規作成ページへリンクを作る
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ブログ</title> </head> <body> <h1>ブログ</h1> <a href="{% url 'Blog_app:create' %}">新規作成</a> {#[1]#} </body> </html> |
[1]
トップページから新規作成ページへのリンクを作成。
Blog_appはurls.pyでapp_nameに格納したアプリケーション名
createはurls.pyのpath関数の第三引数(name)に格納した名前
<a href=”{% url ‘Blog_app:create’ %}”>新規作成</a>
開発用サーバーを起動して確認
開発用サーバーを起動して、以下のように表示されていればOK
開発用サーバーの起動は以下のコマンドで行う。
～デスクトップ/Blog/
|
1 |
python manage.py runserver |
■トップページ
～http://127.0.0.1:8000/Blog_app/
～http://127.0.0.1:8000/Blog_app/index/
■新規作成ページ
～http://127.0.0.1:8000/Blog_app/create/
新しい記事を作成
実際に新しい記事を作成する。
新規作成画面でタイトルと内容を記述して登録ボタンを押す。
登録ボタンを押した後にエラーが表示されなければOK。
今の段階では確認することができないので、次の記事でブログ記事一覧画面を作成して、ここで作成した記事の内容を確認する。
画像では1つ目の記事、1回目の投稿と入力しているが、ここで実際に入力する内容はなんでも良い。
また、いくつ記事を作成しても良い。
ディレクトリ構成の確認
現在のディレクトリ構成は以下の通り。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
デスクトップ └Blog ├Blog_app │ ├migrations │ ├__init__.py │ ├adming.py │ ├apps.py │ ├models.py │ ├tests.py │ ├views.py │ ├urls.py │ └templates │ └Blog_templates │ ├index.html │ └create.html #新規作成 ├db.sqlite3 ├config │ ├・・・ │ └urls.py ├env_blog └manage.py |
Django記事一覧
前回：【Django】ブログのトップページを作成(htmlファイルを表示させる)
コメント