[Asp .Net MVC] 網頁系統 與 Html基礎簡介

熱門文章 (Popular Post)

Posted by : Duran Hsieh 2016-05-19

前言:

這一系列文章是過去學習Asp .Net MVC,自己整理的筆記,過去曾用於回學校指導學弟
妹專題課程。因學校不同學程與個人程式學習經驗不同,其實進行教學的時候,非專攻
網頁程式的學弟妹,對於基礎的html仍舊很陌生。
這系列的文章從 網頁系統操作流程與html 開始說明,到最後發佈專案到IIS或Azure Web
 APP做一個簡單流程介紹,讓初學網頁程式的學生有個概念。

這系列的文章包含下面內容:
 1.  網頁系統 與 Html基礎簡介
 2.  MVC 架構與說明(以Asp .Net MVC C# 為例)
 3.  Controller and View 1 - Controller 架構篇
 4.  Controller and View 2 - 資料傳遞篇
 5.  Controller and View 3 - View架構篇
 6.  Razor and HtmlHelper
 7.  ViewModel (Attribute and model binding)
 8.  ORM and Entity framework 簡介
 9.  Entity framework database first with localdb
      9-1 附錄 Entity framework database first with MySQL database
 10.Entity framework code first with localdb
 11.Linq、Lambda 與 System.Linq.Enumerable 方法
 12.範例:一個新增、修改、刪除、查詢與檢視的應用程式
 13.Install IIS and publish web application project (Deploy to IIS)
 14.Azure初體驗 申請流程、上傳Web應用程式與SQL資料庫匯入
      (Deploy to Azure Web Application)

若有觀念錯誤與修改建議,也請各位先進不吝指教。


介紹:

我們一般認知的網頁操作行為(看facebook、逛網拍、看網誌、收電子郵件、或看新聞),
皆是以開啟瀏覽器,輸入網站連結(網站查詢),前往我們想去的網站,取得我們想要的
資訊(如下圖所示)。


這是現代人每天習以為常的行為。但許多人並不知道,網頁能看到整齊的排版、炫麗的
動畫效果、分享照片、與觀賞影片...等,這些美美的畫面,都是夠過瀏覽器重新編譯後,
呈現出來的效果;註冊會員、線上聊天、網路購物...等功能,都是透過瀏覽器傳輸一堆
資訊給網站伺服器後,進行處理達到的應用。
如下圖所示,我們透過IE, firefox, chrome等瀏覽器,看見美美的網頁;而我們也透過IIS,
Apache http server, tomcat等網站伺服器進行互動。


詳細一點,瀏覽器端(前端)處理呈現與邏輯的語言,是我們耳熟能詳的javascript, css..等。
而在伺服器端(後端)處理訊息與邏輯的語言種類很多,有JSP, PHP, ASP...等。

當然,看似簡單的示意圖,卻包含幾個自己初學網頁的時候,碰壁卻不懂基礎問題:
1.同一頁面中,資料處理先後(後端執行後,前端取得資料;前端還沒執行,後端是拿不
   到資料)。
2.效能處理的位置,是前端還是後端(還是資料庫)?


當然,無論哪一種系統,資訊量大的時候,就需要儲存體儲存相關資訊,進行更複雜的
互動。

如此一來,一個初步的網頁系統雛形就生成了,包含前端、後端與資料庫。
當然,現今系統的架構,無論硬體或者軟體的架構,會比下圖來的複雜許多,這只是一
個簡單的概念,其他複雜的架構就不在這邊討論了。

Html

網頁呈現的基礎技術,就是Html,一種建立網頁的標記式語言。
您可以很簡單的記事本(notepad)中輸入簡單的html語法,使用瀏覽器開啟,就能看見
簡單的靜態網頁(純粹的內容呈現,不能進行互動)。
步驟如下:



或者使用Jsbin網站進行練習 : http://jsbin.com/?html,js,output



Html架構如下:
簡單可以分成"檔案宣告類型"、"表頭區"與"主體區"。
網頁的屬性設定、嵌入CSS, JavaScript檔案放在標頭區
網頁內容,如輸入框、輸入框、選單...等各式各樣的內容呈現放在主體區。



這邊簡單介紹一些語法提供嘗試:

  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
  <h5>h5</h5>
  <h6>h6</h6>


<input type="text" value="輸入框文字" name="text>


<input type="password" name="password" value="passwordValue">


<input type="radio" name="radio" value="radioValue">


<select>
    <option value="yellow">黃色</option>
    <option value="blue">藍色</option>
    <option value="gree">綠色</option>
</select>


<input type="checkbox“ value="checkboxValue" name="checkbox">


<input type="file" name="file" >


<input type="hidden" name="hidden" value="hiddenValue">


<input type="date"  name="date ">


<input type="submit" name="submit" value=“submit">


<input type="reset" name="reset" value="reset">




很多人看到這裡可能會有疑問,這些網頁呈現非常的陽春,不像我們平日所見的facebook
這麼華麗。一般來說,Html會搭配CSS與JavaScript,產生更多亮麗的視覺效果,而並非單
純使用Html進行撰寫。

理所當然,除了亮麗的網頁呈現,複雜、動態的資料處理仍需要後端進行處理,正是本系
列文章的主題Asp .Net MVC

下一篇,我們將開始簡單介紹MVC,並進入ASP .Net MVC C#專案架構說明。在進入下一
篇之前,您可以先到下列網址下載並安裝 Visual Studio 2015 Community :
https://www.visualstudio.com/zh-tw/products/visual-studio-community-vs.aspx



感想:

去年與前年因緣際會下,有機會回到學校指導學弟、妹如何撰寫Asp .Net MVC程式 ,雖然
個人並非專業教師且時間非常短暫(約20小時不到),但能夠分享程式開發方法,讓學弟妹
能完成專題,並在畢業前學到這些技能,個人深感榮幸。也感謝學校讓我有這個機會指導
專題,若有教學不好或建議,也請各位先進不吝指教。


下一篇 :  MVC 架構與說明(以Asp .Net MVC C# 為例)


本篇文章內容歡迎分享,轉載與使用圖文請來信告知並註明出處。


Leave a Reply

Subscribe to Posts | Subscribe to Comments

- Copyright © Duran Hsieh @ Duran 的技術冶煉廠 - Date A Live - Powered by Blogger - Designed by Johanes Djogan -