Djangoを使ってウェブアプリを作ります
ｈｔｍからviews.pyへデータを入力し、そのデータを出力してみます
- このページで作成されたDjango環境はここからダウンロード可能です
#1. ファイルを用意します
-
penguinフォルダのurls.pyに以下を追加します
penguin/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('exercise', views.exercise, name='exercise'),
path('', views.index, name='index'),
]
-
penguinフォルダのviews.pyに以下を記述します
penguin/views.py
from django.shortcuts import render
from datetime import datetime
def index(request):
return render(request, 'index.html')
def exercise(request):
text = 'テストです。'
try:
input_text = request.POST['input_text']
print(input_text)
text = input_text
except:
return render(request, 'exercise.html')
now = datetime.now();
context = {
'text': text,
'time': now,
}
return render(request, 'exercise.html', context)
-
staticフォルダに下記のようなcssを用意します
test.css
.a1 {
background-color: #98d98e;
height: 120px;
padding: 20px;
}
.b1 {
background-color: #e4de8a;
padding-left: 20px;
height: 100px;
text-align:left;
font-size: 18pt
}
.c1 {
background-color: #cee4ae;
height: 100px;
text-align:left;
font-size: 18pt;
padding: 20px;
font-family: Meiryo;
}
-
penguinフォルダのtemplatesサブフォルダに下記のようなhtmlを用意します
penguin/templates/exercise.html
{% load static %}
<html>
<head>
</head>
<body>
{% block extrahead %}
<link href="{% static 'test.css' %}" rel="stylesheet">
{% endblock %}
<div class='a1'>
<h1>テストページ</h1>
</div>
<div class='b1'>
<p>
時刻は：{{ time }}<br>入力されたテキストは：{{ text }}
</p>
</div>
<div class='c1'>
<form action="exercise" method="POST" >
{% csrf_token %}
<h3>入力テキスト</h3>
<textarea class="form-control" id="input_text" name="input_text" rows="1" required>{{ input_text }}</textarea>
<button type="submit" name="submit" value="送信" style="background-color: #bcbcff" >
<font size="5">送信</font>
</button>
</form>
</div>
</body>
</html>
#2. 稼働を確認します
-
python manage.py runserverを実行し、Djangoを起動します - ブラウザで
localhost:8000/exerciseへアクセスし、views.pyからのデータが表示されていることを確認します
