五南官網

網頁設計手冊(下)：網站開發案例實作

分享Facebook

作　　者╱

高慧君、魏仲良

出版社別╱

小五南

書　　系╱

學習高手

出版日期╱

2021/10/01 (1版 1刷)

I S B N ╱

978-986-522-997-9

書　　號╱

ZI23

頁　　數╱

312

開　　數╱

20K

定　　價╱

450 (特價 356)


●本書適用對象
1.內容針對學校市場所設計，中學生資訊課程參考用書。
2.一般讀者也可以學習，概念是可類推的自學書。
-------------------------------------------------

本書為《網頁設計手冊》的下冊，在上冊的部分，介紹使用Django來建立網站的基本16堂課程，就作者的教學經驗而言，對於初學者最重要的是有更多的不同案例來加強技巧的熟悉度，因此，作者為中學生在學校會接觸到的四個情境設計了四個相對較大型的主題網站，示範這些功能可以怎樣被實作出來，讓學習者參考。
--------------------------------------------------
●本書特色

1.案例設計由簡單到複雜，每個案例依功能切割成6~7個子單元。
2.案例中所使用到的資料模型由一開始線上報修的單一資料模型，到最後線上教室跨多個不同的資料模型的應用。
3.案例間相似的功能有些會刻意以不同寫法來實作，提供不同的思考角度。
      
●提供本書教學網址參考(內有與django有關的程式碼步驟)  http://joc.url.tw/

高慧君
國立臺灣師範大學資訊教育研究所資訊教育組碩士。現任臺北市立南港高級中學資訊科教師。網站開發經驗豐富，早期使用微軟asp+access撰寫網站，2014年開始研究Python後，試著改用Django來撰寫網站，由於Python有強大社群，所以想要寫的功能都可以在網路上Google到答案。因此整理了四個較大型校園網站開發實例課程，希望幫助更多人能夠順利掌握這項技術。

魏仲良
國立臺灣師範大學資訊教育研究所資訊科學組碩士。現任臺北市立大直高級中學資訊科教師。先前長期使用 PHP開發校內應用網站系統，與高慧君老師合作協助開發教學網站才接觸 Python與 Django。在參與彙整本書內容時，以從其他語言轉換過來的初學者的角度，將學習過程中記錄下的理解與心得加入內容中，希望能協助讀者更容易上手。

CH1 案例：線上報修
CH2 案例：討論區
CH3 案例：圖書借閱
CH4 案例：線上教室


大學申請入學準備指南：教授幫你畫重點	國中數學一點都不難─資優班老師，這樣教數學！	自主學習 226;寫出教授想看的學習歷程檔案

申請入學贏在書審與面試─附：百字簡述、課程學習成果、高中自主學習計畫、多元表現綜整心得、高中學習歷程反思、就讀動機、未來學習計畫與生涯規劃、自傳、自我介紹、面試等實用範例，適用學測、統測	國中數學基本素養１：數與代數的運算	國中數學基本素養２：幾何概念與性質

CH1 案例：線上報修
接下來這個案例是一個簡單的線上報修系統，為了方便使用，不需要登入系統即可登錄需要報修的事項，以及查看報修事項列表與處理狀況。只有管理人員需以帳號密碼登入後，才可針對每一則報修事項進行回覆、填寫維修的進度。
建立專案與應用程式
開啟終端機或命令提示字元程式，以下面指令建立一個名為 repair 的新專案：
django-admin startproject repair

注意：大小寫有別！
例如若將 TIME_ZONE 的設定值不小心登打為 'Asia/TaipeI' ，在需要處理時間資訊時會引發 ValueError 錯誤噢！

專案與應用程式都建立好了，在正式撰寫網站功能之前，先思考一下，有哪些資料需要記錄？這個案例是個簡單的線上報修系統，對於每個報修的事項，只需要記錄其當下最新的狀況即可，不記錄處理的歷程。

部分欄位由報修人填寫，部分欄位由處理人員填寫。另外關於報修時間以及更新時間這兩個欄位，則可由系統自動記錄，不需人為填寫。

單行程式碼太長，不容易閱讀怎麼辦？
當單行程式碼過長時，其實可以拆分成數行。
程式碼中若包含了函式呼叫，或建立物件指定初值時，會使用到小括號，Python 可以根據括號的匹配關係得知函式呼叫或物件初始化的程式碼的作用範圍到哪裡。如這幾行的程式碼，原本應該寫在同一行，也可以這樣拆分成好幾行。
若程式碼無法以括號標註作用範圍，另一種方式可在要接續下一行的行末手動加上反斜線 \ 表示本行程式碼未結束，需延伸到下一行。

