「forms.pyの作りかたは分かったけど、どうやって値を保存して表示させればいいの?」
それは、models.pyとviews.pyを上手く使うとできるんだよね。

今回は『HelloWorld』を保存するアプリを作っていこう。
さて、じゃあどうやってforms.pyで値を保存するのか話していこうか。

forms.pyで値を保存するにはmodels.py views.pyが必要

forms.pyから値を保存させたいなら、大きく分けて2つのことが必要だよ。

  1. forms.pyとmodels.pyをつなげる
  2. forms.pyとviews.pyをつなげる

forms.pyとmodels.pyをつなげる--データを保存する場所の確保

『forms.MedelForm』ってやつが必要。

これは、forms.py⇔models.pyをつなげる役割をしてるんだよね。
forms.MedelFormで簡単にデータベースへ保存する準備ができる。

forms.pyとviews.pyをつなげる--データを秘密の方法で取得

forms.pyとviews.pyをつなげること。
理由は、POSTっていうURLには内緒の方法でデータを送信していくから。

処理の流れとしては下記の感じ。

  1. 『Hello World』って入力
  2. forms.pyにデータを送信(POSTで送信)
  3. views.pyで保存する作業をする
  4. models.pyに保存される

forms.pyを使ったWebアプリをつくろう【7ステップでOK】

  1. settings.pyを設定する
  2. models.pyを書く
  3. forms.pyとmodels.pyをつなげる
  4. views.pyで保存する処理を書く
  5. urls.pyとviews.pyをつなげる
  6. index.htmlでFormを表示させる
  7. 実際に『HelloWorld』を入力→保存してみる

さて、説明していくけど最初にプロジェクトとアプリを作成しておいてね。

Project名formproject
App名formapp

Appはmanage.pyがあるフォルダに移動してコマンドプロンプトで『python manage.py startapp formapp』

Projectをどうやって作るか分からないって場合は下記の記事を参照で。

【Webアプリをつくる】1.settings.pyを設定する

formprojectのsettings.pyを始めに設定しちゃおうか。

settings.pyの『INSTALLED_APPS』に『'formapp.apps.FormappConfig',』を入力しよう
これは、formprojectとformappをつなげるためのもの。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'formapp.apps.FormappConfig',
]

まあ、簡単にいうと「formapp→apps.py内のFormappConfigを見てね」って教えてる感じ。

【Webアプリをつくる】2.models.pyを書く

from django.db import models


class Contents(models.Model):
    content = models.CharField(max_length=20)

    def __str__(self):
        return self.content

次はmodels.pyなんだけど上記は『Contents』っていうデータを保存する箱(テーブル)を作って、中に『content』という道具(フィールド)を入れるイメージだね。

注意してほしいのがdef __str__ ~ってやつ。
def以降をコードに書かないとデータを保存したときに上手くデータが保存されなくなるから気を付けて。

CharField文字列型にデータを保存する
max_lengthデータを保存できる文字の長さ

models.pyについてもっと知りたければ下記記事を参考に。

【Webアプリをつくる】3.forms.pyとmodels.pyをつなげる

次にforms.pyを書いてmodels.pyとつなげてみよう。
models.pyとつなげることで、Formで入力された値がデータベースに保存されるようになるよ。

from django import forms
from .models import Contents


class ContentsForm(forms.ModelForm):
    content = forms.CharField(max_length=20)

    class Meta:
        model = Contents
        fields = ("content",)

6行目はmodels.pyのときと同じように書けばOK、modelsがformsに変わっただけね。

class Meta以降でさっき作った『Contents』っていう箱を取り込んでるよ。
Metaがないとデータベースに保存されなくなるから気を付けてね。

forms.pyについてもっと知りたいなら下記記事を参考に。

【Webアプリをつくる】4.views.pyで保存する処理を書く

from django.shortcuts import render, redirect
from .forms import ContentsForm
from .models import Contents


def home(request):
    model = Contents.objects.values()
    form = ContentsForm(request.POST)
    if request.method == 'POST':
        if form.is_valid():
            form.save()
            return redirect("home")
        else:
            return redirect("home")
    else:
        form = ContentsForm()
    return render(request, 'formapp/index.html', {'form': form, 'model': model})

そしたら、views.pyでFormに入力された情報を保存する流れを書いていくよ。

注目してほしいのが8行目~11行目。
ここでformに入力された値が正しいか判断してPOSTっていうURLには内緒の方法でデータを通信してるんだよね。

簡単にいえば下記のような感じ。

  1. もしPOSTで送信されていたら
  2. Formの値が正しいか確認して
  3. 正しければ保存してね

最後の17行目は、あとでindex.htmlを作るときに使うから安心して。

【Webアプリをつくる】5.urls.pyとviews.pyをつなげる

次は、urls.pyとviews.pyをつなげよう。

つなげることで、任意のURLを入力したらviews.pyの処理ができるようになるよ。
ちなみに、urls.pyは2種類あってprojectとappで1つずつ

まずは、projectのurls.pyを書いていこう、下記コードを入力してね。

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include("formapp.urls")),
]

次に、appのurls.pyを書いていこう、views.pyのhomeとつなげてるよ。
トップページにいくと、views.pyの中にあるhome内の処理が発生する感じ。

  1. formappフォルダ内に『urls.py』ファイルを作成
  2. urls.pyファイルに下記コードを入力
  3. from django.urls import path
    from . import views
    
    urlpatterns = [
        path('', views.home, name='home'),
    ]

【Webアプリをつくる】6.index.htmlでFormを表示させる

さあ、index.htmlでFormを表示させる部分を作ろうか。
作るのは、Form部分と保存したデータを表示させる部分ね。

まず、formapp内に『templates』フォルダ→『formapp』フォルダ→『index.html』ファイルを作成。

formapp/
     ├ templates/
     │        └ formapp/
     │               └index.html

できたらindex.html内に下記コードを入力しよう。

<form method="post">
  {% csrf_token %}
  {{ form }}
  <button type="submit" name="submit">送信</button>
</form>

{% for model in model %}
  <p>{{ model.content }}</p>
{% endfor %}

Formで必要なのは、5行目までだね。
4行目の送信ボタンを押すことでPOSTとして送信されるようになる。

『{% csrf_token %}』はサイバー攻撃から自動で守ってくれる機能、このコードがないとFormは全てエラーになるから気を付けて。

ちなみに、さっきviews.pyの最終行であった『form』『model』はこのindex.htmlで使ってるよ。
それと、7~9行目はデータベースに保存されたデータを表示する部分。

【Webアプリをつくる】7.実際に『HelloWorld』を入力→保存してみる

そしたら最後、実際に『HelloWorld』を入力→保存してみよう

  1. コマンドプロンプトでmanage.pyがあるフォルダまで移動
  2. 下記の3コードを上から順番に入力
  3. python manage.py makemigrations
    
    python manage.py migrate
    
    python manage.py runserver
    
  4. http://127.0.0.1:8000/にアクセス
  5. Formが表示されるので『HelloWorld』を入力
  6. Formの下に『HelloWorld』が表示されてれば成功

content form

まとめ: 慣れれば10分でつくれるようになる

このForm処理ができるようになると、Formを作るときに応用が簡単だから忘れたらまた見にこよう。
FormができればWebアプリのバリエーションがグッとあがる

まあ、慣れればこの記事のコードは10分ほどで作れるようになるし。
コピペじゃ身につかないから、何回も模写して練習するのもいいかもね。

人気記事【必読】"見やすく修正しやすいコード"につながる本『リーダブルコード』