前面10幾天的內容中，我們瞭解了許多開發網站的基本知識，包含：使用MVC架構達成關注點分離、資料傳遞、Bootstrap套版、HTMLHelper方法、Entity Framework存取操作資料庫檔案...等等，也練習了簡易的CRUD範例。接下來幾天就是運用之前講的知識，來試著做一個小型的購物中心網站，這樣感覺比較有成果對吧！

● 網站架構

在開始敲程式碼之前，先思考一下網站架構如何規劃。我們簡單分成兩部分，首先是非會員或未登入時可以操作的內容，一開始進入的主畫面就是首頁，首頁畫面上會有商品資訊，另外在導覽列上會有提供註冊與會員登入的連結。所以歸納以上我們就建立一個HomeController控制器，裡面會有Index()、Register()、Login()動作方法，以及撰寫各方法對應的View，架構如下圖所示：

第二個部分則是會員登入後能操作的內容，同樣會進入首頁，但不同的是會有購物車可以查看與加入/移除商品，確認購買後可以查看訂單與明細，另外登入的連結會變成登出鍵。歸納以上我們建立MemberController控制器，底下則會有Index()、ShoppingCar()、OrderList()、Logout()...等動作方法，架構如下圖：

瞭解上述後終於可以開始來建構網站內容啦～

● 建立新專案

首先建立一個新的ASP. NET Web應用程式(.NET Framework)專案，專案名稱取作「DemoShoppingWebsite」。

建立時記得選擇「MVC」範本。

● 加入資料庫檔案(Local DB)

專案建立後我們先將網站會用到的資料庫加進來，首先至下方連結下載範例會使用到的資料庫檔案。
https://github.com/mysagittarius1/DataBase/blob/main/DemoShoppingWebsite/dbShoppingCar.mdf

接著將此檔案加入到專案內的App_Data資料夾，完成後如下圖所示：

在方案總管內滑鼠點擊2下App_Data資料夾內的dbShoppoingCar.mdf檔，可以於伺服器總管查看資料庫內的資料表內容，如下圖所示有：會員、訂單、訂單明細、產品共4張資料表。在各資料表按下滑鼠右鍵點選「顯示資料表資料」，可以發現已經有先建立數筆資料在裡面了。

● 加入產品圖檔

接著我們來加入各產品的圖片檔案，目標是在顯示產品資訊時可以有商品示意圖，看起來也比較漂亮對吧～

至下方連結下載image.zip檔，解壓縮後直接將裡面的image資料夾加入專案當中。
https://github.com/mysagittarius1/DataBase/blob/main/DemoShoppingWebsite/image.zip

加入完成後如下圖所示。

另外可以對照一下，產品的圖檔名稱會和資料庫內table_Product資料表裡面Image欄位相對應，這邊先稍微記得這點。

● 使用Entity Framework建立資料模型

有了資料庫檔案後，就可以利用Entity Framework的功能來快速建立Model，Day 10的時候有介紹做法，以下快速說明步驟：

1. 於Model資料夾內新增ADO. NET實體資料模型，並命名為「ShoppingCar」。
   

2. 選擇模型內容為「來自資料庫的EF Designer」
   

3. 資料連接設定照預設即可，直接按下一步。
   

4. 使用EF版本也維持預設 6.x版本即可。
   

5. 勾選模型包含的資料庫物件如下圖，按下「完成」後就會開始自動建立實體資料模型。
   

6. 建立完成後如下圖所示。
   

● 小結

那麼今天就先到這邊吧～明天繼續來一步步製作網站內容^^