Transcript With SQL Server Express

Visual Web Developer Express Edition
王孝弘
資策會教育訓練處
議程
• VWD 下載及安裝
• VWD 開發工具功能介紹
• Personal Web Site Starter Kit
– Master Page , Site Navigation , Themes
– 會員管理 (Membership)
– 資料存取技術 (Data Controls)
– 其他
Visual Studio 2005 Express Beta Products
Visual Basic 2005 Express Edition
Visual C# 2005 Express Edition
Visual C++ 2005 Express Edition
Visual J# 2005 Express Edition
可用來建立視窗應用程式、主控台
應用程式、類別庫。
Visual Web Developer Express Edition
可使用內建的 Visual Basic、C#、J#
來建立網站應用程式
SQL Server 2005 Express Edition
提供資料庫的功能
VWD 的下載及安裝
• 下載網址
– http://lab.msdn.microsoft.com/express/vwd/default.aspx
• 安裝的內容有
–
–
–
–
–
.NET Framework 2.0
SQL Server 2005 Express
Visual Web Developer 2005 Express Edition
MSDN Express Libray
MSXML6.0
安裝 VWD 的系統需求(1)
CPU
Minimum:
600 megahertz (MHz) Pentium processor
Recommended:
1 gigahertz (GHz) Pentium processor
作業系統
Microsoft Windows® 2003 Server™
Windows XP
Windows 2000
RAM
Minimum:
128 megabytes (MB)
Recommended:
256 MB
安裝 VWD 的系統需求(2)
Hard Disk
Required
Optional
Basic capacity:
•42 MB of available space required
on system drive
•110 MB of available space required
on installation drive
With MSDN Express:
•Additional 166 MB of available space
required on system drive
•Additional 400 MB of available space
required on installation
.NET Framework:
•Additional 24 MB of available space
required on system drive
•Additional 240 MB of available
space required on installation drive
With SQL Server Express:
•Additional 35 MB of available space
required on system drive
•Additional 130 MB of available space
required on installation
SQL Server 2005 Express Edition
• 免費且易使用的SQL Server 2005簡易版
• 包含了下列功能 :
– stored procedures, views, triggers, cursors,
CLR support, and XML support ….
• 只能裝在單一 CPU , 1GB RAM 的電腦上 ,
資料庫最大容量是 4GB
• 用來取代 MSDE
SQL Server Express
• 安裝 SQL Server Express
– 安裝 Visual Web Developer Express 時 , 同時
也安裝了 SQL Server Express
– 可另外下載安裝
• 安裝 northwind 及 pubs 資料庫
– 下載安裝 Northwind and Pubs sample 資料庫
– 執行 SQL2000SampleDb.msi
– 範例程式會安裝到 C:\Program Files\Microsoft
SQL Server 2000 Sample Database Scripts
將資料庫附加到 SQL Express
• 在命令提示字元輸入 :
– cd C:\Program Files\Microsoft SQL Server 2000
Sample Database Scripts\
– sqlcmd -S .\SQLExpress -i instnwnd.sql
• 安裝後測試
– sqlcmd –S .\SQLExpress
– 同時輸入下列命令後再執行
• Use Northwind
• Select productID, productName, unitPrice from products
• go
– 離開 sqlcmd : exit or quit
VWD 功能介紹
VWD 的新鮮事 (1) – 開啟專案
• 不再需要 FrontPage Server Extensions 了 , 可使用許多方法
開啟專案
– Filesystem – c:\web or \\server\web
– Local IIS (no FPSE)
– FTP Sites
– Remote Sites
(with FPSE)
VWD 的新鮮事 (2) – 專案系統的改變
• 以目錄為基礎的網站專案系統
– 編輯任何的網站在任何地方 (不需要開啟專案)
– 更快速的開啟專案 (以IBuySpy Portal為例)
• VS 2003: ~1 分鐘
• VS Whidbey: 小於 5 秒
– 不需要將整個網站編譯成單一個 DLL , 編譯時可以針對單
一網頁編譯
– 程式修改存檔就可瀏覽不需要編譯
– 單一網頁有錯誤不會影響其他網頁的執行
– 按下 Ctrl + F5 可以直接瀏覽網頁
• 內建 ASP.NET Web Server (no IIS required)
– 只允許本機的存取 , 當VWD關閉後 , 也會自動關閉
VWD 的新鮮事 (3) – 完全控制您的程式碼
• 工具將不會修改您程式碼的格式
– 可完全控制所有的格式規則
– 允許針對特定的標籤設定格式
– 格式定義後 , 新增的標籤將套用新的格式
VWD 的新鮮事 (4) – 快速找到你要編輯的標籤
• 快速的找到要編輯的程式片段
– Tag navigator
– Outlining for HTML / ASPX tags
– Document outline
Tag navigator
Outlining
Document outline
VWD 的新鮮事 (5) – Intellisense EveryWhere
• 到處都有 Intellisense
– HTML and ASPX markup
– Directives - <@Page, <@Register,…
– Inline code within ASPX / HTML
• Client VBScript and Jscript in <script>
blocks
• <script runat=server> sections in ASPX file
• <% %> blocks in ASPX file
– Inline CSS styles
– Web.config , XML files
VWD 的新鮮事 (6) – 產生標準的標籤
• 支援 XHTML 及提供標籤的驗證
VWD 的新鮮事 (7) --更豐富的頁面設計
• 加強頁面設計功能
– 加強表格的編輯及建立
– 豐富的 Master Page 設計支援
– 改善樣板的編輯模式
– 提供 smartTags 來設定控制項的常用功能
VWD 的新鮮事 (8) – 方便的部署功能
• 支援 FTP, UNC, 或 FPSE protocols
• 視覺化的工具可以複製檔案來或去遠端網站
• 可以複製整個網站或被選擇的檔案
• 複製到另一個資料夾或雙向的同步
• 視覺化的建立本機跟遠端的網頁改變
• 發現問題及提供衝突解決的方式
還需要 VS.NET 2005 嗎 ?
VS.NET 2005 有的功能
•
•
•
•
•
•
•
•
•
•
•
Class Library Project Support
Web Compilation Support
Source control support
Mobile Web support
Accessibility checker
Localization support
Unit Testing support
Class Designer
Web Load Testing
Remote Debugging
Window Forms and Console Library Support
Personal Web Site Starter Kit
Personal Web Site Starter Kit
• 以功能面來看
–
–
–
–
–
首頁
個人履歷
熱門網站分類管理
圖片管理
會員管理等功能
• 以技術面來看，使用了 許多 ASP.NET 2.0 提供的新功能
來建置此網站
– Master Pages 及運用 Themes and Skins 的技術來建立網站一致
性的外觀
– Site Navigation 導引使用者瀏覽網頁
– MemberShip 建立及管理會員資料等
– Data Controls 存取資料庫的資料
PWS 的功能介紹(1) 一致性頁面的設計
版面的設計 : Mster Page
樣式的一致 : Themes & Skins
導覽列 : Site Navigation
今天的網頁設計
• 大部分的網站都是有設計的樣板
• Overall layout
– Header
– Footer
– Navigation
• 有很多針對網頁設計的程式會在許多網頁重複使
•
•
用
當網站更新時會需要更新每個網頁
網頁設計人員不是開發人員
PWS
Header
PWS
Navigation
PWS
Content
PWS
Footer
如何做到那樣的技術
• User Controls
• Include File
• Tool Base Solution
• Master page
PWS
ContentPlaceHolder
Master Page
Master Page 介紹
• 是一種彈性及可重複使用的使用者介面樣板
• 包含
– Page layout (HTML Table)
– Content
(Header, Footer, ML, HTML,ASP.NET controls)
– 使用Place holder 呈現不同的網頁內容
• 好處
– 一致性的版面
– 分享介面
– 可以用程式控制及宣告的方式來定義
Master Pages的執行模式
Design time
MySite.master
<%@ Master %>
Navigation
Header
<asp:ContentPlaceHolder
Id=MainContent />
Footer
Default.aspx
<%@ Page Master=“~/mySiteMaster” %>
<asp:Content
ContentPlaceHolderId=MainContent
/>
Site Navigation
• 網站結構描述
– XML file format
– 檔名為 web.SiteMap
• Site Navigation 的控制項
– SiteMapPath
– Meu
Site Map
<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
<siteMapNode title="Home" url="Default.aspx">
<siteMapNode title="Resume" url="Resume.aspx" />
<siteMapNode title="Links" url="Links.aspx" />
<siteMapNode title="Albums" url="Albums.aspx" >
<siteMapNode title="Photos" url="Photos.aspx" >
<siteMapNode title="Details" url="Details.aspx" />
</siteMapNode>
</siteMapNode>
<siteMapNode title="Register" url="Register.aspx" />
<siteMapNode title="Manage" url="Admin/Albums.aspx" >
<siteMapNode title="Photos" url="Admin/Photos.aspx" >
<siteMapNode title="Details" url="Admin/Details.aspx" />
</siteMapNode>
</siteMapNode>
</siteMapNode>
</siteMap>
還有一個也應該用來做導覽列的控制項
• TreeView
Themes 的介紹
• 使用者介面樣式的設定
• 包含
– Skin:
• 設定控制項的樣式
– Style
• CSS files
– Resources
• Images
• 好處
– 整個網站及控制項看起來會有一致性的感覺
建立 Themes
• 建立一個 Themes 的資料夾
• 建立另一個資料夾在 Themes 資料夾之下
• 增加 skins 和其他檔案
使用 Themes
• 針對單一頁面套用 Themes
<%@ Page Language="VB" StylesheetTheme="White“ %>
• 針對整個網站套用 Themes
<configuration>
<system.web>
<pages theme=“White" />
</system.web>
</configuration>
如何建立 Skin
• 建立一個副檔名為 .skin 的文字檔
• 在這 .skin 的文字檔中 , 增加你要設定樣式
的控制項
<asp:ImageButton runat="server“
ImageUrl="Images/button-first.gif" skinid="first"/>
<asp:gridview runat="server" backcolor="#ececec">
<AlternatingRowStyle backcolor="white" />
</asp:gridview>
Master Page , Themes ,
Site Naviation
PWS 的功能介紹(2)
會員管理功能
Membership
Role Management
會員登入
LoginView
LoginStatus
會員註冊
CreateUserWizard
Forms Authentication
Forms Authentication 2.0
• 儲存驗證資訊的地方
– 不一定要使用Cookies了
– 但如果 Client 端資源 Cookies , Cookies 還是最
好的選擇
• 單一表單驗證模型
– Mobile & Desktop
– All ASP.NET 2.0 Controls are mobile aware
– No special device adapters or pages
<forms/> Configuration
Cookieless Modes
模式
描述
useDeviceProfile
預設)
根據 XML 文件來判定流覽器
是否支援 Cookie 的功能
useCookies
使用 Cookies 來存放驗證資料
auto
嘗試將驗證資料存進 Cookies ,
若失敗則改用 URI 的方式
useUri
使用URL 來存放驗證資料
新增使用者及群組
• 使用 ASP.NET Web Site Administration
Tool
• 使用 Login Controls
ASP.NET Web Site Administratoion Tool
Login Controls
• 不需要寫任何程式
<asp:login />
<asp:loginname />
<asp:loginstatus />
<asp:loginview />
<asp:passwordrecovery />
<asp:createuserwizard />
<asp:changepassword />
<asp:Login />
• 會員登入控制項
• 有不同的控制項樣式
•
可供選擇
提供的功能有 :
–
–
–
–
–
–
–
忘記密碼超連結
需要幫助的超連結
會員註冊超連結
在登入畫面中的說明文字
使用者一定要輸入資料驗證
使用者登入失敗的錯誤訊息提示
可設定使用者登入成功後的動作
<asp:LoginName />
• 顯示登入者的姓名
– 以 {0} 作為顯示的字串 例如. ‘歡迎, {0}!”
– 也可用 User.Identity.Name 顯示登入姓名
<asp:LoginStatus />
• 顯示使用者登入狀態
– 沒有登入: ‘Login’
– 登入後: ‘Logout’
– 可用圖片或文字顯示Image or text based
<asp:LoginView />
• 針對使用者登入狀況顯示不同的的操作樣板
– 匿名使用者(Anonymous)顯示 <anonymoustemplate />
– 登入使用者(Logged in user)顯示 <loggedintemplate />
– Role Membership顯示<rolegroups />
loggedintemplate
anonymoustemplate
<asp:PasswordRecovery />
• 當使用者忘記密碼時
可根據
– 輸入姓名
– 回答註冊時輸入的問題的答案
– 然後會用 mail 通知
正確的密碼
<asp:changepassword />
• 提供使用者更換密碼的功能
< asp:createuserwizard />
• 提供使用者註冊成會員的功能
login Controls
PWS 的功能介紹(3)
照片簿
資料存取技術
資料存取技術
Data 控制項
• 可在幾乎不用寫任何程式的況下透過易操作
的介面做到 :
–
–
–
–
選擇及顯示資料
資料的排序及分頁
新增, 更新, 刪除資料
篩選資料及做到 master-details 的效果
兩種型態的 Data 控制項
• 資料來源控制項(Data Source Controls)
–
用來存取不同的資料來源
• E.g., Databases, Business Objects, XML, or Web Services
–
提供豐富的功能
• 排序, 分頁, 篩選, 更新, 刪除, 新增
• 資料繫節控制項(Data-bound Controls)
–
用來顯示資料 例如 GridView, DetailsView, TreeView
Data Control Types
Data-bound Control
<asp:GridView
<asp:TreeView
DataSourceId=“MySource”
runat=“server”/>
runat=“server”> …
Data Source Control
<asp:XmlDataSource
<asp:SqlDataSource
<asp:ObjectDataSource
Id=“MySource”
ConnectionString=“…”
TypeName=“CustomersDB”
DataFile=“Bookstore.xml”
SelectCommand=“select id from authors”
SelectMethod=“GetCustomersByRegion”
XPath=“/bookstore/book[@genre=‘fiction’]”
runat=“server” />
Database
Business
Object
XML
Document
資料來源控制項
•
•
•
•
•
•
<asp:SqlDataSource>
<asp:ObjectDataSource>
<asp:AccessDataSource>
<asp:DataSetDataSource>
<asp:SiteMapDataSource>
<asp:XmlDataSource>
資料繫結控制項
•
•
•
•
•
•
•
•
•
<asp:GridView>
<asp:DetailsView>
<asp:TreeView>
<asp:DataList>
<asp:Repeater>
<asp:DropDownList>
<asp:BulletedList>
<asp:CheckBoxList>
<asp:RadioButtonList>
• <asp:ListBox>
• <asp:AdRotator>
Data Controls
PWS 的功能介紹(4)
其他
User Control 的使用
DyamicImage Control
Site Navigation & 權限設定
Use Control
• 在 web.config 中
<pages stylesheettheme="White">
<controls>
<add tagPrefix="uc1" tagName="Frame"
src="Controls/Frame.ascx" />
</controls>
</pages>
• 在網頁中
<uc1:frame id="Frame1" runat="server“ />
Site Navigation v.s. 權限設定
• 在 web.siteMap
– <siteMapNode title="Manage" url="Admin/Albums.aspx">
• 在 web.config
<location path="Admin/Albums.aspx">
<system.web>
<authorization>
<allow roles="Administrators" />
<deny users="*"/>
</authorization>
</system.web>
</location>
<siteMap defaultProvider="XmlSiteMapProvider" enabled="true">
<providers>
<add name="XmlSiteMapProvider"
description=""
type="System.Web.XmlSiteMapProvider, System.Web,
Version=2.0.3600.0, Culture=neutral,
PublicKeyToken=b03f5f7f11d50a3a"
siteMapFile="web.sitemap"
securityTrimmingEnabled="true“ />
</providers>
</siteMap>
參考資料
• http://www.asp.net/whidbey/default.aspx
• http://lab.msdn.microsoft.com/vs2005
• 投影片與範例程式下載網址
– http://www.microsoft.com/taiwan/msdn/event
sdownload