2022 iThome 鐵人賽

【Day 18】 網頁更新資料庫資料表紀錄 (上)

目前我們學會如何實作在網頁上新增、刪除資料表資料的功能，接下來會學到如何實作在網頁上更新資料表資料的功能，為避免內容過多，所以會分成上下2個部分，各自獨立寫成文章。

那具體來說，我們今天到底會做些什麼呢?

  1. 在members資料夾的index.html新增連向更新資料表資料的表單連結
  2. 在members資料夾下建立更新資料表資料的表單update.html
  3. 修改members資料夾的views.py和urls.py讓訪問者能順利看到更新資料的表單

修改 Templates

為了讓訪問者能順利進到表單並更新資料表上的資料，我們需要在members/indexx.html原先的資料表格上，再添加1欄update連結到表單。

把members/index.html修改成像下方這樣 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<h1>Members</h1>

<table border="1">
{% for x in mymembers %}
<tr>
<td>{{ x.id }}</td>
<td>{{ x.firstname }}</td>
<td>{{ x.lastname }}</td>
<td><a href="update/{{ x.id }}">update</a></td> #1
<td><a href="delete/{{ x.id }}">delete</a></td>
</tr>
{% endfor %}
</table>
<p>
<a href="add/">Add member</a>
</p>
  1. 在原始碼的表格新增1欄到更新資料表資料的表單連結，跟上次實作刪除資料表資料的功能一樣，這次我們依然會用到帶有參數的非固定連結update/{{ x.id }}，所以在修改URLs的時候，也會採用比較特殊的格式。

目前改完看起來會是這樣 :

新增 Templates

新增到表單的連結後，我們要來製作更新資料表資料的表單啦!

在members/templates資料夾下面新增1個.html檔update.html :

然後把原先空白的檔案改成下面這樣 :

1
2
3
4
5
6
7
8
9
10
11
12
<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>

關於mymember.id/firstname/lastname資料的取得，跟之前一樣會透過views.py裡面的方法，將資料表上對應要更新的資料值拿出後傳給update.html(以Context的形式傳入，Key-Value)，資料進入update.html後，可以用類似物件導向的方式存取各個屬性值。

這邊會這樣寫是希望在更新資料之前，可以看到現有的資料值，而不是進來就是空白的更新表單，導致對照修改資料前後差異的不方便。

表單新增完後看起來會像這樣 :
(實際上做到這邊還無法看到表單跟資料，因為還沒修改Views跟URLs)

修改 URLs

修改URLs能讓表單找到通向訪問者瀏覽器的路!

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

1
2
3
4
5
6
7
8
9
10
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') #1
]
  1. 再次複習在【Day 17】出現的新格式<int:id>，它是用來讓path可以攜帶參數，前面的int是參數型別，後面的id則是參數名稱。除此之外，views.py的update方法在處理請求的時候，跟以往不同會以update(request,id)的形式被呼叫，而最後的路徑別名則是跟之前相同沒有改變功能。

修改完URLs後，我們還缺1個在members/views.py的update方法。

修改 Views

讓表單找到正確的路後，我們需要在members/views.py裡新增名為update的方法，用來處理訪問者拜訪表單所產生的請求。

把members/views.py修改成像下面這樣 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#上面的東西都沒變所以省略...
def delete(request, id):
  member = Members.objects.get(id=id)
  member.delete()
  return HttpResponseRedirect(reverse('index'))

#本次新增的內容
def update(request, id): #1
  mymember = Members.objects.get(id=id) #2
  template = loader.get_template('update.html') #3
  context = { #4
    'mymember': mymember,
  }
  return HttpResponse(template.render(context, request)) #5
  1. 因為在members/urls.py使用帶有參數的path，所以方法update的參數包含request和id。
  2. 把特定id的資料表紀錄(Record)拿出來放到mymember裡面。
  3. 載入update.html為要顯示在瀏覽器畫面的template。
  4. context採key-value的形式，它是要傳入template(update.html) 的資料，這裡把剛剛拿到的資料表紀錄放進去。
  5. 將資料(context)傳入template(update.html)，然後把網頁渲染到瀏覽器的畫面上。

最後來檢視一下今天的成果吧!

啟動 Server 檢視成果

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

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

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

    1
    Scripts\activate.bat

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

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

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

    1
    py manage.py runserver

  5. 在瀏覽器輸入對應的網址(127.0.0.1:8000/members/)，接著點擊update那欄就可以看到這次的成果

    • 點擊 update
    • 可以看到該筆紀錄(Record)的資料被預設填入框內

明天會繼續實作提交表單去更新資料表資料的功能。

分享到