對資料模型進行變更後，務必要在命令提示字元或終端機登打指令，先產生異動腳本，再套用（遷移）至資料庫：
1 python manage.py makemigrations
2 python manage.py migrate
另外，在第一次進行資料庫遷移時，記得以專案管理腳本的 createsuperuser.參數來建立管理員帳號：
3 python manage.py createsuperuser

接下來就可以將專案網站服務執行起來，以便在開發過程中進行測試：
1 python manage.py runserver 0.0.0.0:80

定義路徑規則
定義完資料模型之後，接著要實作網站的各項功能。先規劃一下有哪些功能，
以及要將這些功能分別安排在什麼路徑上提供服務。

決定好路徑與功能的對應關係之後，先修改專案的路徑規則檔 repair/repair/urls.py

接著就將焦點放在應用程式 log 上，先來定義它自己的路徑規則。請新增檔案 repair/log/urls.py

這邊定義了應用程式 log 自身的路徑規則，還記得前面在專案路徑規則中以 include() 函式將 'log.urls' 加入專案中嗎？這 4 條路徑規則在被加進專案時，還得在前面附加指定的前置字串 'log/'

導覽列一定要另存在別的檔案嗎？
在網頁基底範本的第 14 行，透過 django 範本的 {% include %}標籤引入外部的導覽列範本檔 navbar.html ，是為了方便在本書中說明變動之處，才刻意將導覽列另存在別的檔案以縮短單檔程式碼的篇幅。可以直接將導覽列範本檔的內容複製貼上，取代 {% include
'navbar.html' %} 這行程式碼，這樣就不需要另存一個檔案囉！

管理人員維護報修記錄
未登入的使用者新增報修記錄後，管理人員需要以帳號密碼登入系統之後，才能針對報修記錄回覆維修進度與狀況。
限定需登入才能回覆維修進度
視圖裡的 LogReply 類別需要限制在使用者登入之後才允許操作，請修改
.repair/log/views.py

自動填入表單預設值
管理人員在回覆維修進度時，希望可以直接預先將管理人員的資訊填入「處理人員」的欄位，不需要管理人員手動登打的話，需要再修改一下.LogReply 類別。

讓檢視與填表共用範本
我們在 repair/log/views.py 裡的 LogCreate 以及 LogReply 這兩個類別底下都沒有透過 template_name 屬性指定欲使用的頁面範本，而通用視圖 CreateView 與 UpdateView 的衍生類別預設會使用所屬應用程式/ 參考資料模型_form.html 當作其使用的頁面範本檔案，因此.LogCreate 與 LogReply 會共用頁面範本資料夾下的 log/logitem_form.html 。

除了這種另外定義一個頁面範本來顯示表單的做法之外，若想讓檢視報修記錄與維護報修記錄的頁面外觀看起來更一致的話，也可以考慮與檢視報修記錄共用同一個頁面範本。

修改表單元件外觀
預設的多行文字欄位（Textarea）元件的預設尺寸，在頁面上顯示起來僅占用了一半不到的寬度，若要使其占用整列的寬度，可以為其套用 formcontrol.CSS 類別。
前面示範過以 Javascript 來套用 form-control 類別，若不採用Javascript 的話，則需要在 Django 中自訂表單類別，然後在表單類別中指定輸入元件的屬性。
新增表單定義檔 repair/log/forms.py

檢視報修記錄新增回覆維修進度連結
管理人員在檢視報修項目內容之後，可以回覆目前的維修進度。請修改檢視報修記錄頁面範本 repair/log/templates/log/logitem_detail.html

報修照片上傳
有時文字的描述不足以說明故障的狀況，若能讓報修人上傳照片輔助說明，就能讓維護單位更容易明白報修的狀況。

新增行政人員帳號
我們可以運用 Django 內建的後臺管理系統來進行人員帳號的管理與維護，只要存取專案網站的 /admin/ 路徑，以初始建立的管理員帳號登入後，即可透過內建的管理程式管理人員帳號。
不過也可以自行撰寫處理程式，資料模型的部分可以直接使用預統預設的定義，搭配我們自行定義路徑規則、視圖及頁面範本，以便與我們的專案網站整合得更一致。
我們將在專案中另行創建一支應用程式專責處理人員帳號的維護，把報修項目與人員帳號的處理分開，當然也可以直接在應用程式 log 中撰寫相關程式碼就好，端看個人喜好。

視圖
在之前的例子中，對於權限管控，只很簡單地繼承 LoginRequiredMixin.來檢查使用者是否為登入的狀態才允許操作某些功能。不過在這個例子中，這個專案網站可能會開放給其他行政人員使用，所以應該要使用更進階的權限管理方式，否則只要登入後，每個人都可以新增/ 修改帳號，這就有點恐怖了。
Django 也有內建的基本的權限管控功能，可以為個別帳號針對每個資料模型指定4 種存取權限 view 、 add 、 change 、 delete 。