iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 18
0
Modern Web

🍐放學後的網頁開發系列 第 18

[Day18] 柚子放學後的網頁生活 - Django Template tags ( For )

我們今天要將資料庫裡面的Data在網頁上呈現
之前有講過了,這邊就快速 Create Photo的 model

# models.py
from django.utils import timezone

class Photo(models.Model):
    title = models.CharField(max_length=100)
    path = models.CharField(max_length=100)
    story = models.TextField()
    create_date = models.DateTimeField(default=timezone.now)

我們需要紀錄title、path(照片位置)、story(圖片背後故事)、建立日期

寫完後,回憶一些build model 的流程

build models -> make migrations -> migrate
這很重要 ! 後面要記得囉 ~

python manage.py makemigrations

python manage.py migrate

在裡面簡單create測試一下

View & DB

我們在View裡import剛剛的model

from classes.models import Photo

接著在index function裡把剛剛create的object帶入

def index(request):
    name = 'Photo House'
    Photos = Photo.objects.all()
    return render(request, 'index.html', locals())

locals() - 顧名思義就是幫你帶入local variable,可以省去很多麻煩

接著我們要把所有Photo相關資訊顯示在首頁,那要用什麼工具呢?

Template tags

先預告,下節會有更好玩的!

使用時機

  • 邏輯判斷 - if / else
    • if login 成功 => Display data
    • else => Display login button
  • 重複的 code - for loop
    • 列出相同資訊 / 片段
  • 格式化 Template 的變數
    • 日期格式化

For loop

還記得寫 Python 若想print出 list 裡的所有元素,我們會用 for X in Y
而在 Django,我們用的是 -- {% for %}

用法

{% for <element> in <list> %}
    ...
{% endfor %}

這邊特別注意用完,要給它 endfor 它才會知道哪裡結束哦

接著就開始改寫index,把需要重複的地方加上for
每個photo都需要把所有資訊叫出來

<div class="row">
    {% for photo in Photos %}
    <div class="col-md-4">
         <h2>{{photo.title}}</h2>
         <img src="{{phto.path}}" alt="">
         <p>{{photo.story}}</p>
         <p>{{photo.create_date}}</p>
    </div>
    {% endfor %}
</div>

因為還沒有什麼內容,只有剛剛create的第一個object

接下來就可以自己進 admin 做CRUD ~
那我們進admin看看

怎麼沒有看到剛新增的Photo
這時候就要去檢查admin.py內有沒有完成註冊

from django.contrib import admin

# Register your models here.
from .models import Teacher,Photo

admin.site.register(Teacher)
admin.site.register(Photo)

確認完成後再回去看admin頁面

成功後可以自己去玩CRUD,看頁面的變化~

Today's final - title/story/date complete

下課囉 ~ 請鎖定 柚子放學後的網頁生活


上一篇
[Day17] 柚子放學後的網頁生活 - Django Static Resource
下一篇
[Day19] 柚子放學後的網頁生活 - Django Template tags ( If )
系列文
🍐放學後的網頁開發30

尚未有邦友留言

立即登入留言