昨天嵌入Bootsrap的模板後，今天開始改造囉 ~

Title

Step 1 一定要先為自己的網頁取名

來到 index.html 把 Hello world拿掉，建立name的變數

<h1 class="display-3">{{name}}</h1>

接著到 view.py 自己給個name - Photo House，不用一樣哦

def index(request):
    return render(request, 'index.html', {
        'name' : "Photo House",
    })

再去runserver看網站就變囉~

Create Login

取好名後，來想想我們之後的網站要怎麼進行
Photo House 顧名思義就是放照片的家，這個專案其實是想做個類似Instagram的感覺
所以這是個大廳讓大家分享照片，背後會有照片由來、相關訊息

Sign in
那剛到首頁肯定是登入了，通常登入按鈕會在右上方
所以我們到Search旁新增

<button class="btn btn-success" type="submit">Sign in</button>

btn-success 的 class 會讓按鈕有顏色跟左邊Search不同

好像少了什麼
這樣的UI是好的嗎？User該如何填帳號、註冊，要另外跳視窗嗎?
我們分享照片 Search 好像也不是說很重要
那

直接改掉吧

• Create Register button
• Create Account / Password input

<input class="form-control mr-sm-2" type="text" placeholder="Email" >
<input class="form-control mr-sm-2" type="password" placeholder="Password" >
<button class="btn btn-success" type="submit">Sign in</button>
<button class="btn btn-primary" type="submit">Register</button>

讓右上方成為登入的地方囉，可以註冊也可以login對這project來說很適合方便
沒有最好的設計，只有最適合

Create Sign up

有了註冊紐，就要有註冊頁
那我們一樣在Templates folder底下建一個signup.html
裡面隨便寫個 hi signup，來看怎麼連過去 ~

一樣設定url、view

# url.py
from classes.views import hello_world, index, get_signup

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^hellonuts/$', hello_world),
    url(r'^index/',index),
    url(r'^signup/',get_signup)
]

我們將get_signup做為render signup的function
接著設定view

# view.py
def get_signup(request):
    return render(request, 'signup.html')

還有一步很重要的不能lost，你的按鈕沒有超連結怎麼連

# index.html
<a href="/signup.html"><button class="btn btn-primary" type="submit">Register</button></a>

讓我們來看看!

咦 怎麼是問號，我也問號了
...
原來是剛剛的button的type有錯

• type = submit，點擊之後它會自動幫我們提交form(我們根本還沒form)
• type = button，它就是個button

改一下後，成功！

Finish Register page

Signup的page裡，上面的Navbar跟首頁相同
所以我們可以直接做copy/paste
接著我們要做可以註冊的 form，裡面要能讓user填相關資料

<div class="container">
    <h1>Register</h1>
    <form>
    <label>Enter your Name</label>
    <input class="form-control" type="" name="">
    <label>Enter your E-mail</label>
    <input class="form-control" type="" name="">
    <label>Enter your Password</label>
    <input class="form-control" type="" name=""><br>
    <button class="btn btn-primary btn-block">Submit</button>
    </form>
</div>

就有一個簡單的註冊頁面囉，如果想自己設計的也可以~

Template tags

先預告，下節會有更好玩的！

使用時機

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

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