MENU
大人のためのSTEM遊び場〜Python、3Dプリンタ、ガジェット〜
  1. ホーム
  2. Programming
  3. 【Django】一次関数表示アプリを作成（準備編）［Python］

【Django】一次関数表示アプリを作成（準備編）［Python］

Programming
Django Python プログラミング
  • URLをコピーしました！
目次

Django

前々回までにDjangoを使ってBMI計算アプリを作ってきました。

あわせて読みたい
【Django】静的ファイル（staticファイル）で画像ファイルを表示（プロジェクト内共通用）［Python］ 【Django】 前回、Djangoで各アプリケーションにおける画像ファイルを表示するためのstaticフォルダを作成しました。 今回はプロジェクト内で共通の画像、例えばウェブ…

Webアプリページのレイアウトも大体決まり、これから複数のWebアプリを作り、その後、それらのWebアプリのページをまとめるインデックスページを作成しようと思います。

今回からは二つ目のWebアプリとして、一次関数表示アプリを作っていきましょう。

今回はその準備編。

新規アプリケーションの作成

まずは新規アプリケーションを作成していきます。

ターミナルを開き、これまで使用してきた webappフォルダに移動します。

そして下のコマンドを実行します。

django-admin startapp linearfunction

「django-admin startapp」が新規アプリケーションの作成コマンドで、「linearfunction」がアプリケーション名です。

ちなみにlinear functionというのは、日本語で「一次関数」という意味です。

webapp
├── bmiapp
│   └── ...
├── db.sqlite3
├── index.cgi
├── linearfunction
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── manage.py
├── static
│   ├── 3pysci_logo.png
│   └── favicon.png
└── webapp
    ├── __init__.py
    ├── asgi.py
    ├── definitions.py
    ├── params.json
    ├── settings.py
    ├── urls.py
    └── wsgi.py

bmiappに関しては今回からは使用しないので「…」として内容を省略しています。

そして新たに作成されたのは、linearfunctionフォルダ以下のフォルダとファイルです。

次に新しく作成したアプリケーション「linearfunction」の設定をしていきましょう。

/webapp/settings.py, urls.py

まずはwebapp内のsettings.py と urls.py に新しいアプリケーション「linearfunction」を登録します。

webapp
├── bmiapp
│   └── ...
├── db.sqlite3
├── index.cgi
├── linearfunction
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── manage.py
├── static
│   ├── 3pysci_logo.png
│   └── favicon.png
└── webapp
    ├── __init__.py
    ├── asgi.py
    ├── definitions.py
    ├── params.json
    ├── settings.py <- これ
    ├── urls.py     <- これ
    └── wsgi.py

settings.pyでは、INSTALLED_APPSにlinearfunctionを追加します。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bmiapp',
    'linearfunction',
]

urls.pyでは、linearfunctionのパスを追加します。

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

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

/webapp/linearfunction/urls.py, views.py

次にwebapp > linearfunction内にurls.pyを新規作成し、views.pyを修正します。

webapp
├── bmiapp
│   └── ...
├── db.sqlite3
├── index.cgi
├── linearfunction
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py   <- 新規作成
│   └── views.py  <- 修正
├── manage.py
├── static
│   ├── 3pysci_logo.png
│   └── favicon.png
└── webapp
    ├── __init__.py
    ├── asgi.py
    ├── definitions.py
    ├── params.json
    ├── settings.py
    ├── urls.py
    └── wsgi.py

urls.pyを新規作成したら、このように書き込みます。

from django.urls import path
from . import views

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

またviews.pyはこちらのように修正します。

from django.shortcuts import render
from django.http import HttpResponse
import sys
sys.path.append('../')
from webapp import definitions

def index(request):
    params = definitions.readjson()

    return render(request, 'linearfunction/index.html', params)

/webapp/linearfunction/templates/linearfunction/index.html

