【Djangoチュートリアル その1】ビューとテンプレートの作成

Djangoのチュートリアルのアウトプットとしてまとめます。

DjangoはMTVモデルというフレームワークを採用しているようです(LaravelなどはMVCモデル)。

今回は、MTVの「View」と「Template」の部分を学習していこうと思います。

前提

Macユーザを想定していますが、Python3とpipが使えれば手順は同じだと思います。

環境構築

# Djangoインストール
$ pip install django

# インストール確認
$ pip list |grep jango

# プロジェクト作成
$ django-admin startproject hoge

# プロジェクト直下へ移動
$ cd hoge 

# 開発用Webサーバ起動(ポートは任意)
$ python manage.py runserver 8000

# http://localhost:8000 からWebアプリを確認できればOK

# 言語とタイムゾーンを日本に設定
$ vi settings.py

# 106行目
- LANGUAGE_CODE = 'en-us'
+ LANGUAGE_CODE = 'ja'

# 108行目
- TIME_ZONE = 'UTC'
+ TIME_ZONE = 'Asia/Tokyo'

# http://localhost:8000 を更新し、日本語になっていればOK

ビューの作成

myappというアプリケーションを独立させて作っていきます。

# manage.pyと同じディレクトリに移動
$ cd ..

# myappというアプリケーションを作成
$ python manage.py startapp myapp

# ディレクトリ構造を確認(treeコマンドは brew install tree でインストール可)
$ tree .
.
├── db.sqlite3
├── manage.py
├── hoge
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-36.pyc
│   │   ├── settings.cpython-36.pyc
│   │   ├── urls.cpython-36.pyc
│   │   └── wsgi.cpython-36.pyc
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── myapp
    ├── __init__.py
    ├── admin.py
    ├── apps.py
    ├── migrations
    │   └── __init__.py
    ├── models.py
    └── tests.py

myappアプリケーションが作成できたので、アプリケーションをDjangoに認識させます。

$ vi hoge/settings.py

INSTALLED_APPS = [
    'myapp', # ここを追加
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

まず、hoge/urls.pyにて、myappへのリクエストをmyapp/urls.pyへ流すように設定します。

$ vi hoge/urls.py
from django.contrib import admin
from django.urls import path, include       #### includeを追記

urlpatterns = [
    path('myapp/', include('myapp.urls')),  #### 追記
    path('admin/', admin.site.urls),
]

次に、myapp/urls.pyにて、myappへのリクエストをviews.pyのindexへ流すように設定します。

$ vi myapp/urls.py
from django.urls import path

from . import views

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

views.pyにて、indexの処理を記述します。

$ vi myapp/views.py
from django.shortcuts import render

def index(request):
    return render(request, 'enavi/index.html')

これで「http://localhost:8000/myapp」に対する処理を、index.htmlへ流す準備ができました。

テンプレートの作成

次に、テンプレートを作成し、index.htmlを作っていきます。

まずは、cssファイルなどの静的ファイルを格納するための「static」ディレクトリを作成し、cssを作っていきます。

$ mkdir -p myapp/static/myapp/
$ vi myapp/static/myapp/style.css

.hoge {
    text-align: center;
    font-size: 100px;
}

次に、テンプレートディレクトリを作成し、ベースとなる「base.html」と、それを継承させた「index.html」を作成します。

# テンプレートディレクトリを設置
$ mkdir -p myapp/templates/myapp

# base.htmlを作成
$ vi myapp/templates/myapp/base.html

{% load static %}
<!doctype html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>TITLE</title>
    <meta name="description" content="TITLE">
    <meta name="author" content="hoge">
    <link rel="stylesheet" href="{% static "myapp/style.css" %}">
</head>

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

</html>
# index.htmlを作成
$ vi /myapp/templates/myapp/index.html

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

{% block content %}
<div class="hoge">hogehoge</div>
{% endblock content %}

http://localhost:8000/myapp へアクセスし、「hogehoge」がデカデカと表示されればOKです。

コメントを残す

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