第 16 章 交友網站的設計

31
16 16 第第第第第第第 第第第第第第第 16-1 16-1 第第第第第第第 第第第第第第第 16-2 16-2 第第第第第 第第第第第 16-3 BBS 16-3 BBS 第第第第第 第第第第第 16-4 16-4 第第第第 第第第第 16-5 16-5 第第第第第第第第 第第第第第第第第

Upload: tatyana-blanchard

Post on 01-Jan-2016

39 views

Category:

Documents


0 download

DESCRIPTION

第 16 章 交友網站的設計. 16-1 交友網站的基礎 16-2 訪客留言簿 16-3 BBS 電子佈告欄 16-4 票選系統 16-5 使用者清單聊天室. 16-1 交友網站的基礎. 16-1-1 訪客留言簿 16-1-2 聊天室 16-1-3 票選網調系統. 16-1-1 訪客留言簿. 「訪客留言簿」( GuestBook )是常見的 Web 表單應用,類似 News 或 BBS 討論區,可以提供網友一個發表言論的地方。在訪客留言薄會依序顯示訪客訊息,如果想參與留言,只需在 Web 表單輸入基本資料和留言內容,就可以發表個人意見參與留言。 - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: 第 16 章  交友網站的設計

第第 1616 章 章 交友網站的設計交友網站的設計 16-1 16-1 交友網站的基礎交友網站的基礎 16-2 16-2 訪客留言簿訪客留言簿 16-3 BBS16-3 BBS 電子佈告欄電子佈告欄 16-4 16-4 票選系統票選系統 16-5 16-5 使用者清單聊天室使用者清單聊天室

Page 2: 第 16 章  交友網站的設計

16-1 16-1 交友網站的基礎交友網站的基礎 16-1-1 16-1-1 訪客留言簿訪客留言簿 16-1-2 16-1-2 聊天室聊天室 16-1-3 16-1-3 票選網調系統票選網調系統

Page 3: 第 16 章  交友網站的設計

16-1-1 16-1-1 訪客留言簿訪客留言簿 「訪客留言簿」(「訪客留言簿」( GuestBookGuestBook )是常見的)是常見的 WebWeb

表單應用,類似表單應用,類似 NewsNews或或 BBSBBS 討論區,可以提供討論區,可以提供網友一個發表言論的地方。在訪客留言薄會依序網友一個發表言論的地方。在訪客留言薄會依序顯示訪客訊息,如果想參與留言,只需在顯示訪客訊息,如果想參與留言,只需在 WebWeb表單輸入基本資料和留言內容,就可以發表個人表單輸入基本資料和留言內容,就可以發表個人意見參與留言。意見參與留言。

訪客留言簿提供網友和網站間的溝通橋樑,更是訪客留言簿提供網友和網站間的溝通橋樑,更是大家發表高論的管道,只需結合第大家發表高論的管道,只需結合第 1414 章的網頁章的網頁電子郵件,還能建立一對多(副本郵件)或一對電子郵件,還能建立一對多(副本郵件)或一對一的互動功能。一的互動功能。

Page 4: 第 16 章  交友網站的設計

16-1-2 16-1-2 聊天室聊天室 網路交友最常發生的地方是無所不談的網路聊天網路交友最常發生的地方是無所不談的網路聊天

室(室( Chat RoomChat Room ),一般來說,聊天室都有指),一般來說,聊天室都有指定的聊天主題,登入使用者能夠進行多人的同時定的聊天主題,登入使用者能夠進行多人的同時討論,在聊天室顯示的訊息是所有參與使用者都討論,在聊天室顯示的訊息是所有參與使用者都可以看到,每一個訊息可以指出是屬於誰的意見。可以看到,每一個訊息可以指出是屬於誰的意見。

WebWeb 介面聊天室受限於介面聊天室受限於 HTTPHTTP 通訊協定的特性,通訊協定的特性,並無法即時看到張貼訊息,只能在指定更新周期並無法即時看到張貼訊息,只能在指定更新周期來更新聊天訊息。不僅如此,大多數聊天室不能來更新聊天訊息。不僅如此,大多數聊天室不能顯示線上使用者清單,或傳送私人訊息來提供個顯示線上使用者清單,或傳送私人訊息來提供個人的交友管道。人的交友管道。

