【Day 19】網頁更新資料庫資料表紀錄 (下)

2022-10-04

2022-10-17

接續昨天的內容，今天要來實作送出表單(Submit)去更新資料表資料的功能，不過在此之前，先讓我們回顧一下昨天表單的原始碼。

<h1>Update member</h1>

<form action="updaterecord/{{ mymember.id }}" method="post">
{% csrf_token %}
First Name:<br>
<input name="first" value="{{ mymember.firstname }}">
<br><br>
Last Name:<br>
<input name="last" value="{{ mymember.lastname }}">
<br><br>
<input type="submit" value="Submit">
</form>

從上面的原始碼可以看到，當按下Submit按鈕後，資料會被傳到action屬性設定的updaterecord/{{ mymember.id }}這個位址進行處理，且資料的傳遞方法採用post的方式。

然後我們可以依據表單的原始碼，做出以下判斷並逐步實作 :

需要在members/views.py撰寫名為updaterecord的方法，且方法是帶有request、id這2個參數的版本。
需要在members/urls.py新增到updaterecord/{{ mymember.id }}的 path，且這個path要使用帶有參數的特殊格式。

實際上點擊Submit後，資料傳送目的地的完整位址是members/update/updaterecord/{{ mymember.id }}

修改 Views

在members/views.py新增1個方法updaterecord，用來處理更新資料表資料的請求 :

#上面的東西都沒變所以省略...
#本次新增的內容
def updaterecord(request, id): #1
  first = request.POST['first'] #2
  last = request.POST['last'] #3
  member = Members.objects.get(id=id) #4
  member.firstname = first #5
  member.lastname = last #6
  member.save() #7
  return HttpResponseRedirect(reverse('index')) #8

因為path本身帶有參數的關係，所以在urls.py裡面，updaterecord方法實際會以updaterecord(request,id)的形式被呼叫。
我們可以從送出表單所產生的HttpRequest(即request)物件的POST屬性取得資料值，至於POST它是Key-Value的形式，這也是為什麼這邊要用request.POST['first']的形式去取得表單上name=first那欄的資料。
同上，取得表單上name=last那欄的資料
以獨一無二的id值將要更新的資料表資料(Record)抓出來。
使用類似物件導向的方式指定資料的firstname欄位要更新的值(即first)。
使用類似物件導向的方式指定資料的lastname欄位要更新的值(即last)。
將這次對資料(Record)的修改存到資料表，也就是更新資料表資料。
透過reverse('index')找到別名為index的path，再藉著HttpResponseRedirect將頁面重新導向指定路徑(即最初的資料表格頁面)。

修改 URLs

按下提交更新資料表單的同時，會對members/update/updaterecord/{{ mymember.id }}這個位址發出請求，所以我們需要在members/urls.py的urlpatterns新增1個path，讓該路徑變成可以訪問的狀態。

把members/urls.py改成下方這樣 :

from django.urls import path

from . import views

urlpatterns = [
  path('', views.index, name='index'),
  path('add/', views.add, name='add'),
  path('add/addrecord/', views.addrecord, name='addrecord'),
  path('delete/<int:id>', views.delete, name='delete'),
  path('update/<int:id>', views.update, name='update'),
  path('update/updaterecord/<int:id>', views.updaterecord, name='updaterecord'), #1
]