次に/webapp/linearfunction内にtemplatesフォルダ、そしてそのtemplateフォルダ内にlinearfunctionフォルダを作成し、そのlinearfunctionフォルダ内にindex.htmlファイルを作成します。

webapp
├── bmiapp
│   └── ...
├── db.sqlite3
├── index.cgi
├── linearfunction
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── templates            <- 新規作成
│   │   └── linearfunction   <- 新規作成
│   │       └── index.html   <- 新規作成
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── manage.py
├── static
│   ├── 3pysci_logo.png
│   └── favicon.png
└── webapp
    ├── __init__.py
    ├── asgi.py
    ├── definitions.py
    ├── params.json
    ├── settings.py
    ├── urls.py
    └── wsgi.py

そのindex.htmlファイルの中身はこのようにします。

<!doctype html>
{% load static %}
<html lang="ja">
<head>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="icon" type="image/png" href="{% static 'favicon.png' %}">
    <title>{{ title }}</title>
</head>
<body class="container-fluid">
    <!-- title -->
    <div class="row">
        <div class="col" style="text-align: center; margin:2rem 0rem 2rem 0rem;">
            <a href={{index_url}}><img src="{% static '3pysci_logo.png' %}"></a>
        </div>
    </div>
    <!-- /title -->
    <!-- main&link-->
    <div class="row">
        <!-- main -->
        <div class="col-sm-9" style="text-align: center; margin:2rem 0rem 2rem 0rem;">
            
        </div>
        <!-- /main -->
        <!-- link -->
        <div class="col-sm-3" style="margin:2rem 0rem 2rem 0rem;">
            {% for cat, urls in link.items %}
                <p style="font-weight: bold; ">・{{cat}}</p>
                {% for name, url in urls.items %}
                <p style="text-indent: 1rem;"><a href={{index_url}}{{url}}>{{name}}</a></p>
                {% endfor %}
            {% endfor %}
        </div>
        <!-- /link -->
    </div>
    <!-- /main&link -->
    <!-- copyright -->
    <div class="row">
        <div class="col" style="text-align: center; margin:2rem 0rem 0rem 0rem;">
            {{copyright}}
        </div>
    </div>
    <!-- /copyright -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>

/webapp/webapp/settings.json

次に/webapp/webapp/settings.jsonにlinearfunctionを追加します。

webapp
├── bmiapp
│   └── ...
├── db.sqlite3
├── index.cgi
├── linearfunction
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── templates
│   │   └── linearfunction
│   │       └── index.html
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── manage.py
├── static
│   ├── 3pysci_logo.png
│   └── favicon.png
└── webapp
    ├── __init__.py
    ├── asgi.py
    ├── definitions.py
    ├── params.json     <- これ
    ├── settings.py
    ├── urls.py
    └── wsgi.py

新しいカテゴリとして「数学」、新しいWebアプリ名として「一次関数」、URLとして「linearfunction」を追加します。

{
    "title":"3PySci-app",
    "index_url":"https://3pysci-app.com/webapp/",
    "copyright":"Copyright 2021 3PySci.",
    "link":{
        "ライフ":{
            "BMI":"bmiapp"
        },
        "数学":{
            "一次関数":"linearfunction"
        }
    }
}

これでターミナルを起動し、「python3 manage.py runserver」を実行し、サーバーを起動します。

「http://127.0.0.1:8000/linearfunction/」アクセスして、こちらのような画面が表示されれば、準備は完了です。

ということで次回から一次関数を表示するプログラムを作成していきましょう。

あわせて読みたい
【Django】一次関数表示アプリを作成（フォームの設定）［Python］ 【Django】 前回、新しいWebアプリ「一次関数表示アプリ」を作成する準備をしました。 今回は一次関数表示アプリのプログラムを解説していきましょう。 今回、いじるフ…

ではでは今回はこんな感じで。

Programming
Django Python プログラミング
よかったらシェアしてね！
  • URLをコピーしました！

コメント

コメントする

目次