【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.7】

今回も更にWebアプリケーションを作り込みます。

 

以下、今までの作業です。

【さくらVPS】【Python】Django で Web アプリを作る【Part.1】

 

【さくらVPS】【Python】Django で Web アプリを作る(Let's Encrypt SSL証明書設定)【Part.2】

 

【さくらVPS】【Python】Django で Web アプリを作る(Djangoインストール&設定)【Part.3】

 

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.4】

 

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.5】

 

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ設定編)【Part.6】

 

 

 

Webアプリを作る場合はレンタルサーバーより「VPS」の方が自由度が高いのでお勧めです。

ちなみに、「さくらのVPS」は価格が安くてスペックがいいです。

 

 

さくらのVPSのスペックです。

[test@SAKURA_VPS ~]$ cat /proc/cpuinfo | grep processor
processor       : 0
[test@SAKURA_VPS ~]$ cat /proc/meminfo | grep MemTotal
MemTotal:         500208 kB

月額    : 685円~

ディスク: SSD 20GB

CPU     : Intel Xeon CPU E5-2650v2 @ 2.60GHz 1個

メモリ  : 512MB

 

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.7】

 

 

 

アプリケーションにデータを保存&確認する

まだまだWebアプリケーションの基本的な部分ですが少しずつ進めていきます。

通しで Web アプリケーションを勉強したい場合は、淵上喜弘著の1日で理解するDjango超基礎入門を参考にしてください。

当記事で勉強&作成する Web アプリケーションは以下の著書を参考にしています。

Amazonの「Kindle Unlimited」で購入しました。

1日で理解するDjango超基礎入門

 

 

Djangoのバージョン確認

初めに Django のバージョン確認手順を紹介します。

Django のバージョンは「1.11.7」であることが分かります。

(pyenv) [test@SAKURA_VPS helloworld]$ python
Python 3.6.3 (default, Oct 11 2017, 18:17:37)
[GCC 4.8.5 20150623 (Red Hat 4.8.5-16)] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import django
>>> django.get_version() ← Djangoのバージョンを確認します。
'1.11.7'
>>> django.VERSION ← Djangoのバージョンを確認します。
(1, 11, 7, 'final', 0)
>>>

 

 

仮想環境に切り替える

初めに仮想環境に切り替えます。

[test@SAKURA_VPS ~]$ ls
django  scraping      テンプレート  ドキュメント  音楽  公開
pyenv   ダウンロード  デスクトップ  ビデオ        画像
[test@SAKURA_VPS ~]$ cd pyenv/
[test@SAKURA_VPS pyenv]$ ls
bin  include  lib  lib64  pip-selfcheck.json  pyvenv.cfg  site01
[test@SAKURA_VPS pyenv]$ source ./bin/activate ← 仮想環境に切り替えます。
(pyenv) [test@SAKURA_VPS pyenv]$ ← (pyenv)が表示され、仮想環境に切り替わったことが分かります。

 

admin.pyを編集する

「/home/test/pyenv/site01/helloworld/admin.py」を編集します。

以下のコードで helloworld アプリケーションのモデルを表示させます。

(pyenv) [test@SAKURA_VPS helloworld]$ pwd
/home/test/pyenv/site01/helloworld
(pyenv) [test@SAKURA_VPS helloworld]$ vi admin.py
from django.contrib import admin

# Register your models here.
from .models import Add_Word

admin.site.register(Add_Word)

 

 

開発用 Django サーバーを起動する

ファイルを修正したら開発用 Django サーバーを起動します。

(pyenv) [test@SAKURA_VPS site01]$ pwd
/home/test/pyenv/site01
(pyenv) [test@SAKURA_VPS site01]$ python manage.py runserver
Performing system checks...

System check identified no issues (0 silenced).

You have 1 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): helloworld.
Run 'python manage.py migrate' to apply them.

November 04, 2017 - 16:52:24
Django version 1.11.7, using settings 'site01.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

 

 

ブラウザより動作確認をする

ブラウザを起動して「http://127.0.0.1:8000/admin」にアクセスをします。

以下のように「HELLOWORLD」「Add_words」が表示されていれば成功です。

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.7】

 

 

文字を登録してみます。

「HELLOWORLD」-「Add_words」より「追加」をクリックします。

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.7】

 

 

「add_word」を追加画面で文字を追加し、「保存」ボタンをクリックします。

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.7】

 

 

以下のように追加されます。

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.7】

 

追加した文字列を確認します。

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.7】

 

 

追加した文字列を確認します。

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.7】

 

 

エラーが出た場合

画面操作をした際に以下のエラーが出力される場合があります。

OperationalError at /admin/helloworld/add_word/add

no such table: helloworld_add_word

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.7】

 

 

その場合は一旦開発用 Django サーバーを「Ctrl」+「C」で停止して、再度マイグレーションしてから起動するとうまくいきます。

