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

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

5 (9)
MIS2000 Lab.
MIS2000 Lab.
講師介紹

這堂課我會學到

  • 以實際上線的網站專案 - 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。

課程大綱

20
05:07:15
  • 課程介紹
     
     
    • 課程介紹短片
       
  • 第一章
    20
    05:07:15
    • 1 課程導讀
      13:28
    • 2 資料庫範例下載與安裝
      10:05
    • 3 資料庫範例下載與安裝2
      21:35
    • 4 網站首頁的主表明細
      27:41
    • 5 網站首頁的主表明細2
      15:04
    • 6 作業1
      18:34
    • 7 作業2
      15:54
    • 8 作業3
      12:24
    • 9 分頁
      07:16
    • 10 資料新增
      17:34
    • 11 檔案上傳
      24:32
    • 12 關鍵字搜尋
      11:50
    • 13 補充教材:HTML Form表單的Post與Get有何差異?
      07:40
    • 14 會員登入
      05:20
    • 15 會員登入2
      28:56
    • 16 報表
      18:50
    • 17 報表2
      09:06
    • 18 作業4
      04:57
    • 19 購物車(簡易版)
      14:44
    • 20 購物車(完整版)
      21:45

課程介紹

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

創造自己的網路購物商城

本課程適合 .NET Core 3.1 / 5.0(VS 2019)與 .NET Core 6 (VS 2022)

你是否也曾疑惑,學會了 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 個回家作業,另有一個補充教材。只要您願意學、願意親自動手練習,一定能寫出自己專屬的作品。

實戰應用,提升學習成效

學會購物網站的常見功能

  • 網站首頁的主表明細
  • 關鍵字搜尋
  • 大量數據的分頁展示
  • 會員登入與管理
  • WebAPI 的簡單示範

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

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

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

課程綱要與學習重點

  • 課程導讀

課程介紹與目標學員的基礎能力。 在您進入課程之前,請先評估自己的能力。建議已經完成前三天 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 的技巧,成功新增一對多的訂單。下一節課才有機會「動態」加入各種選購產品。

  • 購物車(完整版)

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

課程特色

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

課程討論與問答

  • 要先登入才能做留言
  • user
    黃錦川
    2024-04-11 17:49:41
    黃錦川
    2024-04-11 17:49:41

    你好現在下載的都是vs2022 .net core 8,net5還可以用嗎

    • user
      MIS2000 Lab.
      2024-04-11 19:29:43
      MIS2000 Lab.
      2024-04-11 19:29:43

      .NET 6.0~8.0 的 Programe.cs設定檔有改變,跟以前不同(舊版3.1~5.0是Startup.cs)。但 程式的部分則一模一樣。 如果我沒記錯,我已經提供.NET 6.0的MVC專案(範例檔),證明我說得沒錯。影片一開 始都有我的e-mail,如果找不到範例,請來信。謝謝。


    user
  • user
    Bobby Yang
    2021-06-28 08:36:55
    Bobby Yang
    2021-06-28 08:36:55

    因公司報帳需收據,請問是否可開統編呢,謝謝

    • user
      9 比 1 客服
      2021-06-28 08:42:43
      9 比 1 客服
      2021-06-28 08:42:43

      您好, 謝謝您的問題,是的,可以開統編發票喔!我們使用綠界電子發票系統,您可在交易時選擇統編發票,並輸入相關公司資訊,在您交易完成後系統就會將發票 email 到您的註冊郵箱,列印後即可報帳了,謝謝您!


    user
9

課程評語

  • user
    李建璋
    2022-05-03 12:42:35
    李建璋
    2022-05-03 12:42:35

    只能說讚


5 ()
觀看期限 終身

授課講師MIS2000 Lab.
課程時數5.1小時
更新日期2020-12-24


$4,800
$3,990

購買課程
我們的退費政策

其他人也看了

更多熱門課程