前回の続きで、Djangoについて学んでいきます。
今回もモデルについて勉強していきます。
Djangoの勉強内容は以下の本を参考にしています。
参考
Python Django3超入門 (日本語) 単行本 – 2020/6/13 掌田 津耶乃 (著)
コードは以前の記事を参考にしてください。
Djangoを勉強してみる（入門編）
Djangoを勉強してみる（入門編その２）
Djangoを勉強してみる_urlを学ぶ（入門編）
Djangoを勉強してみる_テンプレートを学ぶ（入門編）
Djangoを勉強してみる_テンプレートを学ぶ_その２（入門編）
Djangoを勉強してみる_フォームを学ぶ_その１（入門編）
Djangoを勉強してみる_フォームを学ぶ_その２（入門編）
Djangoを勉強してみる_フォームを学ぶ_その３（入門編）
Djangoを勉強してみる_モデルを学ぶ_その１（入門編）
Djangoを勉強してみる_モデルを学ぶ_その２（入門編）
Djangoを勉強してみる_モデルを学ぶ_その３（入門編）
Djangoを勉強してみる_モデルを学ぶ_その４（入門編）
今回の目的
前回はCRUDのCREATE（新規作成）画面を作成しました。
今回は作成したデータを更新するUPDATEについて勉強していこうと思います。
Updateを作ってみる
更新するためには、次のような作業を行います。
・更新するデータを選択する
・選択画面に移動する
・データを更新する
・データを保存する
それではやっていきます。
まずは、更新するためのurlを作成します。
１．urls.pyを編集
ファイル：sample_app>hello>urls.py
コード：
from django.urls import path
from . import views
urlpatterns = [
path('',views.index, name='index'),
path('create/', views.create, name='create'),
path('edit/<int:num>',views.edit, name='edit') #追加
更新するためのurlは「edit」を定義しました。
editのあとのint:numはID番号をURLに指定しています。
例えば「edit/2」の場合だと、ID番号2番のデータが編集の対象となります。
次にトップページに編集用のリンクを追加します。
２．index.htmlを編集
ファイル：sample_app>hello>templates>hello>index.html
コード：
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<title>{{ title }}</title>
</head>
<body class = "container">
<h1>{{ title }}</h1>
<p>{{ msg|safe }}</p>
<a href="{% url 'create' %}" class="btn btn-primary">新規作成</a>
<table class="table">
<tr>
<th>ID</th>
<th>NAME</th>
<th>GENDER</th>
<th>MAIL</th>
<th>AGE</th>
<th>BIRTHDAY</th>
</tr>
{% for item in data %}
<tr>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{% if item.gender == False %}male{% endif %}
{% if item.gender == True %}female{% endif %}</td>
<td>{{ item.mail }}</td>
<td>{{ item.age }}</td>
<td>{{ item.birthday }}</td>
<td><a href="{% url 'edit' %}">編集</a></td> #追加
</tr>
{% endfor %}
</table>
</body>
</html>
テーブルの一番最後に「編集」というリンクを追加しました。
リンク名のあとに「item.id」とつけることによって、edit/のあとにID番号を付けてアクセスすることができます。
続いてedit用のテンプレートを準備します。
３．edit.htmlを新規作成
ファイル：sample_app>hello>templates>hello>edit.html
コード：
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<title>{{ title }}</title>
</head>
<body class = "container">
<h1>{{ title }}</h1>
<form action="{% url 'create' %}" method=post>
{% csrf_token %}
<table class="table">
<tr><th><td>
{{ form.as_table }}
</td></th></tr>
</table>
<input type="submit" value="登録" class="btn btn-primary">
</form>
</body>
</html>
コードの中身はcreate.htmlとほぼ同じです。
違うのは、form actionのURLの先がeditになっているとロコだけです。
<form action=”{% url ‘edit’ id %}” method=post>
最後にedit関数を作ります。
４．views.pyを編集
ファイル：sample_app>hello>views.py
コード：
from django.shortcuts import render
from django.http import HttpResponse
from django.shortcuts import redirect
from .models import Friend
#from .forms import HelloForm
from .forms import FriendForm
def index(request):
data = Friend.objects.all()
params = {
'title': 'Hello World!!',
'msg': 'ALL Friends',
'data': data,
}
return render(request, 'hello/index.html', params)
#create-new
def create(request):
if (request.method == 'POST'):
obj = Friend()
friend = FriendForm(request.POST, instance=obj)
friend.save()
return redirect(to='/hello')
params = {
'title': '新規作成画面',
'form': FriendForm(),
}
return render(request, 'hello/create.html', params)
#以下を追加----
#Edit関数
def edit(request, num):
obj = Friend.objects.get(id=num)
if (request.method == "POST"):
friend = FriendForm(request.POST, instance=obj)
friend.save()
return redirect(to='/hello')
paramas = {
'title': '編集画面',
'id': num,
'form':FriendForm(instance=obj),
}
return render(request, 'hello/edit.html', paramas)
edit関数を追加しています。
コードの詳細としては、まずモデルのFriendクラスのid番号のデータでインスタンスを作成しています。
その後、POSTメソッドで送られてきた場合に、フォームのFriendFormクラスに取得したデータをfriendインスタンスとして作成して、保存しています。
pramasのところではすでに存在しているデータを埋めて表示させるため、FriendFormインスタンスに該当のID番号のデータを取得しています。
更新時は以下のような流れになります。
更新時のアクセスの流れ
・index.htmlの編集ボタンを押す
・urls.pyのpath(edit/num)に移動し、次のviews.pyのedit関数へ行く
・pathのnumの値にedit関数の引数numが渡される。
・edit関数が実行される
以上で設定が終わったので、動作確認してみます。
動作確認
python manage.py runserver
ブラウザで以下にアクセスします。
http://localhost:8000/helloテーブルの一番右のカラムに「編集」リンクが追加されています。
ID2番の編集リンクを押してみます。
ちゃんと編集画面へ遷移しました。
最後に、Nameを「テストデータ２編集」に変更して登録を押します。
今回の目的であるUpdateを作成することができました。
次回はデータを削除するDeleteついて勉強していこうと思います。
以上です。ありがとうございました。
P.S.
勉強を継続することが苦手ですか？
少し前からココナラというサービスで習慣化のテクニックについて教えるサービスを始めました。
もし、いつも３日坊主で終わってしまうという方や、ダイエットを続けたい、勉強したい、運動したいなど何か習慣化したいと思っている方がいましたら全力でサポートしますので、まずは覗いてみてください。
すでに何人かの方に実践してもらって効果が出ているという感想をいただいてます。
コメント