【django】アプリ作成手順

UdemyでDjango入門講座を受講したので、
Djangoアプリケーション作成する手順の備忘録として記載
# 環境
```
OS     : Mac
Python : 3.7.4
Django : 3.1.5
エディタ : VScode
```

# プロジェクト名、アプリケーション名
本記事では、以下の名前で作成

```
プロジェクト名　　　: project
アプリケーション名　: employee
```
# プロジェクト作成
プロジェクト作成するディレクトリで以下のコマンドを実行

```
django-admin startproject project
```

# アプリケーション作成
上記コマンドを実行すると、projectディレクトリが作成される。
projectディレクトリ内のmanage.pyが格納されている場所までcdで遷移して、
以下のコマンドを実行

```
格納先　：　*/project/manage.py
cd project
```
```:アプリケーション作成
python manage.py startapp employee
```
正常にコマンドが実行されると、projectディレクトリ内にemployeeフォルダが作成される

ついでに、DB反映コマンドや、スーパーユーザ作成しておくと良い
参考：[【メモ】【自分用】Djangoコマンド](https://qiita.com/gas-gas/items/f7908c4e933e31198446)

# 初期設定
## settings.py
「settings.py」が格納されている場所まで遷移し、初期設定を行う

```
格納先　：　*/project/project/settings.py
cd project
```

INSTALLED_APPSに<font color="Red">'employee.apps.EmployeeConfig',</font>の1行を追記
※'<font color="Red">アプリ名</font>.apps.<font color="Red">アプリ名(先頭大文字)</font>Config'

```Python:settings.py
INSTALLED_APPS = [
    'employee.apps.EmployeeConfig',　←ここ
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]
```
LANGUAGE_CODEを<font color="Red">'ja'</font>に変更
TIME_ZONEを<font color="Red">'Asia/Tokyo'</font>に変更

```Python:settings.py
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'
```

## urls.py(project配下)
settings.pyと同じディレクトリ内のurls.pyを修正

```
格納先　：　*/project/project/urls.py
```

```Python:urls.py
from django.contrib import admin
from django.urls import path, include

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

## urls.py(employee配下)
employeeディレクトリ配下にurls.pyを新規作成し、修正

```
格納先　：　*/project/employee/urls.py
cd ../employee
```

```Python:urls.py
from django.urls import path
from . import views

app_name = 'employee'

urlpatterns = [
    path('', views.IndexView.as_view(), name='index')
]
```
## views.py
TemplateViewを表示させるよう修正
views.pyはemployee配下に格納されているので遷移不要

```
格納先　：　*/project/employee/views.py
```

```Python:views.py
from django.views import generic

class IndexView(generic.TemplateView):
    template_name = 'employee/employee_list.html'
```

# テンプレートhtml作成
まずは以下になるようにディレクトリを作成

```
作成後　：　*/project/employee/templates/employee/
```
employee配下にtemplatesフォルダを作成、
templates配下にemployeeフォルダを作成
## base.html
上記で作成した、employeeへ遷移し、base.htmlを新規作成

```
cd */project/employee/templates/employee
```
Bootstrapのテンプレートを使用

```html:base.html
<!doctype html>
<html lang="ja">
  <head>
    <title>社員管理システム</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

  </head>
  <body>
    <div class="container">
        {% block content %}
        {% endblock %}
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>
```

## employee_list.html
base.htmlと同じディレクトリ内にemployee_list.htmlを新規作成

```html:employee_list.html
<!doctype html>
{% extends 'employee/base.html' %}

{% block content %}
トップページ
{% endblock %}
```

# 動作確認
上記まで作成したら、manage.pyが格納されている場所までcdで遷移して、
以下のコマンドを実行

```:サーバ起動
python manage.py runserver
```
サーバが起動したら、以下へアクセスし確認する

```
http://127.0.0.1:8000/
```
「トップページ」が表示されていればテンプレートは完成
あとは、必要に応じて作成していく。