個人博客網(wǎng)站課程設計

1、<p>　　課程設計Ⅴ課程設計 </p><p><b>　　設計說明書</b></p><p>　個人博客管理網(wǎng)站</p><p><b>　　課程設計任務書</b></p><p>　　2011—2012學年第二學期</p><p>　　專業(yè)： 信息管理

2、與信息系統(tǒng) 學號： 姓名： </p><p>　　課程設計名稱： 課程設計V課程設計 </p><p>　　設計題目： 個人博客管理網(wǎng)站 </p><p>　　完成期限：自 2012 年 2 月

3、 20 日至 2012 年 3 月 2 日共 2 周</p><p>　　設計依據(jù)、要求及主要內容（可另加附頁）：</p><p>　　現(xiàn)在的很多網(wǎng)站都是用戶建立的一個日記網(wǎng)站，也就是博客網(wǎng)站。用戶可以通過書寫博客把自己的心情，想法等通過互聯(lián)網(wǎng)和朋友交流。本次課程設計依據(jù)《網(wǎng)頁設計》課程所學的內容，結合現(xiàn)在網(wǎng)站發(fā)展的趨勢和布局要求，利用Macromedia Drea

4、mweaver 、visual studio 、Fireworks和Flash等網(wǎng)頁設計工具，建立一個基于asp.net的個人博客網(wǎng)站。</p><p>　　具體要求及主要內容：</p><p>　　1．利用c#作為博客的開發(fā)語言。</p><p>　　2．后臺數(shù)據(jù)庫可以采用ACCESS或者SQL SERVER。</p><p>　　3．網(wǎng)站

5、首頁的導航菜單準確無誤，無死連接。</p><p>　　4．利用CSS樣式，美化網(wǎng)站的字體和顏色。</p><p>　　5．進入任何一個博客頁面都可返回首頁。頁面顯示沒有錯誤。</p><p>　　6．管理員可登陸博客后臺管理博客。要求能自定義的博客的欄目，發(fā)表博文和圖片。</p><p>　　7．管理員可以隨時修改和刪除發(fā)布的博文。<

6、/p><p>　　指導教師（簽字）： 教研室主任（簽字）： </p><p>　　批準日期： 年 月 日</p><p><b>　　摘 要</b></p><p>　　博客是開放的私人空間，可以充分利用

7、超文本鏈接、網(wǎng)絡互動、動態(tài)更新等特點，可以以文會友，結識和匯聚朋友，進行深度交流溝通。本次課題個人博客系統(tǒng)主要用于發(fā)表個人最近日志，記錄一些心情感想的一種網(wǎng)頁形式博客。本網(wǎng)站主要是利用visual studio2010 制作而成，并結合Fireworks和Flash等網(wǎng)頁設計工具進行網(wǎng)頁的設計，后臺采用SQL SERVER 2005數(shù)據(jù)庫，使用c#語言設計的一個個人博客管理動態(tài)網(wǎng)站。</p><p>　　關鍵詞：

8、 visual studio2010；個人博客；動態(tài)網(wǎng)站</p><p><b>　　目 錄</b></p><p><b>　　1 課題描述1</b></p><p><b>　　2 設計過程2</b></p><p>　　2.1 需求分析2</p>&

9、lt;p>　　2.2 系統(tǒng)流程圖2</p><p>　　2.3功能結構分析3</p><p>　　2.4數(shù)據(jù)庫設計4</p><p>　　2.5前臺頁面設計6</p><p>　　2.5.1母版頁設計6</p><p>　　2.5.2首頁設計6</p><p>　　2.5.3留

10、言板設計8</p><p>　　2.6后臺頁面設計8</p><p>　　2.6.1后臺頁面布局設計8</p><p>　　2.6.2文章管理設計9</p><p>　　2.6.2留言管理11</p><p>　　2.6.3相冊管理11</p><p><b>　　3 測試

11、13</b></p><p>　　3.1后臺管理登陸13</p><p>　　3.2博客管理14</p><p>　　3.2.1添加文章驗證14</p><p>　　3.3.2刪除文章驗證14</p><p>　　3.3.3修改文章驗證15</p><p>　　3.3留言

12、管理15</p><p>　　3.4.1修改照片信息驗證16</p><p>　　3.4.2上傳照片驗證16</p><p><b>　　總 結17</b></p><p><b>　　參考文獻18</b></p><p><b>　　1 課題描述<

