LoginSignup
7
6

More than 1 year has passed since last update.

【Django】自分で作成したページを表示するまで

Posted at

Djangoとは

Django とは Python の Webアプリケーションフレームワークです。
Python で Webアプリケーションを作成するために便利な機能を提供しています。

環境

Ubuntu-20.04 (wsl)
Python 3.9.7

pip で Django をインストール

1. pip を最新状態に更新
$ pip install -U pip

2. Django をインストール
$ pip install django

Djangoの初期ページを表示

プロジェクトの作成
$ django-admin startproject <プロジェクト名>

プロジェクトファイルの中身

TestSite/
├── TestSite
│   ├── __init__.py
│   ├── __pycache__/
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── db.sqlite3
└── manage.py

manage.py を使ってプロジェクトを操作します。

初期ページの表示
$ cd TestSite/
$ python manage.py runserver

ブラウザで localhost:8000 にアクセスすると下のようなDjangoの初期ページを確認することができます。
image.png

アプリケーションを作成

Django では機能ごとにアプリケーションを分けるので1つのプロジェクトに複数のアプリケーションが存在することになります。

TestSite/
$ python manage.py startapp <アプリケーション名>

testApp/
├── __init__.py
├── admin.py
├── apps.py
├── migrations
│   └── __init__.py
├── models.py
├── tests.py
└── views.py

templatesの作成

実際に表示するHTMLファイルを作成します。
HTMLファイルを配置するのは、 templates/testApp の中です。

TestSite/testApp/
$ mkdir templates
$ mkdir templates/testApp
test.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Test Page</title>
  </head>
  <body>
    <h1>Hello Django!</h1>
  </body>
</html>

views を修正

先ほど作成した html を表示するための処理を views.py に書いていきます。

views.py
from django.shortcuts import render

def testView(request):
  return render(request, 'testApp/test.html')

URLマッピングの設定

Django では各アプリケーションごとの urls.py で URLマッピングを行います
まずは、作成したアプリケーションを登録します。

settings.py
# 33行目ぐらいにあるINSTALLED_APPSというリストを修正します。

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

次に、TestSite/urls.py でアプリケーション内の urls.py を include します。

TestSite/urls.py
from django.contrib import admin
from django.urls import path, include

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

最後に、アプリケーション内の urls.py で URLマッピングを行います。

testApp/urls.py
from django.urls import path
from . import views

urlpatterns = [
  path('', veiws.testView, name='testView'),
]

先ほどと同じ localhost:8000 にアクセスすると、先ほど作成した test.html が表示されます。

image.png

おまけ

作成したhtmlに値を渡して表示することができます。

test.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Test Page</title>
  </head>
  <body>
    <h1>{{title}}</h1>
    <p>{{message}}</p>
  </body>
</html>

html内には {{キー}} を配置し、views.py で辞書(params)を定義します。

views.py
from django.shortcuts import render

def testView(request):
  params = {
    'title' : 'Hello Django!',
    'message': 'このページはDjangoによって表示されています。',
  }

  return render(request, 'testApp/test.html', params)

render の第3引数に params を指定することで、辞書のキーの値を html に埋め込み表示します。

image.png

7
6
0

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
7
6