【Django】Webアプリケーション開発の基本設定

# はじめに
Djangoで開発をする際の基本設定・操作の覚え書き。
以下のYoutubeを参考にした。
[【Django】PythonでWebアプリを作ろう！1時間半でDjangoの基本を学ぶ 〜 Webフレームワーク初心者向け 〜](https://www.youtube.com/watch?v=r9QUdzVGHJU&ab_channel=Python%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0VTuber%E3%82%B5%E3%83%97%E3%83%BC)
# プロジェクトとアプリケーションの作成
```Python:プロジェクトの作成
django-admin startproject [Project Name]
```
作成したプロジェクトフォルダに移動して、
```Python:アプリケーションの作成
python manage.py startapp [App Name]
```

# ルートの設定
* [Project Name]/[App Name]/urls.pyを作成
これによってviews.pyとHTMLファイルを紐づけていく。
```python:[App Name]/urls.py
from django.urls import path
from . import views

app_name = "[App Name]"
urlpatterns = [
    path("", views.index, name="index"),
]
```

* [Project Name]/[Project Name]/urls.pyを編集
これはプロジェクト全体の設定なので、編集することは少ない。
```python:[App Name]/urls.p
from django.contrib import admin
from django.urls import path, include

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

# settings.pyの編集
* INSTALLED_APPS
マイグレーションの際にこのアプリケーションを参照させる。これをしないとテンプレートの参照などもしてくれません。
```python:
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    '[App Name].apps.[App Name]Config'
]
```
* TEMPLATES
HTMLファイルの置き場所の指定。ここではプロジェクトフォルダ直下に作成した```templaes```フォルダを調べようになっております。

```
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / "templates"],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
```
:::note
デフォルトでは```DIRS'```が空の行列になっており、アプリケーションフォルダの直下(```migrations```と同じ階層)にある```templaes```フォルダを調べようになっております。
:::
* 言語とタイムゾーン
```python
LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'
```

# ログイン・ログアウトの実装
startapp accounts で新しいアプリケーションを作成。
* accounts/urls.py を作成
```python:urls.py
from django.contrib.auth.views import LoginView, LogoutView
from django.urls import path

app_name = "accounts"
urlpatterns = [
    path("login/", LoginView.as_view(), name="login"),
    path("logout/", LogoutView.as_view(), name="logout"),
]
```
* 全体のルーティングを設定のために、以下の二つを追加。
```python:urls.py
    path("accounts/", include("accounts.urls")),
    path("", include("django.contrib.auth.urls")),
```
* setttings.py
```python:settings.py
# ログイン、ログアウト後の遷移画面
    LOGIN_REDIRECT_URL = "/diary/"
    LOGOUT_REDIRECT_URL = "/login/"
```
以上を設定した上で、HTMLを編集していく。
* ログイン画面
```html:ログイン
<h2>ログイン</h2>
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">ログイン</button>
</form>
```
* ログアウトボタン
```html:ログアウト
<form action="{% url 'accounts:logout' %}" method="post">
    {% csrf_token %}
    <button type="submit">ログアウト</button>
</form>
```

# ターミナルでの操作
* サーバーの起動
```terminal:サーバーの起動
python manage.py runserver
```
* マイグレーションの作成と実行
```terminal:マイグレーションの作成
python manage.py makemigrations
```
```terminal:マイグレーションの実行
python manage.py migrate
```

# 管理者ページの作成
[App Name]/admin.py において
```python: admin.py
from django.contrib import admin
from .models import Book

admin.site.register(Book)
```
この設定をした上で、サーバーをとめ、ターミナルで
```terminal: 管理者ページ
python manage.py createsuperuser
```
を実行。ユーザー名やメールアドレス、パスワードを設定する。設定後、http://127.0.0.1:8000/admin/ からログイン可能になる。

# CSS の設定
プロジェクトフォルダ (startapp で作成されるフォルダ)に、static/[App Name]/css/base.css ファイルを作成し、base.css を適当に作成する。
* settings.py を編集する。（パスを通すイメージ）
```python:settings.py
STATIC_URL = "static/"

STATICFILES_DIRS = [
    BASE_DIR / "static"
]
```
* base.html (extend で他のHTMLファイルに引用されるHTMLファイル）に css を適用する。
```html: base.html
<head>
    ~~~~~~~~
    {% load static %}
    <link rel="stylesheet" href="{% static '[App Name]/css/base.css' %}">
</head>
```
他にもクラス特性など（ボタンなどに）もHTMLファイル内で設定していく。

# JavaScript の設定
先ほど CSS の設定で作成した static フォルダ内に、js/base.js とJavaScript ファイルを作成する。settings.py は CSS で設定したのでここでは触らなくて問題ない。
* base.js の編集
```javascript:枠組みの作成
document.addEventListener('DOMContentLoaded', function(){
    # ここに機能を実装する function を書いていく
});
```
現在時刻を逐次表示する機能を書いたのがこちら。
```javascript:現在時刻の表示
document.addEventListener('DOMContentLoaded', function(){
    function updateCurrentTime() {
        const now = new Date();
        const formattedTime = now.toLocaleTimeString('ja-JP', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
        document.getElementById('current-time').textContent = formattedTime;
    }

    // 初回実行と1秒ごとの更新
    updateCurrentTime();
    setInterval(updateCurrentTime, 1000);
});
```
これをHTMLファイルで読み込むようにするには、「まず base.html でインポートしておき、これをそれぞれのページのHTMLファイルで使用していく」というイメージ。使用する際には```getElementById("ID")```で決めたIDを使用する。
```html:base.htmlでのインポート
<head>
    ~~~~~~~~
    {% load static %}
    <link rel="stylesheet" href="{% static 'diary/css/base.css' %}"> <!--これはcssファイルのインポート-->
    <script src="{% static 'diary/js/base.js' %}"></script> <!--これがJavaScriptファイルのインポート-->
</head>
```
```html:インポートした機能の各ページでの使用
<div id="current-time"></div>
```