Microsoft Word - CH04.doc

Size: px

Start display at page:

Download "Microsoft Word - CH04.doc"

弹松
5 years ago
Views:

1 CHAPTER 4 新聞公告系統建立網站複製原始檔資料庫分析建立管理者帳號新聞公告系統主頁面製作製作公告標題頁面製作新聞公告詳細頁面新聞公告系統管理頁面製作登入頁面製作新聞公告管理主頁面製作新增及修改新聞公告頁面

本章將建立一個完整的新聞公告系統, 可以在此範例中使用互動網頁來顯示新增修改及刪除資料庫中的資料, 而且幾乎不必撰寫程式碼, 只要使用拖曳的方式即可完成 4.1.

2 挑戰 ASP.NET 2.0 for C#- 互動網站百寶箱 4.1 準備工作新聞公告系統是網站中使用最頻繁的功能, 通常進入網站時最先見到的就是新聞公告系統, 如此網站管理者才能隨時將網站中最新的訊息傳達給每一位瀏覽者本章將建立一個完整的新聞公告系統, 可以在此範例中使用互動網頁來顯示新增修改及刪除資料庫中的資料, 而且幾乎不必撰寫程式碼, 只要使用拖曳的方式即可完成建立網站為了方便網頁測試, 本書採用檔案系統方式建立網站, 同時為了讓安裝 IIS 者可以使用網頁伺服器來執行, 故將網站建於 <C:\Inetpub\wwwroot> 資料夾中 ( 在檔案系統方式中, 讀者可將網站建於任意資料夾, 網頁都可以正確執行 ) 4-2

$進入 Visual Web Developer 執行功能表 [ 檔案 ] \ [ 新網站 ] 或選按工具列中的鈕 : 2.$ $NET 網站 ] 請選取 [ 檔案系統 ] 2 3 輸入 C:\Inetpub\wwwroot\newsCenter 按 [ 確定 ] 鈕 5 4 選擇$ $Visual Web Developer 2005 Express 系統會自動在 <C:\Inetpub\wwwroot\newsCenter>$

3 Chapter 4 新聞公告系統 1. 進入 Visual Web Developer 執行功能表 [ 檔案 ] \ [ 新網站 ] 或選按工具列中的鈕 : 2. 在 [ 新網站 ] 視窗中設定各種屬性, 即可建立新網站 1 選取 [ASP.NET 網站 ] 請選取 [ 檔案系統 ] 2 3 輸入 C:\Inetpub\wwwroot\newsCenter 按 [ 確定 ] 鈕 5 4 選擇 Visual C# 3. Visual Web Developer 2005 Express 系統會自動在 <C:\Inetpub\wwwroot\newsCenter> 資料夾中建立 <App_Data> 資料夾及 <Default.aspx> <web.config> 檔案 <Default.aspx> 是預設的啟始網頁, 本網站將以自訂的 <news.aspx> 做為啟始網頁, 故需刪除 <Default.aspx> 在 <Default.aspx> 上按滑鼠右鍵, 選按刪除後按 [ 確定 ] 鈕 4-3

$本書範例 \ ch04 \ 原始檔$ 資料夾整個複製到

4 挑戰 ASP.NET 2.0 for C#- 互動網站百寶箱複製原始檔將附書光碟 < 本書範例 > 資料夾中 < 本書範例 \ ch04 \ 原始檔 \ newscenter > 資料夾整個複製到 <C:\Inetpub\wwwroot\> 資料夾中 4-4

Chapter 4 新聞公告系統 4.1.3 資料庫分析在 ASP.NET 2.0 開發的網站中, 資料庫檔案預設儲存於 <App_Data> 資料夾前一小節複製檔案時, 已將本章所使用的資料庫檔案 <news.

自動編號, 如此即可在產生新公告時自動加上一個獨立編號而不會重複另外, news_content 欄位 ( 新聞公告內容 ) 所儲存的文字長度不定, 其資料型態為 [ 備忘 ], 這種資料型態會依使用者輸入的文字內容長度給予適當的儲存 news_date 欄位 ( 新聞公告時間 ) 的資料型態為 [ 日期 / 時間 ], 已給予

