[Django]フォームの送信

### index.html
/hello/templates/hello/index.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>{{title}}</title>
	<link rel="stylesheet" type="text/css" href="{% static 'hello/css/styles.css' %}">
</head>
<body>
	<h1>{{title}}</h1>
	<p>{{msg}}</p>
	<form action="{% url 'form' %}" method="post">
		{% csrf_token %}
		<label for="msg">message: </label>
		<input id="msg" type="text" name="msg">
		<input type="submit" value="click">
	</form>
</body>
</html>

– urls.pyにnameの’form’を追加する
– {% csrf_token %}はCSRF対策

### views.py
/hello/views.py

def index(request):
	params = {
		'title':'Hello/Index',
		'msg':'what is your name?',
		'goto':'next',
	}
	return render(request, 'hello/index.html', params)

def form(request):
	msg = request.POST['msg']
	params = {
		'title':'Hello/Form',
		'msg':'hello ' + msg + '!',
	}
	return render(request, 'hello/index.html', params)

### urls.py
/hello/urls.py

urlpatterns = [ 
	path('', views.index, name='index'),
	path('form', views.form, name='form'),
]

### Bootstrap
– bootstrapを使ったデザイン

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>{{title}}</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossoorigin="anonymous">
</head>
<body class="container">
	<h1 class="display-4 text-primary">{{title}}</h1>
	<p class="h5 mt-4">{{msg}}</p>
	<form action="{% url 'form' %}" method="post">
		{% csrf_token %}
		<div class="form-group">
			<label for="msg">message: </label>
			<input id="msg" type="text" class="form-control" name="msg">
		</div>
		<input class="btn btn-primary" type="submit" value="click">
	</form>
</body>
</html>

ほう

[Django]静的ファイルの利用

### staticフォルダ
– 静的ファイルは各アプリケーションのstaticフォルダに配置する
– ここではstatic, hello, cssフォルダ配下にcssファイルを作成する

/hello/static/hello/css/styles.css

body {
	color: gray;
	font-size: 16pt;
}
h1 {
	color: red;
	opacity: 0.2;
	font-size: 60pt;
	margin-top: -20px;
	margin-bottom: 0px;
	text-align: right;
}
p {
	margin: 10px;
}
a {
	color: blue;
	text-decoration: none;
}

### index.html
/hello/templates/hello/index.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>{{title}}</title>
	<link rel="stylesheet" type="text/css" href="{% static 'hello/css/styles.css' %}">
</head>
<body>
	<h1>{{title}}</h1>
	<p>{{msg}}</p>
	<p><a href="{% url goto %}">{{goto}}</a></p>
</body>
</html>

– 静的ファイルをロードする際にはテンプレートファイルで{% load static %}と書く
– staticファイルの読み込みは{% static ‘hello/css/styles.css’ %}と書く

なんじゃこりゃ

[Django]複数ページの移動

### テンプレート側
/hello/templates/hello/index.html

<body>
	<h1>{{title}}</h1>
	<p>{{msg}}</p>
	<p><a href="{% url goto %}">{{goto}}</a></p>
</body>
</html>

– {% %}はテンプレートタグ
– {% url ${name} %}で、urls.pyで指定しているnameのパスに遷移する

### views.py
/hello/views.py

def index(request):
	params = {
		'title':'Hello/Index',
		'msg':'this is sample page.',
		'goto':'next',
	}
	return render(request, 'hello/index.html', params)

def next(request):
	params = {
		'title':'Hello/Index',
		'msg':'this is another page.',
		'goto':'index',
	}
	return render(request, 'hello/index.html', params)

### urls.py
/hello/urls.py

urlpatterns = [ 
	path('', views.index, name='index'),
	path('next', views.next, name='next'),
]

http://192.168.33.10:8000/hello/

http://192.168.33.10:8000/hello/next

{% %}のテンプレートタグがやや特殊な動きをします。

[Django]テンプレートに値を渡す

### テンプレート側
/hello/templates/hello/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>{{title}}</title>
</head>
<body>
	<h1>{{title}}</h1>
	<p>{{msg}}</p>
</body>
</html>

### views.pyの修正
/hello/views.py

def index(request):
	params = {
		'title':'Hello/Index',
		'msg':'this is sample page.',
	}
	return render(request, 'hello/index.html', params)

paramsはkeyとvalueのdictionary

[Django]テンプレートの利用

### アプリケーションの登録
– プロジェクトフォルダのsettings.pyにアプリケーションを登録する
– INSTALLED_APPSに登録してtemplatesフォルダを検索できるようにする
/django_app/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'hello', # 追加
]

### テンプレートフォルダの作成
/django_app/hello/templates/hello
– 他のアプリケーションと間違わないように、templatesの下にアプリケーション名のフォルダを作成する

### index.htmlを作成
/hello/templates/hello/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello</title>
</head>
<body>
	<h1>hello/index</h1>
	<p>This is sample page.</p>
</body>
</html>

/hello/urls.py

urlpatterns = [ 
	path('', views.index, name='index'),
]

/hello/views.py

from django.shortcuts import render
from django.http import HttpResponse

def index(request):
	return render(request, 'hello/index.html')

– render はテンプレートをレンダリングするのに使われる

http://192.168.33.10:8000/hello/

ほう、少し楽しくなってきました。