Page 5: 第 16 章  交友網站的設計

16-1-3 16-1-3 票選網調系統票選網調系統 線上投票、民調或考試系統都屬於類似的網站功線上投票、民調或考試系統都屬於類似的網站功

能,顧名思義它可以在網站提供票選園地,要求能,顧名思義它可以在網站提供票選園地,要求網友選擇意見,並且進行網友票選的統計。網友選擇意見,並且進行網友票選的統計。

不論是線上投票、民調或考試系統都是一種選擇不論是線上投票、民調或考試系統都是一種選擇題,我們可以使用資料庫儲存問題答案和網友的題,我們可以使用資料庫儲存問題答案和網友的投票記錄,票選統計只是統計資料表的記錄和顯投票記錄,票選統計只是統計資料表的記錄和顯示統計結果。本章範例網站的票選系統,網友可示統計結果。本章範例網站的票選系統,網友可以選擇記名或不記名票選,如果記名就需要輸入以選擇記名或不記名票選,如果記名就需要輸入電子郵件地址。電子郵件地址。

Page 6: 第 16 章  交友網站的設計

16-2 16-2 訪客留言簿訪客留言簿 16-2-1 16-2-1 資料庫版的留言簿資料庫版的留言簿 16-2-2 System.IO16-2-2 System.IO 版的留言簿版的留言簿

Page 7: 第 16 章  交友網站的設計

16-2-1 16-2-1 資料庫版的留言簿資料庫版的留言簿 -- 建立步建立步驟驟

在實作上,訪客留言簿可以使用資料表儲在實作上,訪客留言簿可以使用資料表儲存留言,以存留言,以 ASP.NETASP.NET 技術來建立資料庫版技術來建立資料庫版的訪客留言簿,其步驟如下所示:的訪客留言簿,其步驟如下所示:• 使用使用 AccessAccess 建立訪客留言的資料庫建立訪客留言的資料庫

Guestbook.mdbGuestbook.mdb 。。• 使用使用 ASP.NETASP.NET 建立訪客留言薄,提供建立訪客留言薄,提供 WebWeb 表表

單輸入留言訊息,並且顯示資料表儲存的留言單輸入留言訊息,並且顯示資料表儲存的留言內容。內容。

• 建立電子郵件表單,使用建立電子郵件表單,使用 System.Net.MailSystem.Net.Mail名稱空間寄送郵件給留言者。名稱空間寄送郵件給留言者。

Page 8: 第 16 章  交友網站的設計

16-2-1 16-2-1 資料庫版的留言簿資料庫版的留言簿 -- 訪客留訪客留言資料表言資料表 GuestBookGuestBook

訪客留言資料表訪客留言資料表 GuestBookGuestBook 儲存使用者留儲存使用者留言,其欄位如下表所示:言,其欄位如下表所示:

欄位名稱 類型 大小 欄位說明GDate 日期/時間 N/A 留言的日期和時間Subject 文字 25 留言主旨Email 文字 25 留言的電子郵件地址Message 備忘 N/A 留言內容

Page 9: 第 16 章  交友網站的設計

16-2-1 16-2-1 資料庫版的留言簿資料庫版的留言簿 -- 新增留新增留言言

在建立好訪客留言薄資料庫後,在建立好訪客留言薄資料庫後, ASP.NETASP.NET 程式程式DbGuestBook.aspxDbGuestBook.aspx 整合整合 WebWeb 表單讓網友輸入表單讓網友輸入留言,並且在留言,並且在 WebWeb 表單後顯示表單後顯示 GuestBookGuestBook 資料資料表其他訪客新增的留言記錄。表其他訪客新增的留言記錄。

Page 10: 第 16 章  交友網站的設計

16-2-1 16-2-1 資料庫版的留言簿資料庫版的留言簿 -- 檢視留檢視留言言

