ASP.NET 5 / .NET Core 網路購物商城

課程創作: MIS2000 Lab.

課程適合地區:全球

課程影片總長度: 5.1小時

最後更新日期:2020-12-30

分享課程:
方案一
單購本課程
NT3,990
方案二
NT6,490
NT4,990

課程介紹

ASPNET5 NETCore online store MIS2000Lab title
ASPNET5 NETCore online store MIS2000Lab 1

你是否也曾疑惑,學會了 ASP.NET Core / ASP.NET 5 的 MVC 之後,能應用在什麼地方呢?為什麼學了這麼多,卻寫不出像樣的成果?

本課程特別實作一個 「網路購物商城」 範例,讓學員從線上網站的實務中,拆解每個功能與步驟。本範例搭配微軟 SQL Server 的 AdventureWorksLT 範例資料庫,剛好可以整合「產品、訂單明細表、客戶」三個關連式資料表的應用,做出一個具體而微的網路購物商城。

以「網路購物商城」為主題,讓大家以「快速升級」的熟悉感,從 .NET Framework (完整版)的 ASP.NET MVC 5 輕鬆換成 .NET Core MVC (開源版、跨平台版)也就是 ASP.NET 5。

再次強調:只要您學過 MVC 入門三天課程,本課程讓您「快速升級 .NET Core / ASP.NET 5」絕非「砍掉重練」。 14 個主題加上 4 個回家作業,另有一個補充教材。只要您願意學、願意親自動手練習,一定能寫出自己專屬的作品。

ASPNET5 NETCore online store MIS2000Lab title
ASPNET5 NETCore online store MIS2000Lab 2

很多上過課、買書自修的朋友,常常發現自己學到很多基礎技巧,但合併起來卻做不出任何東西?想寫一個專題卻無處下手,充滿無力感。

這門課將會介紹購物網站的常見功能,不管是(1) 網站首頁的主表明細(Master-Detail)、(2) 關鍵字搜尋、(3)大量數據的分頁展示。更搭配 (3)檔案上傳(FileUpload)將圖片以二進位存入資料表,再透過程式還原並展示在網頁上。(4) 會員登入與管理,採用了微軟推薦的 CalimsIdentity,讓您可以區分網站的前後台。(5)也有 WebAPI 的簡單示範。各項功能一應俱全。

ASPNET5 NETCore online store MIS2000Lab 3

重點是課程最後的「一對多」關聯式的訂單與購物車,不管是後台管理區的報表呈現,或是前台的採購行為,這些務實的購物網站功能,不但讓您重新複習各種基本招式,更能恍然大悟「喔!原來這麼多功能,都是三個基本招數變化而來啊」。這門課不光是讓您觀摩而已,更要讓您開竅,讓您真的能整合運用,寫出一個完整的專題。證明自己學到的東西,都能千變萬化。

ASPNET5 NETCore online store MIS2000Lab title
課程導讀

課程介紹與目標學員的基礎能力。 在您進入課程之前,請先評估自己的能力。建議已經完成前三天 ASP.NET MVC 入門課程的學員,參與本課程才能真正學到經驗。這是一個簡化的課程,透過拆解一個網路購物商城,為您解說各種功能,對應您以前學過的招式。對於已經入門 ASP.NET Core / ASP.NET 5 MVC 的學員來說,是一種挑戰也是一種複習。

資料庫範例下載與安裝

先介紹「 網路購物商城 」會用到的資料表架構與特點。這個專案會把上傳的圖檔存入資料表,所以用到了一些特別的設定。本範例搭配微軟 SQL Server 的 AdventureWorksLT 範例資料庫,剛好可以整合「產品、訂單明細表、客戶」三個關連式資料表的應用 。

資料庫範例下載與安裝 2

安裝必要的 NuGet 套件,例如:Entity Framework Core。透過 Scaffold-DbContext 指令將資料庫轉換成 Context,並把資料表逐一對應為 ViewModel、類別檔。要存放二進位的資料表欄位,變成類別檔會是怎樣的資料型態。

網站首頁的主表明細

網站首頁的主表明細(Master-Detail)是第一個基本招式,最適合初學者入門。只要打好基礎,後續的變化都從這裡展開。List 範本與 IEnumerable如何展示大量數據。 範例寫在 Shop 控制器裡面。

網站首頁的主表明細 2

說明。Detail 範本的檢視畫面跟上一節的List範本有何差異?能夠學會這兩節的基本招式,將來對付一對多的關連式報表,就沒有問題。

作業 1

