iT邦幫忙

2022 iThome 鐵人賽

DAY 18
0
Modern Web

Django 初心者之旅系列 第 18

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

  • 分享至 

  • xImage
  •  

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

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

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

修改 Templates

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

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

<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個.htmlupdate.html :

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

<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後,可以用類似物件導向的方式存取各個屬性值。

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

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

修改 URLs

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

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

修改完URLs後,我們還缺1個在members/views.pyupdate方法。

修改 Views

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

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

#上面的東西都沒變所以省略...
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的參數包含requestid
  2. 把特定id的資料表紀錄(Record)拿出來放到mymember裡面。
  3. 載入update.html為要顯示在瀏覽器畫面的template
  4. contextkey-value的形式,它是要傳入template(update.html) 的資料,這裡把剛剛拿到的資料表紀錄放進去。
  5. 將資料(context)傳入template(update.html),然後把網頁渲染到瀏覽器的畫面上。

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

啟動 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/),接著點擊update那欄就可以看到這次的成果

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

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


上一篇
【Day 17】網頁刪除資料庫資料表紀錄
下一篇
【Day 19】網頁更新資料庫資料表紀錄 (下)
系列文
Django 初心者之旅31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言