Djangoを勉強してみる_モデルを学ぶ_その5(入門編)

django-339744_640.png

前回の続きで、Djangoについて学んでいきます。

今回もモデルについて勉強していきます。

Djangoの勉強内容は以下の本を参考にしています。

参考

Python Django3超入門 (日本語) 単行本 – 2020/6/13 掌田 津耶乃 (著)

モデル

コードは以前の記事を参考にしてください。

Djangoを勉強してみる(入門編)
Djangoを勉強してみる(入門編その2)
Djangoを勉強してみる_urlを学ぶ(入門編)
Djangoを勉強してみる_テンプレートを学ぶ(入門編)
Djangoを勉強してみる_テンプレートを学ぶ_その2(入門編)
Djangoを勉強してみる_フォームを学ぶ_その1(入門編)
Djangoを勉強してみる_フォームを学ぶ_その2(入門編)
Djangoを勉強してみる_フォームを学ぶ_その3(入門編)
Djangoを勉強してみる_モデルを学ぶ_その1(入門編)
Djangoを勉強してみる_モデルを学ぶ_その2(入門編)
Djangoを勉強してみる_モデルを学ぶ_その3(入門編)
Djangoを勉強してみる_モデルを学ぶ_その4(入門編)

今回の目的

前回はCRUDのCREATE(新規作成)画面を作成しました。

今回は作成したデータを更新するUPDATEについて勉強していこうと思います。

Updateを作ってみる

更新するためには、次のような作業を行います。

・更新するデータを選択する
・選択画面に移動する
・データを更新する
・データを保存する

それではやっていきます。

まずは、更新するためのurlを作成します。

1.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番のデータが編集の対象となります。

次にトップページに編集用のリンクを追加します。

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用のテンプレートを準備します。

3.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関数を作ります。

4.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を「テストデータ2編集」に変更して登録を押します。

今回の目的であるUpdateを作成することができました。

次回はデータを削除するDeleteついて勉強していこうと思います。

以上です。ありがとうございました。

P.S.

勉強を継続することが苦手ですか?

少し前からココナラというサービスで習慣化のテクニックについて教えるサービスを始めました。

もし、いつも3日坊主で終わってしまうという方や、ダイエットを続けたい、勉強したい、運動したいなど何か習慣化したいと思っている方がいましたら全力でサポートしますので、まずは覗いてみてください。

すでに何人かの方に実践してもらって効果が出ているという感想をいただいてます。

人生変わる?【習慣化の方法】を教えます 【残り1名】ダイエット、勉強、運動を続けることが苦手ですか?

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

30歳未経験からネットワークエンジニアに転職し、運用→構築→設計の仕事をやってます。色んな機器(Cisco、YAMAHA、Fortigate、PaloAlto)を触らせてもらいとても楽しい仕事です!

現在は派遣にて主にCiscoを中心としたネットワーク設計~構築をしております。

また、2023年より副業で個人事業主や小規模企業からのパソコン設定~ネットワーク作業の仕事を請け負っておりますので、もしお困りの方がいましたらお気軽にお問い合わせください。

●今までの作業履歴
- パソコンの新旧入れ替え
- 拠点間のインターネットVPN接続(YAMAHA-Fortigate)

コメント

コメントする

目次