提供一個家庭作業,讓老師陪著您一起完成,透過自己動手做,親自複習課程重點。本範例帶您瞭解一對多關連式資料表,購物網站的「產品種類(Product Category)」是怎麼區分大小種類?

作業 2

「單一產品」的細部規格說明,如果搭配圖片一定更吸引人。因為 AdventureWorks 範例資料表將圖片存在資料表裡面,也實作 FileContent 如何將這些二進位的內容,還原成網頁圖片。

作業 3

改用 WebAPI 做出上一個作業的相同功能,用最簡單的範例,讓您體驗「沒有畫面的 WebAPI 網頁程式」。因為 AdventureWorksLT 範例資料庫將圖片存在資料表裡面,如何將這些二進位的內容,還原成網頁圖片。

分頁

以 Google 為例,當您搜尋的關鍵字有上千筆紀錄時,您必須把搜尋結果分頁展示,每一頁展示二十筆記錄,一頁一頁呈現,才能縮減反應時間,減低網站負擔,所以「分頁」功能是每個網站必備的! 這不是坊間常用的套用現成元件,而且親自動手寫程式做出「分頁」。真正讓您學到原理也能動手做出來,才是程式設計師的基本功。

資料新增

第三個基本招式,資料新增(Create)往往是初學者面臨 MVC 時最容易卡關的地方。如果您學會這一招,搭配前面的主表明細(Master-Detail、首頁的資料呈現),將來要改寫成「編輯」「刪除」都易如反掌。範例寫在 Shop3 控制器裡面。

檔案上傳

上一節課的資料新增(Create)已經不簡單了,還要配檔案上傳(FileUpload)把圖片轉成二進位寫入資料表。而且在 .NET Core / ASP.NET 5 改用 IFormFile 來做,跟以前 .NET Framework 的 MVC5 小有差異。這門課剛好帶您學會這一招。

關鍵字搜尋

產品搜尋,以「關鍵字」進行模糊搜尋,是所有網站必備的基礎功能。哪一個網路購物商城不能搜尋產品呢?這個範例結合了「資料呈現」與「新增」這三個基本招式。如果您可以寫出站內搜尋,就具備基本能力。 補充教材 - HTML Form 表單的 Post 與 Get 有何差異? 在資料新增(Create)與 WebAPI 都會提到的 [HttpGet ]與 [HttpPost] 有何差異,這則補充教材可以為您解說。

會員登入

.NET Core / ASP.NET 5 的會員登入,採用微軟推薦的 ClaimsIdentity (不使用 ASP.NET Core Identity 的 Cookie 驗證)。不需要學習繁瑣的功能,用最短的時間學好會員登入。我們先用一個簡單範例讓您瞭解 Authentication (驗證) / Authorization(授權)。

會員登入 2

學會上一節的基本功以後,現在連結資料庫,讓您輸入帳號、密碼直接比對是否真有這名會員?他的權限多高,可以看見哪些網頁?還有 [Authorize] 的使用方式等等。

報表

一對多的報表是每一個網站的後台管理區,老闆最常用到的功能。同時考驗初學者是否真的瞭解「一對多」關連式資料庫?是否可以靈活運用?很多初學者不是寫不出程式,而是看不懂 「一對多」關連式資料庫 。本範例產生的檢視畫面( List 範本 )無法直接套用就完成,還需自己動手改寫調整。非常適合初學者練習,藉此提升能力。

報表 2

本範例是上一節的改版,也是加強練習。透過 Details 範本不同的寫法,考驗您是否真的瞭解?真的能做出變化? 本範例產生的檢視畫面,必須動手調整與改寫,不是直接套用 Details 範本就能完成。非常適合初學者練習,藉此提升能力。

作業 4

本範例是前面兩節的改版,也是給您加強練習的回家作業。只要您願意親自動手做,體會其中的差異,就能學到更多技巧。

購物車(簡易版)

終於來到最後的「購物車」,一對多的關連式訂單。這個範例需要結合上面的各種技巧,所以我們先做一個「簡易版」購物車,以靜態的內容讓您瞭解原理作步驟。如果您可以掌握 EF Core 的技巧,成功新增一對多的訂單。下一節課才有機會「動態」加入各種選購產品。

購物車(完整版)

客戶在畫面上掏選喜歡的產品,輸入數量並加入購物車。最後按下「付款結帳」的按鈕 , 把購物車裡面的預購商品,轉成「正式訂單」。這樣的功能並不容易,初學者如果能循序漸進的學習,本課程最後將融合前述的各項技巧,為您示範購物車與一對多的關連式訂單。千萬不要心急,跳著學習。唯有從頭到尾耐心學好每一招,您才能融會貫通。

