django004#Template使ってみよう

#前回
いままでのサイドはHello wordとか退屈なものばかりで、これからは簡単なTemplateを作りたいと思います。
今回から少しdjangoのドキュメントを参照しながらやりますので、固い話聞きたくないならスルーしてくださいねー

#流れ
1. renderをを使ってHTML Codeなどを返し
2. 名前の付け方
3. Template言語を使ってみよう
4. CSSを入れてみよう
5. もしうまく更新できないなら…

##render()をを使ってHTML Codeなどを返し

Filesの構成はこうになります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/36a926b3-1195-01fc-ad34-36dfd45094cc.png)

まずhelloworld/view.pyを修正し、homepage()をrenderを使います。

```
from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.
def homepage(requeset):
	return render(
		requeset=requeset
		,template_name="helloworld/home.html"
		)

```

>ドキュメントP.274
Being a web framework, Django needs a convenient way to generate HTML dynamically. The most common approach relies on templates. A template contains the static parts of the desired HTML output as well as some special syntax describing how dynamic content will be inserted. 

Web Frameとして、Djangoは変換作業し動的なHTMLを作ります。一般的にはTemplatesで返しします。Templatesの中には静的HTMLコードもあり、特別なSyntax({}とか、{%%}とか)で動的な内容も含められますって感じかな？ちょっと適当な翻訳ですが。

次はhome.htmlに簡単なCodeを入れます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/5286e97b-8e15-744e-9315-2f8a48d04997.png)

サーバを走ってみよう。行けそうですね！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/9429641c-3f5f-ff1a-be62-deee3264715a.png)
##名前の付け方
なんでhomeworld/templates/helloworld/hom.htmlのような構造になったでしょうか？それはもし私たちはTemplatesを参照してるとき、アプリケーションの中にたくさんの“Home”とか“About”とか”/“とかあります。そうになると被る可能性がありますので、そういう風に付けました。

##Template言語を使ってみよう
みんなさんFlaskを使ったことありますか？DjangoのTemplate言語はFlaskのJinja2と似てますのでFlaskが慣れてる方なら全然難しく感じないと思います。

>ドキュメントP284：
変数
{{    }}
My first name is {{ first_name }}. My last name is {{ last_name }}.

>Contextはこのようなら：
{'first_name': 'John', 'last_name': 'Doe'}
実際Print Outされたときの結果はこうになります：
My first name is John. My last name is Doe.

>辞書の場合：
{ my_dict.key }}

>Attributeの場合：
{{ my_object.attribute }}

>List-Indexの場合：
{{ my_list.0 }}
Tags
｛％if ％｝｛％endif％｝
｛％for ％｝｛％endfor％｝

>Comments
{# this is comment#}

まずview.pyを編集しますね～
ModelsからmydbをImportします。
renderを使ってmydbの中にある全てのObjectsを返します。

```
from django.shortcuts import render
from django.http import HttpResponse
from .models import mydb

# Create your views here.
def homepage(request):
	return render(
		request=request
		,template_name="helloworld/home.html"
		,context={"mydb":mydb.objects.all}
		)
```

次はhomeworld/templates/helloworld/hom.htmlを編集しますね～

```
<h1>seems like the template is works</h1>

{%for m in mydb %}
	<p>{{ m.title }}</p>
	<p>{{ m.post }}</p>
	<p>{{ m.published }}</p>
{%endfor%}
```
それでOK。Local hostをみたら…
できました！と言いたいけど、なんだかちょっと変ですね…
HTMLのTagsもそのまま表示されましたね～
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/0c6804f7-e1ed-d08c-40f6-5d0fc08003a2.png)

homeworld/templates/helloworld/hom.htmlをもうちょっと工夫しますね！
<h1>seems like the template is works</h1>

```
{%for m in mydb %}
	<p>{{ m.title }}</p>
	<p>{{ m.post |safe}}</p>
	<p>{{ m.published}}</p>
{%endfor%}

```

>ドキュメントP1375
safe
Marks a string as not requiring further HTML escaping prior to output. When autoescaping is off, this filter has noffect

今度はokになりましたね！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/741db4f7-a2cc-921d-b656-2d7696351bb9.png)

##CSSを入れてみよう
いまのページはうまく動いてますが、まだちょっとダサいですよね。
CSSを入れてみましょう。前回tinymceをインストールしたこと覚えてますか？
じゃこれをImportしてみましょう。

```
<head>
	{% load static %}
	<link href="{% static 'tinymce/css/prism.css'  %}" rel='stylesheet'>
</head>

<h1>seems like the template is works</h1>

{%for m in mydb %}
	<p>{{ m.title }}</p>
	<p>{{ m.post |safe}}</p>
	<p>{{ m.published}}</p>
{%endfor%}

<script src="{% static 'tinymce/js/prism.js' %}"></script>
```
変えましたね！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/7b0b545f-824c-40f2-4776-88b292a8d2d0.png)

次はCss fileをImportしてみますね。
今回使ってるのはw3c.css、あまり人気がなさそうけど個人的にはすこく好きですー
(ま、お好みですよ～お好み)
https://www.w3schools.com/w3css/default.asp

File構成はこうになります：
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/81e999e4-ac9c-5bdf-8825-27486bd002cf.png)

次はこhelloworld/templates/hellworld/home.htmlを修正します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/306928bd-fc77-7822-ae62-42590a690c7d.png)

こんなように修正しますー

```
<head>
	{% load static %}
	<link rel='stylesheet' href="{% static "helloworld/w3c.css"%}">
</head>

<h1 class="w3-text-sand">seems like the template is works</h1>

{%for m in mydb %}
	<p class="w3-text-orange">{{ m.title }}</p>
	<p class="w3-text-deep-purple">{{ m.post |safe}}</p>
	<p class="w3-text-lime">{{ m.published}}</p>
{%endfor%}
	
<script src="{% static 'tinymce/js/prism.js' %}"></script>
```
おお！できました！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/fe53b72a-a070-3e2b-20ce-9fef45f2d514.png)
##もしうまく更新できないなら…
Ctrl+Shift+Iで。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/01f8c06b-6e57-55b0-5e55-48da77c72a38.png)

以上です！お疲れ様です！