Djangoで簡単な投稿フォームを作成する
概要
DjangoのTemplateView
で「ユーザーが投稿できるフォーム画面」を実装したいと思います。
今回は、タイトルとメモを投稿するフォームになっています。(掲示板みたいな)
なお、環境はpython 3.7.3
、django 2.2
になります。
1. プロジェクト作成
1-1. まずはプロジェクトファイルを作りたいので、下記のコマンドでディレクトリを作成します。
$ mkdir simpleform
1-2. 次にsimpleform
というプロジェクトを作成します。最後の.
は正しいので、そのとおり実行してください。(ディレクトリはsimpleform
であることを確認してください)
~simpleform$ django-admin startproject formproject .
1-3. コマンドを実行するとsimpleform
ディレクトリには、下記のようにファイルが生成されます。
simpleform
├── formproject
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
└── manage.py
2. アプリケーションを作成
2-1. 新しくアプリケーションを作成したいので、下記のコマンドを実行します。今回は、formapp
というアプリケーションです。
$ python manage.py startapp formapp
実行したらディレクトリは下記のようになると思います。
ざっくり3つに分けると、simpleform
というプロジェクトファイル内に、①formapp
というアプリケーション、②formproject
というプロジェクト、③manage.py
ファイルになります。
simpleform
├── formapp
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
├── formproject
│ ├── __init__.py
│ ├── __pycache__
│ │ ├── __init__.cpython-37.pyc
│ │ └── settings.cpython-37.pyc
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
└── manage.py
2-2. formproject
のsettings.py
にあるINSTALLED_APPS
に、formapp
を追加します。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
#追加
'formapp',
]
2-3. form
と投稿一覧のlist
を表示できるようTEMPLATES
にも設定をします。DIRS
に[BASE_DIR, 'templates'
を追加します。
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
#追加
'DIRS': [BASE_DIR, 'templates'],
#ここまで
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
3. Formを表示させよう
3-1. まずは、formproject/urls.py
に下記のように追加してください。
from django.contrib import admin
#includeを追加
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
#追加
path('', include('formapp.urls')),
]
3-2. formapp
にurls.py
ファイルを新規作成して、下記のコードを追加してください。これで、https://サイト名.com/form
とアクセスすれば、form
が表示され、https://サイト名.com/list
とアクセスすれば、投稿一覧のlist
が表示されます。
from django.urls import path
from .views import FormClass, ListClass
urlpatterns = [
path('form/', FormClass.as_view(), name='form'),
path('list/', ListClass.as_view(), name='list'),
]
3-3. 後ほど作成するform.html
とlist.html
ファイルにアクセスできるよう、views.py
にコードを追加してください。
from django.views.generic import ListView, CreateView
from django.urls import reverse_lazy
from .models import PostModel
class ListClass(ListView):
template_name = 'list.html'
model = PostModel
class FormClass(CreateView):
template_name = 'form.html'
model = PostModel
fields = ('title','memo')
success_url = reverse_lazy('list')
3-4. views.py
に継承するモデルのmodels.py
は、下記のように作成してください。
from django.db import models
class PostModel(models.Model):
title = models.CharField(max_length=50)
memo = models.TextField()
3-5. templates
フォルダーをsimpleform
に新規作成してください。その中にform.html
とlist.html
を新規作成し、下記のようにしてください。
<form method="POST">
{% csrf_token %}
<p>タイトル:<input type="text" name="title"></p>
<p>メモ:<input type="text" name="memo"></p>
<input type="submit" value="投稿する">
</form>
<div class="container">
{% for post in object_list %}
<div class="post">
<p>タイトル:{{ post.title }}</p>
<p>メモ:{{ post.memo }}</p>
<p>--------------------</p>
</div>
{% endfor %}
<div class="form">
<a href="{% url 'form' %}">新規投稿</a>
</div>
</div>
ディレクトリは下記のようになるはずです。
simpleform
├── formapp
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── tests.py
│ ├── urls.py
│ └── views.py
├── formproject
│ ├── __init__.py
│ ├── __pycache__
│ │ ├── __init__.cpython-37.pyc
│ │ └── settings.cpython-37.pyc
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── manage.py
└── templates
├── form.html
└── list.html
3-6. 最後に下記のコマンドを実行してください。
$ python manage.py migrate
4. localhost起動
4-1. localhostを起動して、form
とlist
が表示されるか確認したいので、runserver
を実行します。
$ python manage.py runserver
4-2. http://localhost:8000/formをブラウザーで開くと、このようなフォームが表示されるはずです。
③最後に「新規投稿」を押して、同じように投稿してみると...
...しっかり投稿できています!
このように投稿画面と一覧表示が動作していれば、正しく実行できています。
以上
Author And Source
この問題について(Djangoで簡単な投稿フォームを作成する), 我々は、より多くの情報をここで見つけました https://qiita.com/frosty/items/52a6d41c721c77a18e81著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .