在開始前先複習我們之前做過什麼?

1. 在資料庫建立Members資料表
2. 用Python Shell在資料表新增5筆資料
3. 以表格的形式在瀏覽器畫面上呈現資料表資料

今天我們要做的是在網頁中以提交表單的方式新增資料紀錄(Record)到資料庫資料表上，並且能夠在新增後看到目前所有的資料表紀錄。

由於內容比較多，所以我選擇將它切成上、下兩個部分做說明，而為了文章閱讀的連貫性，個人非常建議上、下兩篇文章都更新後再閱讀這個主題。

讓我們先來回憶昨天的進度 :

那我們今天要做什麼呢? 既然要讓網頁的訪問者能在網頁上新增資料紀錄到資料表上，我們理所當然地就要提供新增資料紀錄的表單和進入表單的連結囉! 我們今天要做的就是這兩個小東西，表單本體和進入表單的連結。

新增進入表單的連結

還記得昨天建立的index.html嗎? 我們需要在它的裡面再新增一個連結(<a></a>)，讓訪問者能點擊它跳轉到表單，像下面這樣:

<h1>Members</h1>

<table border="1">
{% for x in mymembers %}
<tr>
<td>{{ x.id }}</td>
<td>{{ x.firstname }}</td>
<td>{{ x.lastname }}</td>
</tr>
{% endfor %}
</table>

<p>
<a href="add/">Add member</a>
</p>

新增完進入表單的連結，接著就是製作表單本體了。

製作新增資料紀錄的表單

跟之前一樣，所有的Template(.html)都會被放在temlates資料夾下面，所以在製作表單的時候，我們需要在members/templates新增名為add.html的檔案，也就是表單本體。

新增完後，把它原本的空白內容改成像下面這樣 :

<h1>Add member</h1>

<form action="addrecord/" method="post">
{% csrf_token %}
First Name:<br>
<input name="first">
<br><br>
Last Name:<br>
<input name="last">
<br><br>
<input type="submit" value="Submit">
</form>

咦，上面好像出現了一個以前沒看過的{% csrf_token %}，它到底是什麼? 又是用來幹嘛的呢? 關於這些疑問，在Day 16會有額外的小番外篇來介紹它。

至於表單要用GET還是POST，它們兩者之間的故事有點長，就不另外在這邊說明，網路上有蠻多關於表單傳送的文章，寫得都非常不錯，有興趣的話可以利用空餘的時間閱讀它們。

回到正題，我們新增完表單後，還有什麼沒有做呢? 沒錯，我們的Django Project根本就不認識它，所以直接點擊網頁連結是沒辦法成功進入表單的，而讓它們互相認識的方法很簡單，只要依序修改members的views.py和urls.py就可以囉!

修改 Views

我們需要在members/views.py下面新增一個名為add的方法，用來處理訪問者點擊連結想要進入表單頁面所發出的請求。

from django.http import HttpResponse
from django.template import loader
from .models import Members

def index(request):
  mymembers = Members.objects.all().values()
  template = loader.get_template('index.html')
  context = {
    'mymembers': mymembers,
  }
  return HttpResponse(template.render(context, request))
  
def add(request):
  template = loader.get_template('add.html') #1
  return HttpResponse(template.render({}, request)) #2

1. 載入我們剛剛製作好的表單(Template)
2. 把表單回應傳送到訪問者的瀏覽器並顯示出來，因為不需要送資料到表單，所以在方法內傳入{}(空的context)。

但修改完views.py就急著點連結跑去127.0.0.1:8000/members/add，還是不會看到表單喔! 因為表單的路徑還沒有被設定在urls.py裡面，所以它找不到能抵達瀏覽器的路。

修改 URLs

為了讓表單找到抵達瀏覽器的路，我們需要修改members/urls.py裡面的urlpatterns，把到表單的路徑寫在裡面。

from django.urls import path
from . import views

urlpatterns = [
  path('', views.index, name='index'),
  path('add/', views.add, name='add'), #1
]

1. 新增到members/add的路徑，當收到訪問者訪問該路徑的請求則以views.py的add方法處理和回應。若有必要在views或templates使用到這個路徑，則可用add代稱。

修改完URLs後，表單終於找到抵達瀏覽器的路，接下來看看成果吧!

啟動 Server 檢視成果

1. 打開CMD並切換到虛擬環境(python venv)的資料夾路徑下

   (實際venv路徑不一定會跟我一樣喔!)

   

2. 輸入以下指令啟動虛擬環境

   Scripts\activate.bat
   

   

   啟動虛擬環境後結果如下:

   

3. 接著切換路徑到Django Project所在的資料夾下

   

4. 接著輸入以下指令Start Server

   py manage.py runserver
   

   

5. 在瀏覽器輸入對應的網址(127.0.0.1:8000/members/)，接著點擊下方連結就可以進入新增紀錄的表單頁面

   

   

明天就要來實作提交表單並新增資料紀錄到資料表上的功能啦!

補充資料

Django, name parameter in urlpatterns
淺談 HTTP Method：表單中的 GET 與 POST 有什麼差別？