5 Chapter 4 新聞公告系統資料庫分析在 ASP.NET 2.0 開發的網站中, 資料庫檔案預設儲存於 <App_Data> 資料夾前一小節複製檔案時, 已將本章所使用的資料庫檔案 <news.mdb> 置於 <App_Data> 資料夾中, 其中只有 <newscenter> 資料表, 用來儲存所有新聞公告的資料為了避免欄位名稱與保留字相同造成程式執行時的錯誤, newscenter 資料表所有欄位名稱都以 news_ 做為前置字元本資料以 news_id 欄位 ( 新聞公告編號 ) 為主索引, 資料型態為自動編號, 如此即可在產生新公告時自動加上一個獨立編號而不會重複另外, news_content 欄位 ( 新聞公告內容 ) 所儲存的文字長度不定, 其資料型態為 [ 備忘 ], 這種資料型態會依使用者輸入的文字內容長度給予適當的儲存 news_date 欄位 ( 新聞公告時間 ) 的資料型態為 [ 日期 / 時間 ], 已給予 NOW() 函數做為預設值, 當產生新公告時會自動在此欄位填入當時的系統時間, 做為新聞公告發佈的時間欄位名稱可否使用中文? 中文欄位名稱對許多英文不熟悉的設計者而言, 可增加莫大的便利性, 同時可以避免與保留字相同的命名陷阱但是如果網頁有可能使用國外的伺服器做為網站主機的話, 由於所使用的語系與中文不同, 可能造成資料輸出或輸入時的錯誤, 或是無法正常顯示資料建議讀者欄位名稱最好還是使用英文來命名, 本書中所有範例的欄位名稱也都以英文命名 4-5

因此必需具有管理權限的管理者才能登入管理系統 ASP.NET 2.0 為了安全因素, 預設將登入者的資料儲存於內建的 <ASPNETDB.