留言後稍等一下,就可以重新回到留言後稍等一下,就可以重新回到 ASP.NETASP.NET 程程式,在表單下方顯示新增的留言,如下圖所示:式,在表單下方顯示新增的留言,如下圖所示:

Page 11: 第 16 章  交友網站的設計

16-2-2 System.IO16-2-2 System.IO 版的留言簿版的留言簿 留言簿也可以使用文字檔案儲存留言的留言簿也可以使用文字檔案儲存留言的

HTMLHTML 標籤,在標籤,在 WebWeb 表單後顯示文字檔案表單後顯示文字檔案內容,也就是其他訪客的留言內容。內容,也就是其他訪客的留言內容。

Page 12: 第 16 章  交友網站的設計

16-3 BBS16-3 BBS 電子佈告欄電子佈告欄 16-3-1 BBS16-3-1 BBS 電子佈告欄的基礎電子佈告欄的基礎 16-3-2 16-3-2 建立建立 BBSBBS 電子佈告欄電子佈告欄

Page 13: 第 16 章  交友網站的設計

16-3-1 BBS16-3-1 BBS 電子佈告欄的基礎電子佈告欄的基礎 -- 說說明明

BBSBBS 電子佈告欄是資料庫版留言簿的擴充,電子佈告欄是資料庫版留言簿的擴充,因為因為 BBSBBS 是一種討論園地,提供多主題的是一種討論園地,提供多主題的留言簿,稱為留言板或討論區。留言簿,稱為留言板或討論區。

BBSBBS 的討論功能允許回應使用者留言來進的討論功能允許回應使用者留言來進行討論,不同於留言簿只能讓大家留下意行討論,不同於留言簿只能讓大家留下意見,見, BBSBBS 還可以使用電子郵件讓參與討論還可以使用電子郵件讓參與討論的使用者相互進行私下討論,或在聊天室的使用者相互進行私下討論,或在聊天室進行線上通訊。簡單的說,它是整合留言進行線上通訊。簡單的說,它是整合留言簿、網頁電子郵件和聊天室的簿、網頁電子郵件和聊天室的 WebWeb 應用程應用程式。式。

Page 14: 第 16 章  交友網站的設計

16-3-1 BBS16-3-1 BBS 電子佈告欄的基礎電子佈告欄的基礎 --BBSBBS 留言板資料表留言板資料表

BBSBBS 留言板資料表儲存留言板資料表儲存 BBSBBS 目前開放的留目前開放的留言板,其欄位如下表所示:言板,其欄位如下表所示:

欄位名稱 類型 大小 欄位說明BbsId 文字 3 BBS留言板編號

Groupname 文字 30 留言板名稱

Page 15: 第 16 章  交友網站的設計

16-3-1 BBS16-3-1 BBS 電子佈告欄的基礎電子佈告欄的基礎 --BBSBBS 的留言訊息資料表的留言訊息資料表

BBSBBS 留言訊息資料表是儲存留言訊息資料表是儲存 BBSBBS 留言,其留言,其欄位如下表所示:欄位如下表所示:欄位名稱 類型 大小 欄位說明BbsId 文字 3 留言屬於哪一個 BBS留言板Id 自動編號 N/A 留言訊息編號

Reference 數字 N/A 回應哪一個留言編號的訊息,-1表示不是回應訊息

Postdate 日期/時間 N/A 留言的日期/時間Name 文字 20 留言者姓名Topic 文字 30 留言主旨Email 文字 50 留言的電子郵件地址Message 備忘 N/A 留言內容

Page 16: 第 16 章  交友網站的設計

16-3-2 16-3-2 建立建立 BBSBBS 電子佈告欄電子佈告欄 在在 AccessAccess 建立好上一節的資料庫後,就可以使建立好上一節的資料庫後,就可以使用用 ASP.NETASP.NET 技術來建立技術來建立 BBSBBS 電子佈告欄,其步電子佈告欄,其步驟如下所示:驟如下所示:• 在在 BBSBBS 站新增第站新增第 1313 章的會員管理,因為參與章的會員管理,因為參與 BBSBBS 討討