13、;/b></p><p>　　本次課題是要完成一個集日志發(fā)表、后臺管理為一體的個人博客管理系統(tǒng)。在前臺游客可以查看相冊、博文、等并可在留言板中添加評論。后臺管理可以實現(xiàn)的功能有：博文的添加、修改和刪除；照片的添加、刪除以及分類；查詢刪除留言等。界面直觀、操作簡單，內容布局條理清楚，版面協(xié)調、統(tǒng)一，能夠實現(xiàn)方便快捷的管理與維護。</p><p>　　開發(fā)工具：Asp.net、 visu

14、al studio 2010、SQL server 2005</p><p><b>　　2 設計過程 </b></p><p>　　該博客網(wǎng)站包括前臺瀏覽和后臺管理兩部分功能。實現(xiàn)過程包括三部分：前臺功能設計，后臺設計，數(shù)據(jù)庫設計。</p><p><b>　　2.1 需求分析</b></p><p&

15、gt;　　本系統(tǒng)的用戶包括：普通游客、博客主人。</p><p>　?。?）普通游客進入網(wǎng)站后可以瀏覽博客文章和博客相冊，并在瀏覽博客后進行評論。</p><p>　?。?）博客主人通過前臺登錄后,可對自己的博客空間進行管理,包括發(fā)布自己的網(wǎng)絡日志,</p><p>　　收藏個人照片,相關人員進行交流和溝通以及刪除訪問者發(fā)表的評論等。</p><

16、p>　　在博客管理界面，博主可以對自己的博客類型進行管理。包括：添加、編輯和刪除博客類型。</p><p>　　博主可以暫時不發(fā)布博客，而是將文章先放到草稿箱等以后要發(fā)布時，再從草稿箱中提出，還能夠將回收站中的博客還原或者將博客從回收站中徹底刪除。</p><p>　　博主還可以上傳圖片文件，同時進行管理，包括瀏覽和刪除操作。</p><p>　　博主能夠對游

17、客的評論進行管理，包括查詢和刪除操作。</p><p><b>　　2.2 系統(tǒng)流程圖</b></p><p>　　后臺業(yè)務流程：（博主操作流程）見下圖：</p><p>　　圖 2.1 后臺業(yè)務流程圖</p><p>　　前臺業(yè)務流程：（游客操作流程）見下圖：</p><p>　　圖 2.2 前

18、臺業(yè)務流程</p><p><b>　　2.3功能結構分析</b></p><p>　　此系統(tǒng)主要包含兩個方面，一為前臺信息顯示系統(tǒng)即普通游客空間、二為后臺信息管理系統(tǒng)即管理員管理空間。前者是面向公眾的一個窗口，通過前臺信息顯示系統(tǒng)方便普通游客瀏覽日志、評論和留言。后臺信息管理系統(tǒng)在管理員登錄后，管理員可以發(fā)表日志；回復評論和留言；管理日志、評論、留言及個人信息等。&

19、lt;/p><p>　　系統(tǒng)的基本功能結構圖如圖2.1所示。</p><p>　　圖2.3 功能結構圖</p><p>　　普通游客模塊：主要是為了讓訪問本博客的游客對博客有一個基本的了解。通過游客的評論和留言了解游客對本博客博主博文的評價，以便于同博主更好的互動和交流。</p><p>　　博客主人管理員模塊：主要實現(xiàn)對所發(fā)表的博文、評論及留言

20、信息進行管理，對博客各個方面的管理與維護以便網(wǎng)站更好的運行。其個管理模塊的功能有：</p><p>　　文章管理：管理員可以對博文進行分類管理、添加分類、添加博文等操作。</p><p>　　相冊管理：管理員可以對照片進行分類管理、添加分類、添加或刪除照片等操作。</p><p>　　留言管理：管理員可以回復或者刪除游客留言。</p><p>

21、;<b>　　2.4數(shù)據(jù)庫設計</b></p><p>　　本系統(tǒng)采用SQL Server 2005作為開發(fā)工具。</p><p>　　根據(jù)系統(tǒng)需求分析和保證數(shù)據(jù)統(tǒng)一、完整和高效的原則，需要對數(shù)據(jù)庫進行合理的設計。首先先在SQL Server 2005中建立一個名為“blog”的數(shù)據(jù)庫來存放本系統(tǒng)所必須的數(shù)據(jù)表。</p><p>　　本系統(tǒng)數(shù)據(jù)