ASPNET5 NETCore online store MIS2000Lab title
  • 以實作優先:減少理論說明,大量練習範例,講求從做中學。
  • 錯誤學習法:透過錯誤的範例從中學習,並找出自己的盲點。
  • 採用微軟 AdventureWork 範例資料庫,讓學員從真正的專案中,重新思維並複習自己以前學過的基礎招式,真正轉化成實戰經驗。
  • 對於已經學過 ASP.NET MVC5 入門三天課程的學員,輕鬆自在掌握幾個小改變,本範例讓您無痛升級到 .NET Core / ASP.NET 5,絕對不需痛苦的砍掉重練。這是最快、最省力的升級路徑。
ASPNET5 NETCore online store MIS2000Lab title
ASPNET5 NETCore online store MIS2000Lab 4

學員上課後會學到什麼或能做什麼

  • 以實際上線的網站專案 - ASP.NET Core/ ASP.NET 5 MVC 「網路商城」為例。用實際網站為您解說 MVC 各種功能。從實戰中拆解範例與學習,更具成效。
  • 以實際網站來解說 ASP.NET Core /ASP.NET 5 MVC 的架構與觀念,為您解析 Model-Viewer-Controller 三者的關聯。
  • 除了基礎 CRUD 必備功能之外,本課程加入 WebAPI 入門與「搜尋」、搭配檔案上傳 、 一對多關連式資料表的「訂單新增」(此為本課程重點)......等等功能。
  • ASP.NET Core / ASP.NET 5 的 ClaimsIdentity 會員登入與權限控管。
  • 將資料表裡面二進位的內容,恢復成圖片格式,重新呈現在 HTML 網頁上。
  • 提供多項家庭作業,讓您反覆練習課程中的關鍵主題。

學員上課前需具備哪些軟、硬體設備或常識

  • 建議完成前面三天的入門課 - 「ASP.NET MVC 教學 - 由零開始的入門課」或已經會寫 ASP.NET MVC(.NET Framework 完整版)的朋友,再來學習本課程(.NET Core / .NET 5.0)。本課程雖然已經降低難度,但不適合毫無基礎的初學者。
  • 知道資料庫(DataBase)與簡單的 T-SQL 指令或是基本的 LINQ 語法,如:CRUD。 課程所需軟體皆可免費下載。
  • Visual Studio 2019 或後續新版,請下載社群版(Community版)。
  • 建議使用 Windows 作業系統。因為 Visual Studio Code 與 Visual Studio for Mac 與教學畫面仍有差異,不適合本課程。
  • SQL Server Express 版(免費)。建議使用 SQL Server 2012(Express 版)或後續新版。

課程適合對象

  • 建議完成「ASP.NET MVC 教學 - 由零開始的入門課」或「ASP.NET Core 快速升級之道」後再來學習。
  • 需要撰寫 ASP.NET MVC 網頁系統、或對於網頁與資料庫的開發有興趣的朋友。
  • 未來的程式設計師 - 希望將來進入業界寫程式,開發網頁系統。
  • 大學院校的資訊科系應屆畢業生,想製作畢業專題、撰寫具體而微的網頁系統。
  • 曾寫過 ASP、ASP.NET(Web Form)、PHP、JSP 的朋友,現在想學習 ASP.NET Core / ASP.NET 5 MVC。

老師介紹

MIS2000 Lab.
  • 若有問題,歡迎來信聯繫 mis2000lab (at) yahoo.com.tw 謝謝您
  • 國立大學資管碩士畢業。曾參與 微軟 MVP(2008/4/1~2017/7/1)
  • 2001 年至今,均負責網頁程式與微軟平台與技術之相關工作。.NET + SQL Server + BizTalk + IIS
  • 資策會 III 七年工作經歷(Web程式設計)、南區教育訓練中心專任講師。
  • 撰寫 20 本以上的電腦書籍。包含ASP.NET Web Form、HTML與JavaScript與CSS(搭配 微軟認證教材)、 Linux
  • 現任職某大資通訊上市公司,擔任技術經理 Tech. Manager。配合兩岸三地軟體開發團隊負責全球物流與倉儲管理。
  • 2009 年起,工作之餘並在台中市電腦公會與各補習班兼任講師。
  • 2015 年起,參與線上教學 - 網路直播(遠距教學)、教學影片(事先預錄)。
  • 上台教學以來,實體課程與線上教學之學員已逾1800人次。
  • 教學影片(試聽),請參閱 影片連結

課程評語與問答