論的使用者需要先註冊成為會員。論的使用者需要先註冊成為會員。• 當登入當登入 BBSBBS 站後,使用網路商店的產品目錄功能,顯站後,使用網路商店的產品目錄功能,顯

示留言板清單,在選擇留言版後,顯示各板的留言標示留言板清單,在選擇留言版後,顯示各板的留言標題。題。

• 請使用第請使用第 10-710-7 節的主要與詳細表單,在上方表單顯示節的主要與詳細表單,在上方表單顯示留言標題清單,按一下留言標題,就可以在下方表單留言標題清單,按一下留言標題,就可以在下方表單顯示留言的詳細內容。顯示留言的詳細內容。

• 對於每一個留言,都提供回應功能可以參與討論,或對於每一個留言,都提供回應功能可以參與討論,或是提供電子郵件表單寄送電子郵件給留言者。是提供電子郵件表單寄送電子郵件給留言者。

• 在在 BBSBBS 站加上站加上 16-516-5 節的聊天室功能提供線上即時討節的聊天室功能提供線上即時討論。論。

Page 17: 第 16 章  交友網站的設計

16-4 16-4 票選系統票選系統 16-4-1 16-4-1 網站的安裝與使用網站的安裝與使用 16-4-2 16-4-2 網站的架構網站的架構 16-4-3 16-4-3 網站的檔案清單網站的檔案清單

Page 18: 第 16 章  交友網站的設計

16-4 16-4 票選系統票選系統 票選系統網站也是網頁資料庫應用,類似的應用票選系統網站也是網頁資料庫應用,類似的應用領域有網路民調和線上考試系統。網頁票選系統領域有網路民調和線上考試系統。網頁票選系統能夠新增票選題目和票選答案,或是參與投票表能夠新增票選題目和票選答案,或是參與投票表達使用者意見和顯示票選的統計結果。達使用者意見和顯示票選的統計結果。

在票選系統提供二個步驟的表單新增票選題目,在票選系統提供二個步驟的表單新增票選題目,題目可以為是非題或至多題目可以為是非題或至多 55 個答案的選擇題,而個答案的選擇題,而且可以選擇網友是否需要輸入電子郵件地址,如且可以選擇網友是否需要輸入電子郵件地址,如果需要,就會額外檢查果需要,就會額外檢查 IPIP 位址是否重複。換句話位址是否重複。換句話說,同一個說,同一個 IPIP 位址對於票選題目只能投一票。位址對於票選題目只能投一票。

Page 19: 第 16 章  交友網站的設計

16-4-1 16-4-1 網站的安裝與使用網站的安裝與使用 票選系統網站是一個票選系統網站是一個 WebWeb 應用程式,可以應用程式,可以

作為單獨網站或社群網站的一部分,使用作為單獨網站或社群網站的一部分,使用關聯式資料庫儲存票選題目和使用者的投關聯式資料庫儲存票選題目和使用者的投票記錄。票記錄。

票選系統網站的安裝只需將光碟「票選系統網站的安裝只需將光碟「 Ch16-Ch16-44 」資料夾中的所有檔案都複製到網站的主」資料夾中的所有檔案都複製到網站的主目錄,或是建立成虛擬目錄,就可以啟動目錄,或是建立成虛擬目錄,就可以啟動瀏覽程式執行網站,其首頁是瀏覽程式執行網站,其首頁是 Polls.aspxPolls.aspx 。。

Page 20: 第 16 章  交友網站的設計

16-4-2 16-4-2 網站的架構網站的架構 -- 檔案架構檔案架構 票選系統網站是使用票選系統網站是使用 GridViewGridView 控制項的控制項的

表格顯示票選題目、提供者和有多少使用表格顯示票選題目、提供者和有多少使用者參與投票,使用者只需按表格每一列的者參與投票,使用者只需按表格每一列的超連結,就可以參與投票或檢視票選結果。超連結,就可以參與投票或檢視票選結果。