^C(pyenv) [test@SAKURA_VPS site01]$ ← 「Ctrl」+「C」で開発用 Django サーバーを停止します。
(pyenv) [test@SAKURA_VPS site01]$ python manage.py migrate ← マイグレーションします。
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, helloworld, sessions
Running migrations:
  Applying helloworld.0001_initial... OK
(pyenv) [test@SAKURA_VPS site01]$ python manage.py runserver ← マイグレーションが完了したら再度開発用 Django サーバーを起動します。
Performing system checks...

System check identified no issues (0 silenced).
November 04, 2017 - 17:27:59
Django version 1.11.7, using settings 'site01.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
[04/Nov/2017 17:28:47] "POST /admin/helloworld/add_word/add/ HTTP/1.1" 302 0
[04/Nov/2017 17:28:47] "GET /admin/helloworld/add_word/ HTTP/1.1" 200 4536
[04/Nov/2017 17:28:47] "GET /admin/jsi18n/ HTTP/1.1" 200 8718
[04/Nov/2017 17:28:47] "GET /static/admin/css/changelists.css HTTP/1.1" 200 6170
[04/Nov/2017 17:28:47] "GET /static/admin/img/tooltag-add.svg HTTP/1.1" 200 331
[04/Nov/2017 17:28:47] "GET /static/admin/img/icon-yes.svg HTTP/1.1" 200 436
[04/Nov/2017 17:29:15] "GET /admin/helloworld/add_word/1/change/ HTTP/1.1" 200 5050
[04/Nov/2017 17:29:15] "GET /admin/jsi18n/ HTTP/1.1" 200 8718
[04/Nov/2017 17:29:19] "GET /admin/helloworld/add_word/ HTTP/1.1" 200 4341
[04/Nov/2017 17:29:24] "GET /admin/helloworld/add_word/1/change/ HTTP/1.1" 200 5050
[04/Nov/2017 17:29:24] "GET /admin/jsi18n/ HTTP/1.1" 200 8718

 

migrate コマンドについて

「python manage.py migrate」コマンドで何をしているのかと言うと、settings.pyファイルの設定に基づきデータベースのテーブルを作成しています。

 

ちなみに「/home/test/pyenv/site01/site01/settings.py」のデータベース部分の抜粋です。

(pyenv) [test@SAKURA_VPS site01]$ pwd
/home/test/pyenv/site01/site01
(pyenv) [test@SAKURA_VPS site01]$ cat settings.py

 

~ 省略 ~

# Database
# https://docs.djangoproject.com/en/1.11/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

~ 省略 ~

(pyenv) [test@SAKURA_VPS site01]$

 

 

 

データベースの中身を確認する

データベースに保存されているテストデータを確認する設定手順です。

(pyenv) [test@SAKURA_VPS helloworld]$ pwd
/home/test/pyenv/site01/helloworld
(pyenv) [test@SAKURA_VPS helloworld]$ vi views.py
from django.shortcuts import render

# Create your views here.
from django.http import HttpResponse
from .models import Add_Word

def index(request):
    data_list = Add_Word.objects.all()
    return HttpResponse(data_list)

 

 

管理画面で更にデータを表示させる

「/home/test/pyenv/site01/helloworld/admin.py」ファイルを編集します。

(pyenv) [test@SAKURA_VPS helloworld]$ pwd
/home/test/pyenv/site01/helloworld
(pyenv) [test@SAKURA_VPS helloworld]$ vi admin.py
from django.contrib import admin

# Register your models here.
from .models import Add_Word

class Add_WordAdmin(admin.ModelAdmin):
    list_display=('id', 'word_text', 'date_time')

admin.site.register(Add_Word, Add_WordAdmin)

 

 

動作確認

管理画面よりデータを追加します。

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.7】

 

 

 

「http://127.0.0.1:8000/helloworld」にアクセスをします。

登録した情報すべてが表示されることを確認します。

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.7】

 

 

CSSファイルを利用するための設定

「/home/test/pyenv/site01/site01/settings.py」ファイルを編集します。

下の設定を入れることで「helloworld/css/style.css」を読み込むようになります。

(pyenv) [test@SAKURA_VPS site01]$ pwd
/home/test/pyenv/site01/site01
(pyenv) [test@SAKURA_VPS site01]$ vi settings.py

 

~ 省略 ~

STATIC_URL = '/static/' ← staticディレクトリが基点となります。

STATICFILES_DIRS = (           ← ファイルの一番最後に追加します。
    os.path.join(BASE_DIR, 'static'),
)

 

 

「/home/test/pyenv/site01/helloworld/ディレクトリに「static」ディレクトリを作成します。

「/home/test/pyenv/site01/helloworld/staticディレクトリに「css」「images」ディレクトリを作成します。

(pyenv) [test@SAKURA_VPS site01]$ cd helloworld/

