程式 ASP

ASP.NET MVC - 線上相簿

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

這堂課我會學到

  • 以實際上線的網站專案 - ASP.NET MVC「線上相簿」為例。用實際網站為您解說 MVC 各種功能。從實戰中拆解範例與學習,更具成效。
  • 以實際網站來解說 ASP.NET MVC 的架構與觀念,搭配 Routing 路由。為您解析 Model-Viewer-Controller 三者的關連。
  • 除了基礎 CRUD 必備功能之外,本課程更加入原本專案沒有的「分頁」與「搜尋」、搭配檔案上傳的「編輯」功能,讓您學到的比原本專案更多。
  • 檔案上傳(FileUpload)後,將相片(圖片)轉成二進位並存入資料表。
  • 將資料表裡面二進位的內容,恢復成圖片格式,重新呈現在 HTML 網頁上。

課前資訊

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

建議已完成前面三天的入門課 - 「ASP.NET MVC 教學 - 由零開始的入門課」的學習。
知道資料庫(DataBase)與簡單的 T-SQL 指令,如:CRUD。 課程所需軟體皆可免費下載。
Visual Studio 2015~2019 或後續新版,請下載社群版(Community 版)。
建議使用 Windows 作業系統。因為 Visual Studio Code 與 Visual Studio for Mac 與教學畫面仍有差異。
SQL Server Express 版(免費)。建議使用 SQL Server 2012(Express 版)或後續新版。

課程適合對象

本課程屬於進階課程,建議完成「ASP.NET MVC 教學 - 由零開始的入門課」課程後再來學習。
需要撰寫網頁系統、或對於網頁與資料庫的開發有興趣的朋友。
未來的程式設計師 -- 希望將來進入業界寫程式,開發網頁系統。
曾寫過 ASP、ASP.NET(Web Form)、PHP、JSP 的朋友,現在想學習 ASP.NET MVC 5。

課程大綱

16
05:49:53
  • 課程介紹
     
     
    • 課程介紹短片
       
  • 課程內容
    16
    05:49:53
    • 0_Starter
      22:47
    • 1_DB
      16:32
    • 2_Model
      36:35
    • 2-1_Model_HomeWork
      25:21
    • 3-1_Action_View
      36:51
    • 3-2_Route
      16:38
    • 3-3_Action_PartialView
      15:01
    • 3-4_HomeWork
      04:18
    • 3-5_Master_List
      24:38
    • 3-6_Details
      14:53
    • 3-7_Create
      26:55
    • 3-8_Search
      31:56
    • 3-9_Page
      11:17
    • 3-10_FileUpload01
      21:35
    • 3-11_FileUpload02
      11:46
    • 3-12_Delete_Edit
      32:50

課程介紹

本課程特別採用了一個公開的範例 -「線上相簿」,讓學員從線上網站的運作中,拆解每個功能與步驟。

學會 MVC 的下一步

你是否也曾有疑惑,學會了 ASP.NET MVC 之後,能應用在什麼地方呢?本課程特別採用了一個公開的範例 -「線上相簿」,讓學員從線上網站的運作中,拆解每個功能與步驟。

實戰應用,提升學習成效

對已經上過「ASP.NET MVC 教學 - 由零開始的入門課」的學員而言,本課程是一個挑戰,也是一種複習。在經過這個專案解說後,相信您會恍然大悟,發現將以前學過的功能套用在實際網站上,原來是這麼容易的事!利用入門課程所學的「零散」招式,立即實戰應用,並加以「整合」,絕對能大幅提升您的學習成效。

原廠沒說的功能交給你

傳統的書籍與課程,常用留言板、部落格這些以「文字」為主的範例來解說,本範例搭配檔案上傳(FileUpload)的功能以「圖片、線上相簿」為主體,應用更廣泛,成果也更生動活潑。尤其是(1) 將圖片存入(新增、Insert Into)資料表,(2)再將二進位內容取出,還原成圖片檔案。這樣進階的範例,相信是初學者真正需要的。

除了原本的範例以外,額外添加的「分頁(Paging)」、「搜尋」、搭配檔案上傳的「編輯」功能,都是原廠範例沒有的,加上搭配了兩個家庭作業,讓您學到的東西比原本的專案還要多!

額外補充教材加碼送