$執行 Visual Web Developer, 開啟 newscenter 網站, 選按功能表 [ 網站 ] \ [ASP.$

6 挑戰 ASP.NET 2.0 for C#- 互動網站百寶箱建立管理者帳號新聞公告系統除了可以對外發佈公告外, 同時還有內部的公告管理系統, 在管理系統中可發佈修改及刪除新聞公告, 因此必需具有管理權限的管理者才能登入管理系統 ASP.NET 2.0 為了安全因素, 預設將登入者的資料儲存於內建的 <ASPNETDB.MDF> 資料庫, 這是 SqlServer 型態的資料庫, 其中的重要資料 ( 如 : 密碼 ) 都經過加密後才儲存, 以確保資料的安全性 Visual Web Developer 為建立登入者帳號設計了一套精靈程序, 設計者只要按部就班使用這套精靈即可輕易建立登入者帳號 1. 執行 Visual Web Developer, 開啟 newscenter 網站, 選按功能表 [ 網站 ] \ [ASP.NET 組態 ], 即可進入 ASP.NET 網站管理功能 2. 在 [ASP.NET 網站管理 ] 視窗中選按 [ 安全性 ] 功能按此兩者其中之一即可 3. 選按使用安全性設定精靈, 逐步設定安全性 4-6

7 Chapter 4 新聞公告系統 4. 開啟 [ 安全性設定精靈 ] 視窗, 步驟 1: 按 [ 下一步 ] 鈕 5. 步驟 2: 由於本網頁要使在網際網路中, 核選從網際網路後按 [ 下一步 ] 鈕 6. 步驟 3 : 按 [ 下一步 ] 鈕 ; 步驟 4 : 核選啟用這個網站的角色, 如此才能在網站中使用管理者登入功能 7. 按 [ 下一步 ] 鈕 4-7

8 挑戰 ASP.NET 2.0 for C#- 互動網站百寶箱角色是由其原文 Role 直接翻譯而來, 此名稱混淆了其功能角色的功能是將擁有帳號者為不同群組, 其使用方法會在會員系統中詳細說明此處只需管理者一種帳號角色, 所以不需建立角色 8. 步驟 5: 如右圖輸入管理者帳號資料後按 [ 下一步 ] 鈕即可建立管理者帳號, [ 密碼 ] 欄為 &^%$#@1 ( 輸入方式為左手按住 [Shift] 鍵, 連按鍵, 放開 [Shift] 鍵, 再按 1 鍵 ) 為了避免密碼被不肖人士破解,ASP.NET 2.0 的密碼欄預設規則為 : 至少需七個字元, 而且其中至少要包含一個非文數字的字元上面建立使用者的各項欄位都必需輸入, 否則系統會給予錯誤提示 9. 管理者帳號建立完成, 按 [ 下一步 ] 鈕, 再按 [ 完成 ] 鈕就完成建立管理者帳號的工作 4-8

9 Chapter 4 新聞公告系統執行完 [ 使用安全性設定精靈 ] 後, 系統會在 <App_Data> 資料夾中產生 <ASPNETDB.MDF> 及 <aspnetdb_log.ldf> 資料庫檔案, 所有關於網站安全性的資料都會儲存在此資料庫中切換到 [ 資料庫總管 ] 視窗, 在 aspnet_users 資料表按滑鼠右鍵, 選按 [ 顯示資料表資料 ], 就可見到剛才建立的管理者資料如果在右方的 [ 方案總管 ] 視窗中未發現 [ 資料庫總管 ] 標籤, 執行功能表 [ 檢視 ] \ [ 資料庫總管 ] 就可進入 [ 資料庫總管 ] 視窗 4-9

10 挑戰 ASP.NET 2.0 for C#- 互動網站百寶箱 [ 使用安全性設定精靈 ] 同時在網站根目錄中產生 <web.config> 檔, 此檔案中主要有三項設定值, 如此網站才能執行登入功能啟用角色功能加入命名空間使用表單驗證如何在遠端網頁伺服器中建立登入者帳號? 若是遠端網頁伺服器位於遠端的主機中, 無法在遠端主機使用 Visual Web Developer, 那要如何建立登入者帳號呢? 只要在本機 Visual Web Developer 中建立好各種使用者安全事項, 再將 <ASPNETDB.MDF> <aspnetdb_log.ldf> 及 <webconfig> 上傳到網頁伺服器即可 4-10

Chapter 4 新聞公告系統 4.2 新聞公告系統主頁面製作網頁瀏覽者進入新聞公告系統, 首先出現的是條列式的新聞標題, 使用者瀏覽標題之後, 可以選擇有興趣的主題閱讀詳細內容 4.2.1 製作公告標題頁面公告標題頁面是新聞公告系統的主頁面, 瀏覽者在此頁面中會見到以分頁方式列出的所有新聞標題, 只要在標題上按一下滑鼠, 就會顯示該則新聞公告的完整內容一 news.

11 Chapter 4 新聞公告系統 4.2 新聞公告系統主頁面製作網頁瀏覽者進入新聞公告系統, 首先出現的是條列式的新聞標題, 使用者瀏覽標題之後, 可以選擇有興趣的主題閱讀詳細內容製作公告標題頁面公告標題頁面是新聞公告系統的主頁面, 瀏覽者在此頁面中會見到以分頁方式列出的所有新聞標題, 只要在標題上按一下滑鼠, 就會顯示該則新聞公告的完整內容一 news.aspx 原始檔內容 1. 公告標題頁面的檔案名稱為 <news.aspx> 執行 Visual Web Developer, 開啟 newscenter 網站, 於 [ 方案總管 ] 視窗中以滑鼠按 <news.aspx> 兩下, 開啟 <news.aspx> 檔案 2. <news.aspx> 原始檔內容已將網頁必要的圖形配置及新聞管理超連結設定完成, 讀者要建立自己的網頁時, 只需將此配置圖替換即可 news.aspx 原始檔程式碼 6 <head id="head1" runat="server"> 7 <title> 新聞公佈系統 </title> 8 <link href="style.css" rel="stylesheet" type="text/css" /> 9 </head> 29 <td align="right" background="images/newscenter_r2_c2.jpg" class="nav" height="45" 30 valign="bottom" width="452"> 31 <img align="absmiddle" src="images/board_mark_list.gif" /> 32 <a class="nav" href="newslogin.aspx"> 新聞管理 </a> </td> 4-11

aspx> 頁面, 這是管理者登入的頁面 &nbsp 會在網頁中顯示空格, 在新聞管理文字後面加入兩個空格, 可使文寀字與邊界有空隙, 較為美觀新聞管理超連結此處有兩個空格二設定資料來源新聞公告標題儲存於 <news.

12 挑戰 ASP.NET 2.0 for C#- 互動網站百寶箱 8 連結外部樣式檔 :<style.css> 網頁中所有的樣式定義都在 <style.css> 檔設定, 關於樣式設定檔的做法及使用不在本書討論範圍, 有興趣的讀者可參考相關書籍 32 設定新聞管理超連結, 當使用者按下新聞管理文字後就會進入 <newslogin.aspx> 頁面, 這是管理者登入的頁面 &nbsp 會在網頁中顯示空格, 在新聞管理文字後面加入兩個空格, 可使文寀字與邊界有空隙, 較為美觀新聞管理超連結此處有兩個空格二設定資料來源新聞公告標題儲存於 <news.mdb> 資料庫的 newscenter 資料表中, 顯示標題時要以公告的時間遞減排序, 所以必需先建立此資料庫的連線, 同時設定好篩選的條件 ( 以公告的時間遞減排序 ), 才能正確顯示資料 1. 由 [ 工具箱 ] 視窗中拖曳 AccessDataSource 控制項到設計視窗的最下方設計時資料庫控制項可放在網頁的任意位置, 網頁顯示時不會出現在網頁中通常會將資料庫控制項置於網頁最下方, 在查看程式碼時較不會對網頁程式碼產生干擾 4-12

13 Chapter 4 新聞公告系統 2. 選按設定資料來源開啟 [ 設定資料來源 ] 精靈 3. 在 [ 設定資料來源 ] 視窗中選取資料庫檔案, 按 [ 下一步 ] 鈕按 [ 瀏覽 ] 鈕 1 選 <news.mdb> 檔 3 2 選 <App_Data> 資料夾按 [ 確定 ] 鈕 4 按 [ 下一步 ] 鈕 5 4. 設定來源資料表為 newscenter, 且依 news_date 欄位遞減排序 4-13

14 挑戰 ASP.NET 2.0 for C#- 互動網站百寶箱 1 核選此選項 2 按 [ORDER BY] 鈕 3 選 news_date 4 選 [ 遞減 ] 鈕 5 按 [ 確定 ] 鈕 6 按 [ 下一步 ] 鈕 5. 按下 [ 測試查詢 ] 鈕可預覽資料顯示的實際情形, 再按下 [ 完成 ] 鈕完成資料來源設定資料預覽 4-14

Chapter 4 新聞公告系統此段操作產生的程式碼為 : <asp:accessdatasource ID="AccessDataSource1" runat="server"

mdb" SelectCommand="SELECT * FROM [newscenter] ORDER BY [news_date] DESC"> </asp:accessdatasource>

SQL 陳述式的 Select 命令 : SELECT * FROM [newscenter] 是由 newscenter 資料表讀取資料, ORDER BY [news_date] 指根據 news_date 欄位排序,

15 Chapter 4 新聞公告系統此段操作產生的程式碼為 : <asp:accessdatasource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/news.mdb" SelectCommand="SELECT * FROM [newscenter] ORDER BY [news_date] DESC"> </asp:accessdatasource> AccessDataSource1 是系統為此資料來源自動建立的名稱, 要使用此資料來源時只需將控制項的 DataSourceID 屬性設為此名稱即可, DataFile 屬性指定來源資料庫 SelectCommand 設定 SQL 陳述式的 Select 命令 : SELECT * FROM [newscenter] 是由 newscenter 資料表讀取資料, ORDER BY [news_date] 指根據 news_date 欄位排序, DESC 為遞減排序三建立 GridView 控制項新聞公告標題要以條列的方式顯示讓瀏覽者選按, 要達成此功能最理想的控制項就是 GridView 控制項 1. 由 [ 工具箱 ] 視窗中拖曳 GridView 控制項到設計視窗中版權上方的儲存格 2. 選按 GridView 控制項箭頭開啟智慧標籤在 [ 選擇資料來源 ] 欄位選按 AccessDataSource1 3. 網站的資料必需以分頁方式顯示, 所以要在智慧標籤中核選啟用分頁選項 4-15

輕鬆學 Dreamweaver CS5 網頁設計..\Example\Ch0\ \.html..\example\ch0\ \mouse.txt..\example\ch0\ \ _Ok.html 學習重點 JavaScript 複製程式碼 mouse.txt Ctrl+C Ctrl+C 0-4

$輕鬆學 Dreamweaver CS5 網頁設計..\Example\Ch0\ \.html..\example\ch0\ \mouse.txt..\example\ch0\ \ _Ok.html 學習重點 JavaScript 複製程式碼 mouse.txt Ctrl+C Ctrl+C 0-4$ JAVA Extension 0..\Example\Ch0\ \ T.html..\Example\Ch0\ \ T.txt T.txt..\Example\Ch0\ \ T_Ok.html 提示 :. Marquee Marquee Font Color #FFFFFF BG Color #867bf Width 90 Height 50. T.txt Ctrl+C your scrolling