網頁設計文章總整理

   我的部落格以介紹程式設計為主，最近陸續寫了幾篇物件導向程式設計的文章，之後又寫的網頁設計相關的文章，整理如下:

網頁資料儲存方式 Cookie、Session

捨棄ASP.NET Webform改學ASP.NET MVC的優缺點

    近幾年來ASP.NET Webform的工作愈來愈少，都已經被ASP.NET MVC取代了，而且現在又出來ASP.NET Core，ASP.NET MVC也逐漸被取代，但現在還是很多MVC的工作，未來會愈來愈少。

   今天就來談談ASP.NET Webform和ASP.NET MVC的比較，有哪些優點和缺點?

   ASP.NET Webform會被淘汰，一個很大的原因就是效能差，ASP.NET Webform在使用者送出資料後，畫面上文字方塊仍然能夠保留文字，這是因為是透過Postback機制，以及ViewState的Hidden標籤來記取資料，這樣子當資料愈來愈多的時候，資料量愈來愈龐大就會影響到效能。

   頁面的生命週期複雜也是ASP.NET Webform一個很大的問題，當做按下按鈕送出的動作時，就會產生Page.Load、Button.Click、Page.PreRender及其他相關事件，如果說有使用MasterPage或是按鈕放在自訂控制項時，情況就會變得非常複雜且混亂，到底是MasterPage的Load先執行，還是Content中的Load先執行?

   使用ASP.NET MVC可以解決ASP.NET以上的這些問題，但是程式設計師會面臨到新的問題。

   一個很大的問題就是使用上的不習慣，如果已經習慣寫ASP.NET Webform的工程師要學ASP.NET MVC，在剛開始的時候就會發現原本工具箱中的控制項都消失了，這些控制項確實讓程式設計師用起來很方便，但是卻是效能的一大殺手。讓人覺得最不習慣的我想應該會是ASP.NET MVC沒有GridView、DataSource這類的資料庫元件，過去使用GridView、FormView、SQLDataSource這些元件寫ASP.NET Webform網頁非常簡單，使用精靈很多事情都幫你自動完成，連使用者介面都可以調整，這過程不必寫一行程式，但是在ASP.NET MVC這些資料庫元件都沒有了，很多事情就必須要寫程式完成，也因為這個原因，程式設計師在寫ASP.NET MVC網頁時要更了解HTML、CSS、Javascript，講到這個其實我過去工作時就有程式設計師跟我說SQLDataSource不好用，那其實會害死人，他說你都用SQLDataSource不寫程式，那如果要自己改資料表的使用者介面要怎麼改?所以不要用SQLDataSource做。其實應該這樣講，ASP.NET Webform還是有它的好處，你要做一個小網站，想要趕快完成，之後也不會做太大調整，那麼使用ASP.NET Webform並且用他的這些資料庫元件GridView、SqlDataSource確實很方便，但如果之後要做調整那就不行了。

    ASP.NET Webform的網頁撰寫起來很快速方便，但是會有效能不好的問題，所以才會逐漸被淘汰，但是如果做簡單的小專案的話還是可以選擇使用ASP.NET Webform，複雜的大專案使用ASP.NET Webform就容易跑很慢，就必須要用ASP.NET MVC，長遠來講還是使用ASP.NET MVC比較好。

   以上是我對ASP.NET Webform和ASP.NET MVC差異的理解，希望對大家會有幫助。

想要更了解ASP.NET Webform和ASP.NET MVC的不同，可以看看下面這篇文章，我的這篇文章就是從下面的文章中摘要來的

觀念的轉變Web Form到ASP.NET MVC之路

    現在如果找網頁工作，去面試常會有人問你一個問題，「你會不會MVC?」
    有越來越多的工作都需要會用MVC，到底甚麼是MVC?

MVC的三個部分

    MVC是Model、View和Controller的簡寫，使用這種架構的網頁好管理，並且可以做很好的分工。

    Model:處理網頁和資料庫的連結。
    View:網頁所呈現的畫面。
    Controller:控制這個網頁的事件流程，在網頁上做一個動作以後的的後續程序寫在這裡。

    舉例來說，今天我進到一個MVC的汽車網站，我進到這個網頁所看到的畫面就是View，這個網頁有很多的汽車資料，我在這個網頁所看到的這些汽車資料是從資料庫所讀取的，這個就是由Model去處理資料庫，然後再把這些資料庫的資料給View讓使用者看到。我在網頁上點一個按鈕要申請試開汽車，然後就出現試開的申請表單，這就是MVC網頁架構。

寫網頁要學MVC嗎?

    MVC網頁架構在維護上方便，讓程式碼更簡潔，現在愈來愈多公司使用，但跟過去ASP.NET Webform的網頁比起來，很明顯是要複雜很多，Webform的程式撰寫非常直覺，要寫一個按鈕事件很直接，MVC完全就不是這樣，學MVC真的要拋開過去Webform的經驗來學習，2個差別滿大的。對初學者而言不應該馬上學MVC，要先把基礎學好再來學MVC。現在業界對於MVC網頁架構的需求人才是愈來愈多了，所以學會MVC是確實對於找工作有幫助，但初學者一開始把基礎打好比較重要，就先不要學MVC，已經有網頁工作經驗的人可以在有空閒的時間好好地把MVC學好，未來會很有幫助。
 

前端網頁設計應該要學甚麼?

    很多人會想要做程式設計裡面的網頁設計，我自己寫網頁就寫了差不多3年的時間，當然對於網頁設計要會甚麼也就相當清楚，網頁設計有分前端和後端，今天就來跟大家分享網頁前端要會甚麼語法。