票選系統網站的主目錄是「票選系統網站的主目錄是「 Ch16-4Ch16-4 」,」,所有網站檔案都是儲存在同一個「所有網站檔案都是儲存在同一個「 Ch16-Ch16-44 」目錄。」目錄。

Page 21: 第 16 章  交友網站的設計

16-4-2 16-4-2 網站的架構網站的架構 -- 資料庫架構資料庫架構11

票選系統網站是使用票選系統網站是使用 AccessAccess 資料庫資料庫 Polls.mdbPolls.mdb來儲存票選資料,擁有來儲存票選資料,擁有 22 個資料表個資料表 PollPoll和和PollResultsPollResults 。首先是儲存票選題目和答案的。首先是儲存票選題目和答案的 PollPoll資料表,如下表所示:資料表,如下表所示:資料表:Poll

欄位名稱 類型 大小 欄位說明PollID 自動編號 N/A 票選題目的編號PollName 文字 50 票選題目的名稱PollCreator 文字 50 票選題目的建立者PollQuestion 文字 255 票選的問題Choice1~5 文字 50 票選的答案選項,最多五個NeedEmail 文字 2 是否需要輸入電子郵件地址

Page 22: 第 16 章  交友網站的設計

16-4-2 16-4-2 網站的架構網站的架構 -- 資料庫架構資料庫架構22

PollResultsPollResults 資料表儲存使用者的票選結果,每一資料表儲存使用者的票選結果,每一位使用者投一次票就是一筆記錄,內含投票選擇、位使用者投一次票就是一筆記錄,內含投票選擇、電子郵件地址和電子郵件地址和 IPIP 位址,如下表所示:位址,如下表所示:

資料表:PollResults

欄位名稱 類型 大小 欄位說明PollID 數字 N/A 票選題目的編號

PollAnswer 數字 N/A 票選答案 Choice1~5的欄位編號Email 文字 30 票選者的電子郵件地址

IPAddress 文字 20 票選者的 IP位址

Page 23: 第 16 章  交友網站的設計

16-4-2 16-4-2 網站的架構網站的架構 -- 資料流架構資料流架構11

票選系統網站的資料流架構分成兩個部分:票選系統網站的資料流架構分成兩個部分:第一個部分是參與投票和檢視票選結果,第一個部分是參與投票和檢視票選結果,如下圖所示:如下圖所示:

Page 24: 第 16 章  交友網站的設計

16-4-2 16-4-2 網站的架構網站的架構 -- 資料流架構資料流架構22

第二個部分資料流是新增票選題目,如下第二個部分資料流是新增票選題目,如下圖所示:圖所示:

Page 25: 第 16 章  交友網站的設計

16-4-3 16-4-3 網站的檔案清單網站的檔案清單 票選系統網站套用票選系統網站套用 Polls.masterPolls.master 主版頁面主版頁面

和使用和使用 web.sitmapweb.sitmap 檔案來建立主選單,檔案來建立主選單,一共擁有一共擁有 55 個個 ASP.NETASP.NET 程式檔案。程式檔案。• Polls.aspxPolls.aspx• JoinPoll.aspxJoinPoll.aspx• ViewPoll.aspxViewPoll.aspx• AddPoll.aspxAddPoll.aspx• AddPoll1.aspxAddPoll1.aspx

Page 26: 第 16 章  交友網站的設計

16-5 16-5 使用者清單聊天室使用者清單聊天室 16-5-1 16-5-1 網站的安裝與使用網站的安裝與使用 16-5-2 16-5-2 網站的架構網站的架構 16-5-3 16-5-3 網站的檔案清單網站的檔案清單

Page 27: 第 16 章  交友網站的設計

16-5-1 16-5-1 網站的安裝與使用網站的安裝與使用 使用者清單聊天室網站是獨立使用者清單聊天室網站是獨立 WebWeb 應用程應用程

式,可以作為單獨網站或社群網站的一部式,可以作為單獨網站或社群網站的一部分,以文字檔案(每一個聊天室一個)來分,以文字檔案(每一個聊天室一個)來儲存聊天訊息。儲存聊天訊息。

