Raspberry Pi & Python 開発ブログ ☆彡

Raspberry PiとPythonの基本的な使い方をわかりやすく解説。初心者、入門者必見！！

トップ > raspberrypi-soft > Djangoの使い方：その2

Djangoの使い方：その2

raspberrypi-soft

django program

ブログ管理者のP.Hです！

下記ブログでプロジェクトの作成をするところまで説明しました。今回は実際にコードを実装してWebアプリを作成して行きたいと思います。

www.raspberrypirulo.net

span id="ad-banner">

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

  1. データのモデル作成 ⇒ models.pyの編集
  2. データモデルからWeb表示用のデータ作成 ⇒ view.pyの編集
  3. Viewで作成したデータを使用してhtmlの作成 ⇒ htmlファイル の編集
  4. htmlのURL設定 ⇒ urls.pyの編集

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

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

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

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

from django.db import models

# Create your models here.
class PiData(models.Model):

    primary_key = models.CharField(max_length=10,primary_key=True,default=1)
    pidata1 = models.CharField(max_length=255)
    pidata2 = models.CharField(max_length=255)
    pidata3 = models.CharField(max_length=255)

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

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

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

from django.shortcuts import render

# Create your views here.
from .models import PiData

def index(request):

    pidatas = PiData.objects.get(pk=1)
    return render(request,
                  'webpi/index.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(新規作成)→index.html(新規作成)

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

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

http://getbootstrap.com/

解凍すると生成されるcss、jsフォルダをdjtest→webpi→static(新規作成)に保存します。

HTMLファイルの作成

base.htmlの作成

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

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

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

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

index.htmlの作成

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

index.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>
    </tr>
  </thead>
  <tbody>
    <tr>        
      <td>{{ pidatas.pidata1 }}</td>
      <td>{{ pidatas.pidata2 }}</td>
      <td>{{ pidatas.pidata3 }}</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ファイルのindexメゾットで記載したtemplatesフォルダのwebpi/index.htmlが表示されます。

from django.urls import path
from . import views

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

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

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('webpi/', include('webpi.urls')),
    path('admin/', admin.site.urls),
]

・path('webpi/', include('webpi.urls')) の説明
　path('webpi/' ⇒ path は'webpi/'
　include('webpi.urls') ⇒ pathは''
このふたつが連結されるので、最終的にpathは'webpi/'になります。

データベースの再構築

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

$ python manage.py makemigrations
$ python manage.py migrate

まだ、データベースに値が何も入っていないので、エラーになりWebページは表示されません。長くなりましたが、今回はここまでにしたいと思います。
あともう少しです。次回は、djangoシステムからデータベースに値を入れる方法を紹介して、Webアプリを完成させたいと思います。引き続き、下記記事をご覧ください！

www.raspberrypirulo.net