前端網頁語法有哪些?
    前端其實就是指網頁的畫面，網頁前端會用到的基礎語法是HTML、CSS，這是前端網頁設計最基礎的語法，是設計網頁畫面的靜態語法，另外最好也要會javascript，這是屬於網頁動態語法，其實要學前端網頁設計應該這三個都要學會。基礎的學會了之後，可以再學JQuery，這也是網頁動態語法，其實現在新的JQuery網頁語法使用起來真的是很方便，可以取代很多舊的javascript語法，但是舊的javascript語法還是要先學，這樣子有一些概念以後才有辦法學會Jquery。
    再我的面試經驗中，現在有很多公司都會問會不會angular，我個人是沒有學過，這個是屬於比較進階的部分，已經有程式基礎的人可以多學學這個新的技術，現在這個技術已經很多公司都在使用了。
後端工程師與前端工程師要會多少前端技術?
    如果你是想要做後端網頁工程師，我上面提到的東西還是要有一點基礎，至少不要完全都不會，事實上後端工程師如果完全都不會前端的網頁語法那也沒辦法做網頁設計，因為要開發一個新網站，那一定要用到前端網頁語法，而且如果你是在小公司工作的話前後端的工作不會分工到那麼細，那還是會需要做到前端的工作，而如果你未來想要做前端工程師，那當然前端的技術都必須要學會，而且你其實還要學一點Photoshop和Illustrator，這個是在切版的時候需要用到的。今天先還跟大家講網頁設計前端語法要學甚麼，下一次我會跟大家介紹網頁設計的後端語法應該要學會甚麼。

Get和Post

Get和Post是網頁傳遞資料的方式，2種方式傳遞不同類型的資料。

Get是把要傳遞的資訊寫在http-header，這個資訊是會被別人看到的。可以把get想成是明信片，如果使用get會把要傳送的資訊寫在url上，是用query string的方式來傳送資料，也就是上網時常常可以在網址上看到「?name=xxx」，這樣外人都可以看到要傳的資料。

Post是把要傳遞的資訊寫在message-body，不會被別人看到。可以把post想成是郵件，使用post就把地址url寫在信封上，內容則是寫在信紙上，信紙裝進信封以後交給郵差傳送，外人就看不到這個信件的內容。

在網頁設計上，一些重要資料就應該要使用post而不應該使用get被人看到，像是在做登入的時候，登入的資訊當然應該要使用post，因為帳號密碼不應該顯示在網址上被人看到，其實結果都一樣，但是如果用get，那麼很顯然你就是經驗不足的程式設計師。在網頁上做查詢功能的時候，這種狀況就可以使用get，因為查詢的資訊顯示在網址上其實是沒關係的。

雖然使用get和post結果是一樣的，但是在安全性上會有很大的差異，所以在設計網頁時就一定要了解這2種方法的差異。

網頁資料儲存方式 Cookie、Session

    在網頁有很多的資料儲存方式，其中最常用的資料儲存方式為Session、Cookie，不同的資料須要使用不同的資料儲存方式。

Cookie的概念就好像去辦事或是買東西要抽取號碼牌，等到輪到你時只認這張號碼牌，然後你再講說今天要辦理甚麼，點甚麼餐點。Cookie的特性是沒有詳細資料，因此店員在輪到你之前不會知道你要做甚麼，也只認號碼牌而已。

Session的概念就像是會員卡，有一天商店的號碼機升級了，抽號碼牌時改成插會員卡或是輸入身分證字號，等到輪到你時店員就已經知道你的會員資料，也有你的消費紀錄，如果是在餐廳消費就能根據顧客的消費習慣，問客人是不是點跟上次一樣的餐，或是有的店家會幫客人集點。

使用Session會核對Session ID，Session ID會儲存於Cookie，要先從Cookie取出Session ID，如果沒有的話則是產生一個新的Session ID，然後去核對有沒有這筆Session ID，取出Session的詳細資料。這個過程就好像核對會員的身分證字號，或者是核對病人的病歷號碼，然後取出會員資料或是病歷。

Cookie是把資料存放在Client端，等到要用再取出，這個資料會讓別人看到，但是使用Cookie可以減少server的負擔，而因為資料會被看到，因此不建議存放機敏資料，Cookie的使用期限短，需要注意。

Cookie資料儲存的每一筆會有一個key和他對應到的value。當使用者輸入資料，不小心把網頁關了，然後使用者再打開時資料都還在，就是使用Cookie，在網路上有很多網頁要輸入資料的地方，在你下次再到訪時都幫你先輸入好，這些都是使用了Cookie來儲存的。

Cookie的使用並非沒有限制大小和數量，大多數的瀏覽器會對於Cookie有所限制，而基於RFC2965的規範，定義了瀏覽器對於Cookie的最低儲存量，現在的瀏覽器大部分都已經是符合了RFC規範，RFC規範中對Cookie的限制如下:每個Cookie的大小限制至少有4096bytes，每個網站至少可存放20個Cookie，瀏覽器至少可以存放300個Cookie。`

對於RFC2965的規範原文請大家參考這篇文章RFC-2965 HTTP State Management Mechanism

Session是把資料存放在server端，等需要使用時再拿出來，別人無法看到這個資料，會比較安全，但是由於Session常常會用來存放機敏資料，所以容易被攻擊。Session就好像打電話，從電話接通一直到掛斷的這段過程，所以Session中文翻譯為會期，這個意思就很接近，這這段期間Session資料都會在，除非server通知刪除Session否則不會消失，Session很常會用在跨頁傳送機敏資料。

在網頁設計中，資料儲存方式中最重要最常使用的就是Cookie和Session，其他還有很多資料儲存方式像是Cache、ViewState、Application，但是在這些網頁資料儲存方式當中，這裡面最重要也是最基本的方法就是Cookie和Session，這是我過去的工作面試常遇到的考題，是身為一個程式設計師必須要學會的方法。