djangoでweb サイトの基盤をつくる

## 環境を整備するためのディレクトリをつくる
```shell
  mkdir <file>
  cd <file>
```

## 仮想環境を作る
```shell
  python -m venv <env-name>
```
## 仮想環境の立ち上げ
```shell
  source <env-name>/bin/activate
```

## 仮想環境の終了
```shell
  deactivate
```

## pipのアップデート
```shell
  pip install --upgrade pip
```
## djangoのインストール
```shell
  pip install django
```

## プロジェクトを作る
```shell
  django-admin startproject <project-name>
```
## 移動
```shell
  cd <project-name>
```

## アプリをつくる
```shell
  python manage.py startapp <app-name>
```
## 初期化
```shell
  python manage.py migrate
```
## webサーバーの立ち上げ
```shell
  python manage.py runserver
```

###日本語化
>```
><file>/<project-name>/<project-name>/settings.py
>```
>```
>  LANGUAGE_CODEの値を 'ja-JP'
>  TIME_ZONEの値を 'Asia/Tokyo'
>  USE_TZの値を False
>  に変更する
>```

### デバッグモードの終了
>```
><file>/<project-name>/<project-name>/settings.py
>```
>```
>  DEBUGの値を False
>  ALLOWED_HOSTSの値を '*'
>  に変更する
>```

### INSTALED_APPSへの登録はデータベースを使う時でいい

##テンプレートの使い方
###テンプレートファイルをつくる 
>```
><file>/<project-name>/<project-name>/settings.py
>```
>```
>  TEMPLATESのDIRSに
>    os.path.join(BASE_DIR, 'templates'),
>  を設定
>```

###テンプレートフォルダを作る
>```
>  mkdir <file>/<project-name>/templates/
>```

## URLの設定
### from django.conf.urls import urlを使うときはurl(正規表現, ページ先)
>```
> <file>/<project-name>/<project-name>/urls.py
>```
>```python
>      from django.conf.urls import include, url
>      from django.contrib import admin
>
>      urlpatterns = [
>          url('^', include('myapp.urls')), # 全てのurlをmyapp に任せる
>          # url('^admin/', admin.site.urls),
>      ]
>```

## アプリ内での設定はで行う
#### from django.urls import pathを使うときはurl(パス, ページ先)
#### path に<引数> を書くことでパラメーターを渡せる
>```
> <file>/<project-name>/<app-name>/urls.py
>```
>```python
>    from django.urls import path
>    from . import views
>
>    urlpatterns = [
>        # パラメータがtestの場合
>        path('test/', views.test, name='test'),
>        # test以外のパラメーターが来た場合
>        path('<param>/', views.index_param, name='index_param'),
>        # パラメーターなし
>        path('', views.index_template, name='index_template'),
>    ]
>```

## URLとTemplatesを繋ぐ
>``` 
>  <file>/<project-name>/<app-name>/views.py
>``` 
>```python
>  from django.shortcuts import render
>  from django.http.response import HttpResponse
>
>  def index_template(request):
>      # html_fileへの値の渡し方
>      response = {
>          'test1': 'パラメーター'
>      }
>
>      # render(requeset, 'HTML-file', html_fileに渡す値, ステータスコード)
>      return render(request, 'index.html', response)
>
>  # param => urls.pyから引数をもらう
>  def index_param(request, param):
>
>      return render(request, '404.html', {'response1': param}, status=404)
>
>  def test(request):
>      return render(request, 'test.html')
>```

### 404responseを文字で出力するとき
>```python
>  from django.http import Http404
>  raise Http404("文字列")
>```

## テンプレートファイル
#
>```
><file>/<project-name>/templates/test.html
>```
>```html:test.html
>  test
>```

#
>```
><file>/<project-name>/templates/404.html
>```
>```html:404.html
>  <p>Status code: 404</p>
>  <p>"{{ response1 }}" was not  found.</p>
>```

#
>```
><file>/<project-name>/templates/base.html
>```
>```html:base.html
>  <!DOCTYPE html>
>  <html lang='ja'>
>    <head>
>      <meta charset='utf-8'>
>      <meta http-equiv='X-UA-Compatible' content='IE-edge'>
>      <meta name='viewport' content='width=device-width, initial-scale=1'>
>      <title>タイトル</title>
>      <!-- JQuery -->
>      <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
>      <!-- Bootstrap -->
>      <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
>      <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
>      <!-- CSS -->
>      {% block css %}
>      {% endblock %}
>    <body>
>      <!-- body -->
>      {% block body %}
>      {% endblock %}
>
>      <!-- script -->
>      {% block script %}
>      {% endblock %}
>    </body>
>  </html>
>```

#
>```
><file>/<project-name>/templates/index.html
>```
>```html:index.html
><!--
>"base.html" is including JQuery and Bootstrap
>-->
>
>
>{% extends "base.html" %}
>
><!-- 調整用CSS -->
>{% block css %}
>  <!-- Animate.css -->
>  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css'>
>  <style type='text/css'>
>    h1 {
>      /* display: none; */
>    }
>    .wobble {
>      /* 2秒かけて　アニメーションする */
>      animation-duration: 2s;
>
>    }
>  </style>
>{% endblock %}
>
><!-- BODY -->
>{% block body %}
>  <h1 class='text-center animated wobble'>読み込み中</h1>
>  {{ test1 }}
>{% endblock %}
>
><!-- 調整用SCRIPT -->
>{% block script %}
>  <script>
>    $(function() {
>      $('h1').fadeOut(3000, function() {
>        $('body').html('<h2>ようこそ</h2>');
>      });
>    });
>  </script>
>{% endblock %}
>```