Djangoのチュートリアルのアウトプットとしてまとめます。
DjangoはMTVモデルというフレームワークを採用しているようです（LaravelなどはMVCモデル）。
今回は、MTVの「View」と「Template」の部分を学習していこうと思います。
Contents
前提
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.pymyappアプリケーションが作成できたので、アプリケーションを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です。
コメントを残す