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

# 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](http://localhost:8000/) にアクセスすると下のようなDjangoの初期ページを確認することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1621770/bf42aff1-cc3e-628e-8996-e67da14b1bf1.png)

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

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

```html: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** に書いていきます。

```py:views.py
from django.shortcuts import render

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

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

```py: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 します。

```py: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マッピングを行います。

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1621770/183db593-9d5c-6017-5e1e-b9c95a0f85a4.png)

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

```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）を定義します。

```py: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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1621770/0439530c-a425-aafa-0fe6-43774220c00a.png)