djangoの基礎_忘備録_その１（DjangoのMTVを使ってローカルサーバーで思いのままにテキストを表記させようぜ）

初めまして**jack**です。
８月からPythonをメインにエンジニア業務に従事することになりまして。
そこでどうせならDjangoも学べば鬼に金棒。具志堅用高にメリケンサックですよね。
今回は表題の通り、**表示させたいテキストをMTVを使って表示させる**事が目標です。

以下、参照したサイト、書籍です。
環境構築もこちらを参照すればできると思います。丸投げでごめんなさい。てへぺろこつんこつん

- [クイックインストールガイド | Django ドキュメント | Django](https://docs.djangoproject.com/ja/2.1/intro/install/)
- [はじめての Django アプリ作成、その 1 | Django ドキュメント | Django](https://docs.djangoproject.com/ja/2.1/intro/tutorial01/)
- 「Python3 + Django2.0入門 - Pythonで作るWebアプリケーション開発入門 - その１」

https://www.amazon.co.jp/dp/B07GNJW2QN/ref=cm_sw_em_r_mt_dp_U_sROsDbBXK5S8R



ちなみに私の開発環境は以下となっています。

- Python 3.6.7
- Django 2.2.3
- macOS

では、早速。

```console
django-admin startproject djangoApp
```
をターミナルにて実行してアプリを作成！

```console
cd djangoApp
ls
```
で中身を確認すると

- djangoApp
- manage.py

が作成されている。おおおおおお！！！

次にdjangoApp直下にviews.pyを作成

```:djangoAppディレクトリ
djangoApp
├── _init_.py
├── setting.py
├── urls.py
├── views.py ←ここ
└── wsgi.py
```

んでもって、djangoApp/views.pyに下記を入力させて定番の文言をば。

```python
from django.http import HttpResponse

def index(requsest):
    return HttpResponse('Hello World')
```

これでリクエストに対してテキストでレスポンスできるはず、、、

次にdjangoApp/urls.pyを変更

```python
from django.contrib import admin
from django.urls import path
from . import views
   
urlpatterns = [
   path('admin/', admin.site.urls),
   path('index/', views.index),
]
```

上記の変更を保存した後にターミナルにてローカルサーバーを起動

```console
python3 manage.py runserver
```


localhost:8000/indexにアクセスしてみたら、、、

<img width="341" alt="スクリーンショット 2019-08-07 14.03.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274224/4eda9606-3af8-63a4-4e9b-09fa8c990819.png">

ちゃんとでましたね！

次はアプリを追加してそっちでも表記できるか試してみましょう！

```console
python3 manage.py startapp hoge
```
そうするとディレクトリはこうなってるはず

```:djangoAppディレクトリ
├── djangoApp
│   ├── __pycache__ 
│   ├── _init_.py
│   ├── setting.py
│   ├── urls.py
│   ├── views.py
│   └── wsgi.py
├── hoge
│   ├── __pycache__
│   ├── migrations  
│   ├── _init_.py  
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
└── manage.py
```

作成したfoge/views.pyを下記に編集

```python
from django.http import HttpResponse

def index(requsest):
    return HttpResponse("Hello World")

def ue(requsest):
    return HttpResponse("ue")

def shita(requsest):
    return HttpResponse("shita")
```

次はfogeディレクトリ直下にurls.pyを作成

```:djangoAppディレクトリ
├── djangoApp
│   ├── __pycache__ 
│   ├── _init_.py
│   ├── setting.py
│   ├── urls.py
│   ├── views.py
│   └── wsgi.py
├── hoge
│   ├── __pycache__
│   ├── migrations  
│   ├── _init_.py  
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py ←ここ
│   └── views.py
└── manage.py
```

そしてこのurls.pyを編集します。

```python
from django.urls import path
from . import views

urlpatterns = [
path("", views.index),
path("ue/", views.ue),
path("shita", views.shita),
]
```

次に追加したhogeアプリへの繋がりを作成。

```python:djangoApp/urls.py
from django.contrib import admin
from django.urls import path, include
from . import views

path('admin/', admin.site.urls),
path('index/', views.index),
path('hoge/', include('hoge.urls')),
```

ではここまで作成したものを保存してローカルサーバーをもう一度立ちあげてみる。

<img width="341" alt="スクリーンショット 2019-08-07 14.45.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274224/0a70127e-30d3-3882-144c-c38a87da5193.png">
<img width="351" alt="スクリーンショット 2019-08-07 14.46.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274224/fbbf83a2-e2b7-93c2-c74d-e1e985e1a43f.png">

うまく追加アプリと接続ができました！！
では次にこの表示に***html***と***css***を適応させましょう！
その為にdjango/setting.pyの一番下に

```python
STATIC_URL = '/static/'
```

を追記しまして

```python:djangoApp/setting.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]
```
BASE_DIRの下に上記を追記します。
それからstaticディレクトリを下記場所に作成

```:djangoAppディレクトリ
├── djangoApp
│   ├── __pycache__ 
│   ├── _init_.py
│   ├── setting.py
│   ├── urls.py
│   ├── views.py
│   └── wsgi.py
├── hoge
│   ├── __pycache__
│   ├── migrations  
│   ├── _init_.py  
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py 
│   └── views.py
├── static　←ここ
└── manage.py
```

そんでもってstatic直下にstyle.cssのファイルを作成して下記編集を行います。

```css:static/style.css
h1 {
   color: blue
}
```

次にテンプレートディレクトリを作成します

```:djangoAppディレクトリ
├── djangoApp
│   ├── __pycache__ 
│   ├── _init_.py
│   ├── setting.py
│   ├── urls.py
│   ├── views.py
│   └── wsgi.py
├── hoge
│   ├── __pycache__
│   ├── migrations  
│   ├── _init_.py  
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py 
│   └── views.py
├── static
├── templates ←ここ
└── manage.py
```

そんでもってtemplates直下にindex.htmlを作成して下記編集を行います。

```html:templates/index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/static/style.css">
  </head>
  <body>
    <h1>{{title}}</h1>

  </body>
</html>
```


そんでもってこの作成したテンプレートの存在をお知らせします。

```python:djangoApp/setting.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, "templates")], ←ここ
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
    
```
この作成したcssとhtmlをviewに反映させる為に編集します。

```python:djangoApp/views.py
from django.http import HttpResponse
from django.shortcuts import render

def index(requsest):
    return render(requsest, 'index.html',
    {"title":'Hello World!!!'})
```

そして編集した後にローカルサーバーのindexを見てみると

<img width="351" alt="スクリーンショット 2019-08-07 15.18.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274224/df2bfbf0-1baf-e614-0311-43d9ac506da4.png">

しっかりhtmlとcssを反映させることが出来ていますね！
これでもういつでも好きな文言をDjangoを使って表記できますね！（自分自身に言ってます泣）


それではさよならさよならさよならー