以 Google 為例,當您搜尋的關鍵字有上千筆紀錄時,您必須把搜尋結果分頁展示,每一頁展示二十筆記錄,一頁一頁呈現,才能縮減反應時間,減低網站負擔,所以「分頁」與「搜尋」兩種功能的合併,是每個網站必備的!

搭配檔案上傳的「編輯」功能,可能因為難度又提升了一些,所以原廠範例並不包含在內。只要有基礎,隨手增補上去,一點也不難,這三個額外提供的功能也是老師堅持給您的補充教材。讓各位能從真正的專案中,重新思維並複習自己以前學過的基礎招式,真正轉化成實戰經驗!

課程學習重點

  • 0_Starter

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

  • 1_DB

先介紹「線上相簿」會用到的資料表架構與特點。這個專案會把上傳的圖檔存入資料表,所以用到了一些特別的設定。

  • 2_Model

如何將資料庫轉換成Context,並把資料表對應為ViewModel、類別檔。要存放二進位的資料表欄位,變成類別檔會是怎樣的資料型態。

  • 2-1_Model_HomeWork

提供一個家庭作業,讓老師陪著您一起完成,透過自己動手做,親自複習課程重點。

  • 3-1_Action_View

MVC的控制器裡面,如何撰寫Action動作,並產生對應的Viewer檢視畫面是非常重要的基礎。

  • 3-2_Route

Route路由的設定與應用。

  • 3-3_Action_PartialView

PartialView的應用。

  • 3-4_HomeWork

提供一個家庭作業,讓老師陪著您一起完成,透過自己動手做,親自複習課程重點。

  • 3-5_Master_List

網站首頁,多筆記錄(報表)的資料展示,從資料庫讀取並展示記錄。介紹List範本。 如何把資料表裡面的二進位內容,還原成一張圖片檔並呈現在網頁上,是本範例的重點。

  • 3-6_Details

單一筆記錄(明細檔)的資料展示,從資料庫讀取並展示記錄。介紹Details範本。

  • 3-7_Create

新增一筆記錄並上傳圖片。因為本專案「線上相簿」需要搭配檔案上傳(FileUpload),所以這個新增(Create)功能的難度較高。要將上傳的圖片以二進位的型態存入資料表,程式會繁瑣一些。

  • 3-8_Search

[本課程額外加入] 搜尋,以關鍵字進行模糊搜尋,是所有網站必備的基礎功能。由於原本的範例不提供,這是老師額外的補充教材。

  • 3-9_Page

[本課程額外加入] 分頁,不管是網站首頁或是搜尋的結果,倘若資料量太大,就必須透過「分頁」展示,節省網站資源。這也是所有網站必備的基礎功能。由於原本的範例不提供,這是老師額外的補充教材。

  • 3-10_FileUpload01

檔案上傳的基本範例。檔案上傳搭配CRUD的功能,在當今網站中是非常重要的,沒有圖片的搭配,只有文字的網站很難受到關注與喜愛。

  • 3-11_FileUpload02

檔案上傳有不少變化,所以我們準備了兩段影片為您介紹其中的特點。並為您解析兩種不同的檔案上傳作法,各有哪些優缺點?

  • 3-12_Delete_Edit

刪除與編輯。[本課程額外加入] 「編輯」與 檔案上傳(FileUpload) 的綜合應用,由於原本的範例不提供,這是老師額外的補充教材。編輯的檢視畫面,需要呈現圖片。編輯(修改資料表中既有的紀錄)時,該如何搭配檔案上傳,取代圖片呢?您必須融合前面學過的 Create、Details兩種功能,才能在「編輯」功能中妥善的搭配檔案上傳(FileUpload)。

課程特色

  • 以實作優先:減少理論說明,大量練習範例,講求從做中學。
  • 錯誤學習法:透過錯誤的範例從中學習,並找出自己的盲點。
  • 採用網路公開的專案,讓學員從真正的專案中,重新思維並複習自己以前學過的基礎招式,真正轉化成實戰經驗。

好禮優惠

課程討論與問答

  • 要先登入才能做留言
2

課程評語


5 ()
觀看期限 終身

授課講師MIS2000 Lab.
課程時數5.8小時
更新日期2019-10-05


$4,600
$3,800

購買課程
我們的退費政策

其他人也看了

更多熱門課程