請將光碟「請將光碟「 Ch16-5Ch16-5 」資料夾的所有檔案」資料夾的所有檔案都複製到網站主目錄,或建立成虛擬目錄,都複製到網站主目錄,或建立成虛擬目錄,就可以啟動瀏覽程式執行使用者清單聊天就可以啟動瀏覽程式執行使用者清單聊天室,其首頁是室,其首頁是 Default.aspxDefault.aspx 。。

Page 28: 第 16 章  交友網站的設計

16-5-2 16-5-2 網站的架構網站的架構 -- 檔案架構檔案架構 使用者清單聊天室網站的每個聊天室是一頁框架使用者清單聊天室網站的每個聊天室是一頁框架

頁,允許使用者參與聊天、顯示目前或其他聊天頁,允許使用者參與聊天、顯示目前或其他聊天室的使用者清單和傳送私人訊息。室的使用者清單和傳送私人訊息。

為了避免使用者忘了登出聊天室,就算沒有按為了避免使用者忘了登出聊天室,就算沒有按【【離開聊天室離開聊天室】】超連結登出聊天室,也沒有關係,超連結登出聊天室,也沒有關係,使用者只需離開聊天室網頁一段時間,即超過更使用者只需離開聊天室網頁一段時間,即超過更新頻率的最大秒數,或是新頻率的最大秒數,或是 SessionSession 期間過期了,期間過期了,系統都會自動強迫使用者登出聊天室。系統都會自動強迫使用者登出聊天室。

使用者清單聊天室網站的主目錄是「使用者清單聊天室網站的主目錄是「 Ch16-5Ch16-5 」,」,擁有子目錄擁有子目錄 RoomFilesRoomFiles 儲存儲存 ChatRooms.xmlChatRooms.xml和聊天室檔案,網站和聊天室檔案,網站 ASP.NETASP.NET 程式等相關檔案程式等相關檔案是在「是在「 Ch16-5Ch16-5 」目錄。」目錄。

Page 29: 第 16 章  交友網站的設計

16-5-2 16-5-2 網站的架構網站的架構 --框架頁架構框架頁架構 使用者清單聊天室網站的聊天室是一頁框架頁,使用者清單聊天室網站的聊天室是一頁框架頁,框架頁框架頁 ChatRoom.aspxChatRoom.aspx 上下分成三個部分,如上下分成三個部分,如下圖所示:下圖所示:

Page 30: 第 16 章  交友網站的設計

16-5-2 16-5-2 網站的架構網站的架構 -- 資料流架構資料流架構 使用者清單聊天室網站的資料流架構是在使用者清單聊天室網站的資料流架構是在

聊天室的框架頁本身,如下圖所示:聊天室的框架頁本身,如下圖所示:

Page 31: 第 16 章  交友網站的設計

16-5-3 16-5-3 網站的檔案清單網站的檔案清單 聊天室網站的部分聊天室網站的部分 ASP.NETASP.NET 程式是套用程式是套用 Chats.masterChats.master

主版頁面和使用主版頁面和使用 web.sitmapweb.sitmap 檔案來建立主選單。網站檔案來建立主選單。網站擁有擁有 web.configweb.config 檔案指定中文編碼、檔案指定中文編碼、 Global.asaxGlobal.asax 檔案檔案和多個和多個 ASP.NETASP.NET 程式檔案。程式檔案。• Global.asaxGlobal.asax• Default.aspxDefault.aspx• ChatRoom.aspxChatRoom.aspx• ChatTitle.aspxChatTitle.aspx• ChatLogout.aspxChatLogout.aspx• ChatInput.aspxChatInput.aspx• ChatMessage.aspxChatMessage.aspx• UsersList.aspxUsersList.aspx• PrivateMsg.aspxPrivateMsg.aspx• AddRoom.aspxAddRoom.aspx• LogoutUser.aspxLogoutUser.aspx• LogoutAll.aspxLogoutAll.aspx