(pyenv) [test@SAKURA_VPS helloworld]$ pwd
/home/test/pyenv/site01/helloworld/
(pyenv) [test@SAKURA_VPS helloworld]$ mkdir static
(pyenv) [test@SAKURA_VPS helloworld]$ cd static/
(pyenv) [test@SAKURA_VPS static]$ pwd
/home/test/pyenv/site01/helloworld/static
(pyenv) [test@SAKURA_VPS static]$ mkdir css
(pyenv) [test@SAKURA_VPS static]$ mkdir images

(pyenv) [test@SAKURA_VPS static]$ ls
css   images

 

 

現在のディレクトリ構成は以下のようになっています。

(pyenv) [test@SAKURA_VPS site01]$ pwd
/home/test/pyenv/site01
(pyenv) [test@SAKURA_VPS site01]$ LANG=C tree
.
|-- db.sqlite3
|-- helloworld
|   |-- __init__.py
|   |-- __pycache__
|   |   |-- __init__.cpython-36.pyc
|   |   |-- admin.cpython-36.pyc
|   |   |-- models.cpython-36.pyc
|   |   |-- urls.cpython-36.pyc
|   |   `-- views.cpython-36.pyc
|   |-- admin.py
|   |-- admin.py_20171104
|   |-- apps.py
|   |-- migrations
|   |   |-- 0001_initial.py
|   |   |-- __init__.py
|   |   `-- __pycache__
|   |       |-- 0001_initial.cpython-36.pyc
|   |       `-- __init__.cpython-36.pyc
|   |-- models.py
|   |-- static
|   |   |-- css
|   |   `-- images
|   |-- templates
|   |   `-- helloworld
|   |       `-- index.html
|   |-- tests.py
|   |-- urls.py
|   |-- views.py
|   |-- views.py_20171104
|   `-- views.py_20171104_01
|-- manage.py
`-- site01
    |-- __init__.py
    |-- __pycache__
    |   |-- __init__.cpython-36.pyc
    |   |-- settings.cpython-36.pyc
    |   |-- urls.cpython-36.pyc
    |   `-- wsgi.cpython-36.pyc
    |-- settings.py
    |-- settings.py_20171104
    |-- urls.py
    `-- wsgi.py

11 directories, 31 files

 

 

更に「css」ディレクトリに「style.css」を作成します。

(pyenv) [test@SAKURA_VPS css]$ pwd
/home/test/pyenv/site01/helloworld/static/css
(pyenv) [test@SAKURA_VPS css]$ vi style.css
@charset "UTF-8";

p{
    font-size: 20px;
    color: #0000FF; ← 青色文字に変更します。
}

 

 

「index.html」ファイルを編集します。

(pyenv) [test@SAKURA_VPS helloworld]$ pwd
/home/test/pyenv/site01/helloworld/templates/helloworld
(pyenv) [test@SAKURA_VPS helloworld]$ vi index.html

{% extends 'helloworld/base.html' %}

 

    {% block body %}

    {% for list in lists %}
    <p>{{list.word_text}}</p>
    {% endfor %}
    {% endblock %}

 

 

 

「base.html」ファイルを作成します。

(pyenv) [test@SAKURA_VPS helloworld]$ pwd
/home/test/pyenv/site01/helloworld/templates/helloworld
(pyenv) [test@SAKURA_VPS helloworld]$ vi base.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}"> ← static ディレクトリを起点として style.css ファイルの場所を指定します。

</head>

<body>
    {% block body %}
    {% endblock %}

</body>
</html>

 

 

 

 

動作確認

ブラウザを起動して以下の URL にアクセスします。

http://127.0.0.1:8000/helloworld

 

style.css ファイルを読み込んで文字をカスタマイズできています。

 

コンソールログを確認します。

(pyenv) [test@SAKURA_VPS site01]$ python manage.py runserver
Performing system checks...

System check identified no issues (0 silenced).
November 05, 2017 - 10:49:16
Django version 1.11.7, using settings 'site01.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
[05/Nov/2017 10:49:23] "GET /helloworld/ HTTP/1.1" 200 266
[05/Nov/2017 10:49:23] "GET /static/css/style.css HTTP/1.1" 304 0

 

 

参考文献

今回構築したDjango環境の参考文献です。

Amazonの「Kindle Unlimited」で購入しました。

1日で理解するDjango超基礎入門

 

今までの連載

【さくらVPS】【Python】Django で Web アプリを作る【Part.1】

 

【さくらVPS】【Python】Django で Web アプリを作る(Let's Encrypt SSL証明書設定)【Part.2】

 

【さくらVPS】【Python】Django で Web アプリを作る(Djangoインストール&設定)【Part.3】

 

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.4】

 

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.5】

 

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ設定編)【Part.6】

 

 

 

Posted by 100%レンタルサーバーを使いこなすサイト管理人

コメントを残す

メールアドレスが公開されることはありません。