22、庫中主要的數(shù)據(jù)表分別為用戶注冊表（Register）, 博客類別表（Class）， 博客文章表（News），圖片文件表（Photo）,博客留言表（Message）。如表2-1—2-5所示：</p><p><b>　　表2-1用戶注冊表</b></p><p><b>　　表2-2博客類別表</b></p><p><

23、;b>　　表2-3博客文章表</b></p><p><b>　　表2-4圖片文件表</b></p><p><b>　　表2-5博客留言表</b></p><p><b>　　2.5前臺頁面設計</b></p><p>　　2.5.1母版頁設計</p&

24、gt;<p>　　利用母版頁可以將前臺的幾個頁面創(chuàng)建一致的布局。單個母版頁可以為應用程序中的所有頁（或一組頁）定義所需的外觀和標準行為。然后可以創(chuàng)建包含要顯示的內容的各個內容頁。當用戶請求內容頁時，這些內容頁與母版頁合并以將母版頁的布局與內容頁的內容組合在一起輸出。如下圖2.4為site2.master的設計圖。</p><p>　　圖 2.4 母版頁設計圖</p><p>

25、<b>　　2.5.2首頁設計</b></p><p>　　首頁作為內容頁面被包含在母版頁site2.master的占位符控件顯示最新文章、友情鏈接、相冊以及留言。如圖2.5所示。</p><p><b>　　圖2.5主頁面</b></p><p>　　主要具體代碼如下：<asp:ContentID="&q

26、uot;ContentPlaceHolderID="Left"runat="server"></p><p>　　<uc1:LeftList ID="LeftList1" runat="server" /></p><p>　　</asp:Content></p>&

27、lt;p>　　<asp:ContentID=""ContentPlaceHolderID="Right"runat="server"></p><p>　　<asp:Repeater ID="Repeater1" runat="server"></p><p>

28、　　<ItemTemplate></p><p>　　<div id="c-right"></p><p>　　<div class="Page"></p><p>　　<h3><ahref='<%#Eval("news_id","

29、;Next.aspx?id={0}")%>'target="_blank"><%# Eval("Title") %></a></h3></p><p>　　<p class="botime"> <%# Eval("AddDate") %><

30、/p></p><p>　　<p class="bod"><%# BindBody(Eval("Body").ToString()) %></p></p><p>　　<p class="show"></p><p>　　瀏覽 | 評論</p&g

31、t; <br> </p><p><b>　　</div> </b></p><p><b>　　</div></b></p><p>　　</ItemTemplate></p><p>　　</asp:Repeater><

32、/p><p>　　2.5.3留言板設計</p><p>　　留言板主要是把訪客的留言顯示出來，是一個博主與游客談心交流的地方，在留言板中可以暢所欲言，就感興趣的話題展開討論與大家進行交流和溝通。留言模板頁面如圖2.6所示。</p><p>　　圖 2.6 留言板 </p><p><b>　　主要代碼如下

33、：</b></p><p>　　<div id="inner"></p><p>　　<div> <uc1:liuyan ID="liuyan1" runat="server" /></div></p><p>　　<br /> <

34、;br /></p><p>　　<uc2:huifu ID="huifu1" runat="server" /></p><p><b>　　</div></b></p><p><b>　　2.6后臺頁面設計</b></p><p

35、>　　2.6.1后臺頁面布局設計</p><p>　　后臺頁面使用框架iframe 來搭建頁面。iframe元素會創(chuàng)建包含另外一個文檔的內聯(lián)框架。</p><p><b>　　如下圖2.7</b></p><p>　　圖2.7 后臺頁面設計圖</p><p><b>　　主要代碼如下：</b>

36、</p><p>　　<div id="inner"></p><p>　　<div><iframe name="top" src="../html/top.htm" scrolling="no" frameborder="0" width="700p

37、x"></iframe></div></p><p>　　<div><iframename="out"src="../html/outlookleft.html"scrolling="no" frameborder="0"width="180px" heig

38、ht="530px"></iframe></div></p><p>　　<div><iframe name="cen" src="../html/Main.htm" scrolling="no" frameborder="0" width=" 465px&

39、quot;height="479px"></iframe> </div></p><p><b>　　</div></b></p><p>　　后文中用target屬性來設置頁面<li><ahref="../Manage/ManangeNews.aspx" target

