DjangoでHello, Worldして遊ぶ

前回：[ChromebookだけどGoogleCloudPlatformにDjango入れて遊ぶ](https://qiita.com/KnockoutGT/items/5a74b8561a63f7f0e7de)
参考：[Djangoを最速でマスターする part1](https://qiita.com/gragragrao/items/373057783ba8856124f3)

# Hello, World

大好き

# アプリケーションの作成

Djangoのプロジェクトを作ったのと同じ要領で、アプリケーションを作る。

プロジェクトのルートディレクトリに移動し、以下コマンドを実行する。

`sudo python3.6 manage.py startapp hello`

以下のフォルダ、ファイルが作成される。

```
apply
└ hello
   ├ admin.py
   ├ apps.py
   ├ __init__.py
   ├ migrations/
   ├ models.py
   ├ tests.py
   └ views.py
```

次にやることを並べると

1. views.py、models.pyを変更してページを作る。
1. settings.pyにアプリケーションを追加する。
1. urls.pyにURLとアプリケーションのつながりを定義する。

## その１　テキストでHello, World

### views.py

``` views.py
from django.http import HttpResponse
 
def hello(req):
  return HttpResponse('Hello, World !!')
```

### modules.py

今回は使用しない。

### settings.py
``` settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]
```
↓

``` settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'hello',
]
```

### urls.py
```
urlpatterns = [
    path('admin/', admin.site.urls),
]
```
↓

```
import hello.views
urlpatterns = [
    path('hello/', hello.views.hello),
    path('admin/', admin.site.urls),
]
```

### 確認

ブラウザで以下URLを開く。

`http://サーバの静的IP/hello/`

![00_HelloWorld.png](https://qiita-image-store.s3.amazonaws.com/0/250012/6818ff6d-647f-b73b-7d58-f5ce8c077ecf.png)


## その２　HTMLでHello, World

### views.py

以下を追記する。

```
def hello_html(req):
    src = []
    src.append('<!doctype html>')
    src.append('<html>')
    src.append('<head>')
    src.append('<meta charset="utf-8">')
    src.append('<title>Hello, World</title>')
    src.append('</head>')
    src.append('<body>')
    src.append('<h1 style="color:#F4A346;">Hello, World!!</h1>')
    src.append('</body>')
    src.append('</html>')
    return HttpResponse('\n'.join(src))
```

### modules.py

今回は使用しない。

### settings.py

前に変更したのでOK。

### urls.py
```
urlpatterns = [
    path('hello/', hello.views.hello),
    path('admin/', admin.site.urls),
]
```
↓

```
import hello.views
urlpatterns = [
    path('hello/', hello.views.hello),
    path('hello_html/', hello.views.hello_html),
    path('admin/', admin.site.urls),
]
```

### 確認

ブラウザで以下URLを開く。

`http://サーバの静的IP/hello_html/`

![01_HelloWorld.png](https://qiita-image-store.s3.amazonaws.com/0/250012/e46112cf-74ce-2733-f61b-57da7ff24774.png)


## その３　テンプレート使ってHello, World

### hello/templates/hello.html

新たにファイルを作成して以下を入力する。

``` hello.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello, World !!</title>
        <style type="text/css">
            .hello {
                color: #0F9046;
            }
        </style>
    </head>
    <body>
        <h1 class="hello">Hello, World !!</h1>
    </body>
</html>
```
### views.py

以下を追記する。

```
from django.shortcuts import render
from django.views.generic import TemplateView

class HelloTemplateView(TemplateView):
    template_name = 'hello.html'    
    def get(self, request, *args, **kwargs):
        context = super(TemplateView, self).get_context_data(**kwargs)
        return render(self.request, self.template_name, context)
```

### modules.py

今回は使用しない。

### settings.py

前に変更したのでOK。

### urls.py
```
urlpatterns = [
    path('hello/', hello.views.hello),
    path('hello_html/', hello.views.hello_html),
    path('admin/', admin.site.urls),
]
```
↓

```
import hello.views
urlpatterns = [
    path('hello/', hello.views.hello),
    path('hello_html/', hello.views.hello_html),
    path('hello_template/', hello.views.HelloTemplateView.as_view()),
    path('admin/', admin.site.urls),
]
```

### 確認

ブラウザで以下URLを開く。

`http://サーバの静的IP/hello_template/`

![02_HelloWorld_template.png](https://qiita-image-store.s3.amazonaws.com/0/250012/59d40f24-e875-19b8-10fe-8f06673a53fc.png)

## その４　モデルを使ってHello, World

### hello/templates/hello_model.html

新たにファイルを作成して以下を入力する。

``` hello_model.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello, World !!</title>
        <style type="text/css">
            .hello {
                color: #C1002B;
            }
        </style>
    </head>
    <body>
        {% for hello in hellos %}
        <h1 class="hello">hello[{{hello.lang}}][{{hello.hello}}]</h1>
        {% endfor %}
        <h1 class="hello">hello_en[{{hello_en.hello}}]</h1>
        <h1 class="hello">hello_jp[{{hello_ja.hello}}]</h1>    
    </body>
</html>
```
### views.py

以下を追記する。

```
from hello.models import *
class HelloModelsView(TemplateView):
    template_name = 'hello_models.html'
    def get(self, request, *args, **kwargs):
        context = super(TemplateView, self).get_context_data(**kwargs)
        context['hellos'] = Hello.objects.all()
        context['hello_en'] = Hello.objects.filter(lang=Hello.EN)[0]
        context['hello_ja'] = Hello.objects.filter(lang=Hello.JA)[0]
        return render(self.request, self.template_name, context)
```

### modules.py

``` models.py
from django.db import models
class Hello(models.Model):
    EN = 'en'
    JA = 'ja'
    lang = models.CharField(max_length=2)
    hello = models.CharField(max_length=64)
```

変更後、プロジェクトのルートで以下コマンドを実行する。
`python3.6 manage.py makemigrations`
`sudo python3.6 manage.py migrate`

### データ投入

以下コマンドでシェル起動。

`sudo python3.6 manage.py shell`

シェルで以下コマンドを実行。

```
from hello.models import Hello
Hello.objects.create(lang=Hello.EN, hello='Hello, World !!')
Hello.objects.create(lang=Hello.JA, hello='こんにちは、皆さん！')
```

### settings.py

前に変更したのでOK。

### urls.py
```
urlpatterns = [
    path('hello/', hello.views.hello),
    path('hello_html/', hello.views.hello_html),
    path('hello_template/', hello.views.HelloTemplateView.as_view()),
    path('admin/', admin.site.urls),
]
```
↓

```
import hello.views
urlpatterns = [
    path('hello/', hello.views.hello),
    path('hello_html/', hello.views.hello_html),
    path('hello_template/', hello.views.HelloTemplateView.as_view()),
    path('hello_models/', hello.views.HelloModelsView.as_view()),
    path('admin/', admin.site.urls),
]
```

### 確認

ブラウザで以下URLを開く。

`http://サーバの静的IP/hello_models/`

![03_HelloWorld_model.png](https://qiita-image-store.s3.amazonaws.com/0/250012/a664bb7a-6c15-b1fd-f424-41d5ed0f9b18.png)