CRUDをマスターしよう (2/6)
作成:2018-01-21 09:26
更新:2018-01-21 09:26
更新:2018-01-21 09:26
■index.htmlテンプレートを作成
では、実際にレコードの新規作成を行うサンプルを作ってみましょう。これは、前回まで使ってきたhelloアプリのindexアクションをそのまま再利用することにします。
まずはテンプレートの修正からです。hello/index.htmlを下のリスト欄のように修正して下さい。
今回は、indexページに新規レコード作成用のフォームと、レコードの一覧表示テーブルを用意してあります。フォームについては、
まずはテンプレートの修正からです。hello/index.htmlを下のリスト欄のように修正して下さい。
今回は、indexページに新規レコード作成用のフォームと、レコードの一覧表示テーブルを用意してあります。フォームについては、
<form action="/hello/" method="post">このように設定してあります。そのまま/helloに送信をするので、indexでGET/POST両方の処理を用意することになります。レコード作成のフォームは、以下の３つの入力フィールドを用意してあります。
<input id="name" type="text" name="name" value="{{current.name}}">
<input id="mail" type="text" name="mail" value="{{current.mail}}">
<input id="age" type="number" name="age" value="{{current.age}}">name、mail、ageの３つだけです。idやpub_dateは、自動で設定されるため、入力フィールドを用意する必要はありません。またvalueには、currentというオブジェクトのプロパティを出力するようにしてあります。currentに、作成したPersonインスタンスを設定しておけば、その値が各フィールドに表示されるというわけです。(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
{% load static %}
<html lang="ja">
<head>
<meta charset="utf-8">
<title>hello/index</title>
<link rel="stylesheet" type="text/css"
href="{% static 'hello/style.css' %}" />
</head>
<body>
<h1>hello/index</h1>
<p>{{msg}}</p>
<form action="/hello/" method="post">
{% csrf_token %}
<table>
<tr>
<th><label for="name">name: </label></th>
<td><input id="name" type="text" name="name"
value="{{current.name}}"></td>
</tr>
<tr>
<th><label for="mail">mail: </label></th>
<td><input id="mail" type="text" name="mail"
value="{{current.mail}}"></td>
</tr>
<tr>
<th><label for="age">age: </label></th>
<td><input id="age" type="number" name="age"
value="{{current.age}}"></td>
</tr>
<tr>
<th></th>
<td><input type="submit" value="OK"></td>
</tr>
</table>
</form>
<table width="90%">
<tr><th>id</th><th>name</th><th>mail</th><th>age</th><th>publish date</th></tr>
{% for obj in data %}
<tr>
<td>{{ obj.id }}</td>
<td>{{ obj.name }}</td>
<td>{{ obj.mail }}</td>
<td>{{ obj.age }}</td>
<td>{{ obj.pub_date }}</td>
</tr>
{% endfor %}
</table>
</body>
</html>
※関連コンテンツ