LoginSignup
9
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@ekzemplaro(内田 雅智)

Django でテーブルを表示する

Last updated at Posted at 2018-12-24

Django で JSON, csv から取り込んだテーブルを表示する方法です。
プロジェクトを作成後、MariaDB への切り替え、スーパーユーザーの作成が完了した状態で、アプリを作成します。
そこまでの手順はこちら

Project の作成

Django で Hello World

MariaDB を使えるようにする

Django で MariaDB を使う

プロダクト名は、proj01
作成するアプリ名は、city とします。

データベースは
ユーザー django
パスワード tiger123
データベース django_city
で接続できるとします。

接続できることの確認方法

mysql -udjango -ptiger123 django_city


1) アプリ city の作成

```bash
python manage.py startapp city
  1. proj01/settings.py の編集
proj01/settings.py
（省略）
INSTALLED_APPS = [
    'home',
    'city',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]
（省略）
  1. proj01/urls.py の編集
proj01/urls.py
（省略）
urlpatterns = [
    path('', include('home.urls')),
    path('city/', include('city.urls')),
    path('admin/', admin.site.urls),
]
  1. テンプレートの作成
mkdir city/templates
mkdir city/templates/city
city/templates/city/city.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
{% load static %}
<script src="{% static 'city/city.js' %}"></script>
<link rel="stylesheet" href="{% static 'city/city.css' %}">
<title>city</title>
</head>
<body>
<h2>city template!</h2>
{{ hour }}時{{ minute }}分です。<br>
{{ message | safe }}<p />
<hr />
<span class='green'>green</span>
<span class='red'>red</span>
<span class='blue'>blue</span>
<hr />
<table>
<tr>
<th>key</th>
<th>name</th>
<th>population</th>
<th>date_mod</th>
</tr>
{% for item in data %}
<tr>
<td>{{item.key}}</td>
<td>{{item.name}}</td>
<td>{{item.population}}</td>
<td>{{item.date_mod}}</td>
</tr>
{% endfor %}
</table>
<hr />
<a href='../'>Return</a><p />
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
city.html<p />
Dec/23/2018 PM 20:01<p />
</body>
</html>
  1. 静的ファイルの作成
mkdir city/static
mkdir city/static/city
city/static/city/city.js
// -----------------------------------------------------------------------
//	city.js
//
//					Dec/23/2018
//
// -----------------------------------------------------------------------
jQuery (function ()
{
	jQuery("#outarea_aa").html ("*** city.js *** start *** Dec/23/2018 ***")

	jQuery("#outarea_hh").html ("*** city.js *** end *** Dec/23/2018 ***")
})

// -----------------------------------------------------------------------
city/static/city/city.css
/* -------------------------------------------------------------- */
/*
	city.css


				Dec/23/2018
*/
/* -------------------------------------------------------------- */
table.main,td,th {
table-layout:fixed;
border:1.5px #7e7e7e solid;
border-collapse: collapse;
height: 16px;
}

th {
	background: #c6c6c6;
}


table.tag {
border:0.5px green solid;
}

tr.cyan {
	background-color: #c7d7c7;
}


span.green{color: green}
span.red{color: red}
span.blue{color: blue}

/* -------------------------------------------------------------- */
  1. city/views.py の編集
city/views.py
from datetime import datetime

from django.http import HttpResponse
from django.shortcuts import render
from django.contrib.auth.decorators import login_required

from .models import City

def index(request):
	data = City.objects.all()
	message = ""
	message += 'city からのメッセージです。<br />'
	message += str(request.user.id) + '&nbsp;&nbsp;'
	message += request.user.username + '<p />'
	params = {
		'hour': datetime.now().hour,
		'minute': datetime.now().minute,
		'message': message,
		'data': data,
	}
	return render(request, 'city/city.html', params)
  1. city/urls.py の作成
city/urls.py
from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
]
  1. city/models.py の編集
city/models.py
from django.db import models

class City(models.Model):
	key = models.CharField(max_length=20)
	name = models.CharField(max_length=50)
	population = models.IntegerField()
	date_mod = models.CharField(max_length=20)
	def __unicode__(self):
		return self.key
  1. city/admin.py の編集

管理画面でデータを編集できるようにします。

city/admin.py
from django.contrib import admin
from city.models import City
 
admin.site.register(City)
  1. データベースにテーブルを作成
python manage.py makemigrations city
python manage.py migrate
  1. カスタムコマンドの作成
mkdir city/management
mkdir city/management/commands

次の４つのコマンドを作成します。

一覧表示
city/management/commands/list_cities.py

JSON からのインポート
city/management/commands/register_cities_json.py

csv からのインポート
city/management/commands/register_cities_csv.py

データの削除
city/management/commands/delete_all_cities.py

city/management/commands/list_cities.py
from django.core.management.base import BaseCommand
from django.utils import timezone
from city.models import City

class Command(BaseCommand):
	help = 'Displays current time'

	def handle(self, *args, **kwargs):
		time = timezone.now().strftime('%X')
		self.stdout.write("It's now %s" % time)
#
		for hh in City.objects.all():
			str_out = ""
			str_out += hh.key + "\t"
			str_out += hh.name + "\t"
			str_out += str(hh.population) + "\t"
			str_out += str(hh.date_mod) + "\t"
			print(str_out)
city/management/commands/register_cities_json.py
from django.core.management.base import BaseCommand
from django.utils import timezone
from city.models import City
import json

# --------------------------------------------------------------------
def file_to_str_proc(file_in):
	str_out = ""
	try:
		fp_in = open(file_in,encoding='utf-8')
		str_out = fp_in.read()
		fp_in.close()
	except Exception as ee:
		sys.stderr.write("*** error *** file_to_str_proc ***\n")
		sys.stderr.write(str (ee))
#
	return	str_out
# --------------------------------------------------------------------

file_json = "static/city/cities.json"

class Command(BaseCommand):
	help = 'Displays current time'

	def handle(self, *args, **kwargs):
		time = timezone.now().strftime('%X')
		self.stdout.write("It's now %s" % time)
#
		json_str = file_to_str_proc(file_json)
		dict_aa = json.loads(json_str)
		for key in sorted(dict_aa.keys()):
			unit = dict_aa[key]
			hh = City()
			hh.key = key
			hh.name = unit['name']
			hh.population = str(unit['population'])
			hh.date_mod = str(unit['date_mod'])
			hh.save()
#
# --------------------------------------------------------------------
city/management/commands/register_cities_csv.py
from django.core.management.base import BaseCommand
from django.utils import timezone
from city.models import City
import csv

file_csv = "static/city/cities.csv"

class Command(BaseCommand):
	help = 'Displays current time'

	def handle(self, *args, **kwargs):
		time = timezone.now().strftime('%X')
		self.stdout.write("It's now %s" % time)
#
		fp = open(file_csv, 'r')
		reader = csv.reader(fp)
		for rr in reader:
			print(rr)
			hh = City()
			hh.key = rr[0]
			hh.name = rr[1]
			hh.population = rr[2]
			hh.date_mod = rr[3]
			hh.save()
#
		fp.close()
city/management/commands/delete_all_cities.py
from django.core.management.base import BaseCommand
from django.utils import timezone
from city.models import City

class Command(BaseCommand):
	help = 'Displays current time'

	def handle(self, *args, **kwargs):
		time = timezone.now().strftime('%X')
		self.stdout.write("It's now %s" % time)
#
		hh = City.objects.all()
		hh.delete()
  1. データの用意
mkdir static
mkdir static/city
static/city/cities.json
{
  "t0921": {
    "name": "宇都宮",
    "population": 41295,
    "date_mod": "2003-8-12"
  },
  "t0922": {
    "name": "小山",
    "population": 38756,
    "date_mod": "2003-5-15"
  },
  "t0923": {
    "name": "佐野",
    "population": 71294,
    "date_mod": "2003-6-8"
  },
  "t0924": {
    "name": "足利",
    "population": 27138,
    "date_mod": "2003-7-21"
  },
  "t0925": {
    "name": "日光",
    "population": 74682,
    "date_mod": "2003-4-19"
  },
  "t0926": {
    "name": "下野",
    "population": 82951,
    "date_mod": "2003-10-14"
  },
  "t0927": {
    "name": "さくら",
    "population": 96823,
    "date_mod": "2003-5-24"
  },
  "t0928": {
    "name": "矢板",
    "population": 57926,
    "date_mod": "2003-2-12"
  },
  "t0929": {
    "name": "真岡",
    "population": 64187,
    "date_mod": "2003-11-14"
  },
  "t0930": {
    "name": "栃木",
    "population": 82354,
    "date_mod": "2003-7-04"
  },
  "t0931": {
    "name": "大田原",
    "population": 72681,
    "date_mod": "2003-9-17"
  },
  "t0932": {
    "name": "鹿沼",
    "population": 23749,
    "date_mod": "2003-7-20"
  },
  "t0933": {
    "name": "那須塩原",
    "population": 12759,
    "date_mod": "2003-3-12"
  },
  "t0934": {
    "name": "那須烏山",
    "population": 62531,
    "date_mod": "2003-8-17"
  }
}
static/city/cities.csv
t1271,千葉,59178,2003-9-21
t1272,勝浦,47215,2003-10-15
t1273,市原,83654,2003-6-14
t1274,流山,74251,2003-9-9
t1275,八千代,42516,2003-8-4
t1276,我孫子,35987,2003-1-21
t1277,鴨川,81256,2003-7-23
t1278,銚子,29374,2003-10-26
t1279,市川,87613,2003-2-17
  1. カスタムコマンドが出来ているのを確認
$ python manage.py help
（省略）
[city]
    delete_all_cities
    list_cities
    register_cities_csv
    register_cities_json
（省略）
  1. JSON からデータの取り込み
$ python manage.py register_cities_json
It's now 10:10:39
  1. データの表示
$ python manage.py list_cities
It's now 10:11:21
t0921	宇都宮	41295	2003-8-12	
t0922	小山	38756	2003-5-15	
t0923	佐野	71294	2003-6-8	
t0924	足利	27138	2003-7-21	
t0925	日光	74682	2003-4-19	
t0926	下野	82951	2003-10-14	
t0927	さくら	96823	2003-5-24	
t0928	矢板	57926	2003-2-12	
t0929	真岡	64187	2003-11-14	
t0930	栃木	82354	2003-7-04	
t0931	大田原	72681	2003-9-17	
t0932	鹿沼	23749	2003-7-20	
t0933	那須塩原	12759	2003-3-12	
t0934	那須烏山	62531	2003-8-17
  1. データの削除
$ python manage.py delete_all_cities
It's now 10:13:06
  1. csv からデータの取り込み
$ python manage.py register_cities_csv
It's now 10:13:49
['t1271', '千葉', '59178', '2003-9-21']
['t1272', '勝浦', '47215', '2003-10-15']
['t1273', '市原', '83654', '2003-6-14']
['t1274', '流山', '74251', '2003-9-9']
['t1275', '八千代', '42516', '2003-8-4']
['t1276', '我孫子', '35987', '2003-1-21']
['t1277', '鴨川', '81256', '2003-7-23']
['t1278', '銚子', '29374', '2003-10-26']
['t1279', '市川', '87613', '2003-2-17']
  1. データの表示
$ python manage.py list_cities
It's now 10:14:21
t1271	千葉	59178	2003-9-21	
t1272	勝浦	47215	2003-10-15	
t1273	市原	83654	2003-6-14	
t1274	流山	74251	2003-9-9	
t1275	八千代	42516	2003-8-4	
t1276	我孫子	35987	2003-1-21	
t1277	鴨川	81256	2003-7-23	
t1278	銚子	29374	2003-10-26	
t1279	市川	87613	2003-2-17
  1. 開発サーバーを起動
python manage.py runserver

ブラウザーで　http://127.0.0.1:8000/city/ にアクセス
city_dec2401.png

  1. 管理ページにログインしてデータの CRUD ができます。

http://127.0.0.1:8000/admin/city/city/
city_dec2402.png

city_dec2403.png

次のバージョンで確認しました。

$ python --version
Python 3.8.5
$ python -m django --version
3.1.1
9
15
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?