Raspberry Pi 3 & Python 開発ブログ☆彡

Raspberry Pi 3の使い方、設定をわかりやすく解説。Raspberry Pi3 Model B(Element14版)、Raspbian 8.0(NOOBS Ver1.9.2)を使用して開発中。

【スポンサーリンク】

Djangoの使い方 (その2)

【スポンサーリンク】

前回でプロジェクトの作成ができましたので、今回は実際にコードを実装してWebアプリを作成して行きたいと思います。

おおまかに説明すると以下のような流れで作成します。

1. データのモデル作成 ⇒ models.pyの編集

2. データモデルからWeb表示用のデータ作成 ⇒ view.pyの編集

3. Viewで作成したデータを使用してhtmlの作成 ⇒ htmlファイル の編集

4. URLの設定 ⇒ urls.pyの編集

それではひとつひとつ作成してきましょう。

Modelの作成 (djtest→webpi→models.pyファイルの編集)

まずはデータのモデルを作成します。djangoモジュールのmodels.Modelを継承したPidataクラスを作ります(pidata1~5の値をWebアプリのテーブルに表示します)。このPidataクラスのデータ構造がそのままデータベースに登録されます。
(データベースへの登録は後ほど行いますが、manage.py migrateコマンドで、自動的にdjangoシステムが行ってくれますので非常に楽です。)

models.pyを下記のように編集します。

from django.db import models

class PiData(models.Model):

    pidata1 = models.CharField('pi1', max_length=255)
    pidata2 = models.CharField('pi2', max_length=255)
    pidata3 = models.CharField('pi3', max_length=255)
    pidata4 = models.CharField('pi4', max_length=255)
    pidata5 = models.CharField('pi5', max_length=255)

Viewの作成(djtest→webpi→views.pyファイルの編集)

上記のmodels.pyで作成したデータモデルから、Webページの表示に必要なデータを抽出、生成します。データベースからデータを取得して、そのデータを使用するhtmlファイルのパスを指定します。
※htmlのパスはブラウザに入力するURLとは全く関係ありません。

views.pyを下記のように編集します。まず、先ほど作成したPiDataクラスをimportします。SQL文のような感じでデータベースからデータを取得し、pidatasという変数に格納しています。そのデータを'pidatas'という変数名で、webpi/pidata.htmlに渡します。
htmlファイルはこの後作成します。

from django.shortcuts import render
from webpi.models import PiData

def pidata_list(request):

    pidatas = PiData.objects.all().order_by('id')
    return render(request,
                  'webpi/pidata.html',    
                  {'pidatas': pidatas})  

HTMLファイルの作成

HTMLファイルはアプリフォルダ(webpi)の下にtemplatesという名前のフォルダを作成し、その中に作成していきます。先ほど作成したview.pyでは、templates以下のパスを指定すればOKです。
(templatesフォルダのパスはdjtest→djtest→settings.pyの中に記載があり、デフォルトでアプリフォルダの中に作成するように指定されています。)

・djtest→webpi→templates(新規作成)→base.html(新規作成)
・djtest→webpi→templates(新規作成)→webpi(新規作成)→pidata.html(新規作成)

HTMLファイルは共通で使用するbase.html(テンプレート)をまず作成します。見た目をきれいにするbootstrapのjavascriptは、全てのページで使いますので、このbase.htmlで指定しておきます。

下記のURLからbootstrapをダウンロードし、解凍します。

http://getbootstrap.com/

解凍ファイル(css、fonts、jsフォルダ)をdjtest→static(新規作成)に保存します(staticフォルダのパスは前回ブログのsettings.pyで設定済みです)。

base.htmlファイルを新規作成し、下記のコードを記載します。

※文字コードは必ずUTF-8を使用してください。

{% load staticfiles %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}">
<head>
<meta charset="UTF-8">
<title>{% block title %}My books{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="/static/js/bootstrap.min.js"></script>

{% block extrahead %}{% endblock %}
</head>
<body>
  <div class="container">
    {% block content %}
      {{ content }}
    {% endblock %}
  </div>
</body>
</html>

このbase.htmlを継承して、Webアプリのhtmlファイル(pidata.html)を作成することができます。書き換えたい箇所、不足箇所だけをpidata.htmlに記載していきます。{% block xxx %}~{% endblock %}でbase.htmlの内容を上書きすることができます。

pidata.htmlファイルを新規作成し、下記のコードを記載します。

{% extends "base.html" %}

{% block title %}ラズベリーパイデータの一覧{% endblock title %}

{% block extrahead %}
<style>
table {
  margin-top: 8px;
}
</style>
{% endblock %}

{% block content %}
<h3 class="page-header">ラズパイデータの一覧</h3>
<table id="table1" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>ラズパイ1</th>
      <th>ラズパイ2</th>
      <th>ラズパイ3</th>
      <th>ラズパイ4</th>
      <th>ラズパイ5</th>
    </tr>
  </thead>
  <tbody>
    <tr>        
      <td>{{ pidatas.0.pidata1 }}</td>
      <td>{{ pidatas.0.pidata2 }}</td>
      <td>{{ pidatas.0.pidata3 }}</td>
      <td>{{ pidatas.0.pidata4 }}</td>
      <td>{{ pidatas.0.pidata5 }}</td>
    </tr>
  </tbody>
</table>

{% endblock content %}

ブラウザで指定するURLの設定(djtest→webpi→urls.pyファイル(新規作成)の編集)

まず、webpiフォルダにurls.pyファイルを新規作成し、下記のコードを記載します。正規表現でアドレスを指定します。そのアドレスがブラウザに入力されると、viewファイルで設定しているhtmlファイルが表示されるしくみです。
今回であれば、http://xxx.xxx.xxx.xxx:8000/webpiと指定すれば、view.pyファイルの
pidata_listメゾットで記載したwebpi/pidata.htmlが表示されます。

from django.conf.urls import url
from webpi import views

urlpatterns = [
    url(r'^webpi/$', views.pidata_list, name='webpi'), 
]


また、djtest→urls.pyに上記で作成したurls.pyを登録します。import includeが必要ですので注意してください。

from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'^', include('webpi.urls', namespace='webpi')),
]

データベースの再構築

models.pyでデータベースの内容を追加しているので、下記コマンドでデータベースを再構築します。データを追加した場合は、下記コマンドで毎回データベースを再構築してください。

python3 manage.py makemigrations
python3 manage.py migrate

動作確認

下記のコマンドでWebサーバーを起動します。

python3 manage.py runserver xxx.xxx.xxx.xxx:8000

Webページを開いて、動作確認をしてみましょう。ブラウザのURLにhttp://[Raspberry PiIPアドレス]:8000/webpiと入力します。テーブルビューが表示されたと思います。データベースに値を何も入れていないので、値は何も表示されていないはずです。

次回は、djangoシステムからデータベースに値を入れる方法を紹介して、Webアプリを完成させたいと思います。