40、="cen">文章管理</a></li></p><p>　　2.6.2文章管理設計</p><p>　　博主登錄后單擊導航欄“添加文章”即可進入添加文章頁面。點擊“文章管理”可以進行文章的編輯刪除操作。添加文章和文章管理頁面分別如圖2.8和圖2.9所示。</p><p><b>　　圖2.8 添加文章&l

41、t;/b></p><p>　　圖 2.9 文章管理圖</p><p>　　添加文章的主要代碼：</p><p>　　protected void btnAdd_Click(object sender, EventArgs e)</p><p>　　{ string text = InputText(Editor1.Text);<

42、/p><p>　　if(bdc.pro_AddNew(txtTitle.Text.Trim(),text,DateTime.Now,0,0,TType.SelectedValue,false ,false)>0)</p><p>　　{ ClientScriptManager script = this.ClientScript;</p><p>　　script

43、.RegisterStartupScript(this.GetType(),"123", "alert('添加文章失敗')", true);</p><p><b>　　}</b></p><p><b>　　else</b></p><p>　　{ ClientSc

44、riptManager script = this.ClientScript;</p><p>　　script.RegisterStartupScript(this.GetType(),"123","<script>alert('添加文成功)|');location.href('ManangeNews.aspx');</script

45、>");</p><p><b>　　}</b></p><p><b>　　}</b></p><p>　　添加至草稿箱的主要代碼：</p><p>　　protected void btndraft_Click(object sender, EventArgs e)</p&

46、gt;<p>　　{if((bdc.pro_AddNew(txtTitle.Text.Trim(),Editor1.Text.Trim(), DateTime.Now, 0, 0, TType.SelectedValue, true, false) > 0)) </p><p>　　ClientScriptManager scr = this.ClientScript;<

47、;/p><p>　　scr.RegisterStartupScript(this.GetType(), "34", "alert('未能添加到草稿箱')", true); }</p><p>　　else{ Response.Write("<script>alert('已經(jīng)添加到草稿')</sc

48、ript>");</p><p>　　Response.Redirect("~/CuteSoft_Client/NewSave2.aspx");}</p><p><b>　　}</b></p><p><b>　　2.6.2留言管理</b></p><p>　　

49、留言管理模塊可以通過查找關鍵字或開始結束日期來獲得相應留言記錄，進行刪除操作。留言模板頁面如圖2.10所示。</p><p>　　圖2.10留言板頁面</p><p><b>　　主要實現(xiàn)代碼如下：</b></p><p>　　<asp:QueryExtenderID="QueryExtender1"runat=&qu

50、ot;server"TargetControlID="LinqDataSource1"></p><p>　　<asp:SearchExpression DataFields="body" SearchType ="StartsWith" ></p><p>　　<asp:ControlParam

51、eter ControlID ="TextBox1" /></p><p>　　</asp:SearchExpression></p><p>　　<asp:RangeExpression DataField ="date" MaxType ="Inclusive" MinType ="Inclu

52、sive" ></p><p>　　<asp:ControlParameter ControlID ="TextBox2" DbType ="DateTime" /></p><p>　　<asp:ControlParameter ControlID ="TextBox3" DbType=&qu

53、ot;DateTime" /> </p><p>　　</asp:RangeExpression></p><p>　　</asp:QueryExtender></p><p><b>　　2.6.3相冊管理</b></p><p>　　通過相冊管理模塊可以進行上傳照片，插看和刪除

54、圖片。如下2.11圖。</p><p>　　圖 2.11 相冊管理圖</p><p><b>　　查看相冊修改代碼：</b></p><p>　　protected void butsubmit_Click(object sender, EventArgs e)</p><p>　　{ string title = &q

55、uot;", info = "";</p><p>　　int id = Convert.ToInt32(Request.QueryString["id"]);</p><p>　　for (int i = 0; i < dlphotoinfo.Controls.Count; i++) {title=((TextBox)dlpho

56、toinfo.Controls[i].FindControl("txttitle")).Text;</p><p>　　info=((TextBox)dlphotoinfo.Controls[i].FindControl("txtinfo")).Text;</p><p><b>　　}</b></p><p

57、>　　if (bdc.pro_UpdatePhoto(id,title,info)<=0)</p><p>　　{ClientScriptManager script = this.ClientScript;</p><p>　　script.RegisterStartupScript(this.GetType(),"123","<scrip

58、t>alert('修改圖片功！');location.href('ManagePhoto.aspx');</script>");</p><p><b>　　}</b></p><p><b>　　else</b></p><p>　　{ClientScriptM

59、anager script = this.ClientScript;</p><p>　　script.RegisterStartupScript(this.GetType(), "12", "alert('修改圖片失??！')", true);</p><p><b>　　}</b></p><

60、;p><b>　　}</b></p><p><b>　　3 測試</b></p><p>　　3.1后臺管理登陸 </p><p>　　在后臺管理中需要有一個登陸的頁面，只有進行登錄并通過身份驗證的用戶，才可以在個人博客頁面發(fā)表日志，并借助個人設置實現(xiàn)對個人博客相關信息的管理維護。對于沒有經(jīng)過身份驗證的網(wǎng)絡用戶不允

61、許在博客頁面中發(fā)表日志，更不允許對博客頁面信息進行管理維護。其登陸頁面如圖3.1所示。</p><p>　　圖3.1后臺管理登陸頁面</p><p>　　登陸頁面具體代碼如下：</p><p>　　protected void btnlogin_Click(object sender, EventArgs e)</p><p>　　{stri

62、ng uid = txtuid.Text.Trim().ToString();</p><p>　　string pwd = txtpwd.Text.Trim().ToString();</p><p>　　if (uid != " " && pwd != " ")</p><p>　　{ var result

63、 = from n in bdc.Register</p><p>　　where n.user_id == Int32.Parse(uid) && n.user_name == pwd</p><p><b>　　select n;</b></p><p>　　if (result !=null)</p><

64、;p>　　{Session["username"] = uid;</p><p>　　Response.Redirect("../Manage/Hou.aspx",true);}</p><p><b>　　else</b></p><p>　　{ClientScriptManager client

65、 = this.ClientScript; client.RegisterStartupScript(this.GetType(),"55","<script>alert('用戶名或密碼錯誤，請重新輸入！');history.back()</script>");</p><p><b>　　return;</b>

66、;</p><p><b>　　}}</b></p><p><b>　　}</b></p><p><b>　　3.2博客管理</b></p><p>　　3.2.1添加文章驗證</p><p>　　進入后臺添加文章后界面如圖3.2所示。</p&

67、gt;<p>　　圖3.2管理菜單首頁</p><p>　　3.3.2刪除文章驗證</p><p>　　圖3.3日志管理頁面 </p><p>　　3.3.3修改文章驗證</p><p>　　在點擊“編輯”之后會出現(xiàn)博文的具體信息，進行修改，“保存修改”即把修改后的內容添加到數(shù)據(jù)庫中去如圖3.4所示。</p>&l

68、t;p>　　圖3.4文章編輯頁面 </p><p><b>　　3.3留言管理</b></p><p>　　普通游客在瀏覽網(wǎng)頁時，可以進行留言操作。如圖：姓名為“l(fā)i”的人進行留言。如圖3.5。</p><p>　　圖 3.5 留言驗證圖</p><p><b>　　3.4相冊管理</b>&l

69、t;/p><p>　　3.4.1修改照片信息驗證</p><p>　　查看圖片后，可以對其相關信息進行修改如下圖3.6。</p><p>　　圖 3.6 修改照片圖</p><p>　　3.4.2上傳照片驗證</p><p>　　點擊“添加圖片”，可以上傳圖片。如下圖3.7。</p><p>　　圖

70、3.7 上傳圖片驗證</p><p><b>　　總 結</b></p><p>　　通過這次課程設計，我了解了一個網(wǎng)站形成的基本過程和基本綱領構架，加深了我對動態(tài)網(wǎng)站的認識，相信這些知識都將對我的學習帶來很大的幫助。這次設計個人博客網(wǎng)站，對我來說是一個將所學知識從書本運用到實際操作的寶貴次體驗。在設計過程中我學會了很多，也感到自身知識的貧乏，同時也認識到了理論與實

71、踐間存在的巨大差距，有些看上去很簡單的問題，在動手去實踐時卻未必會順利。一味的啃書并非是好的。只有理論與實踐相結合，才能更快的進步，學到更多的知識。希望在今后的努力中能做出更完善的設計。</p><p><b>　　參考文獻</b></p><p>　　[1] 張強等編著. 網(wǎng)頁制作與開發(fā)教程.北京：人民郵電出版社，2008</p><p>