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

TOC\o"1-5"\h\z\o"CurrentDocument"1課題描述 2\o"CurrentDocument"2設計過程 3\o"CurrentDocument"2.1需求分析 3\o"CurrentDocument"2.2系統(tǒng)流程圖 3\o"CurrentDocument"2.3功能結(jié)構(gòu)分析 4\o"CurrentDocument"2.4數(shù)據(jù)庫設計 5\o"CurrentDocument"2.5前臺頁面設計 7\o"CurrentDocument"2.5.1母版頁設計 7\o"CurrentDocument"2.5.2首頁設計 7\o"CurrentDocument"2.5.3留言板設計 9\o"CurrentDocument"2.6后臺頁面設計 9\o"CurrentDocument"2.6.1后臺頁面布局設計 92.6.2文章管理設計 10\o"CurrentDocument"2.6.2留言管理 12\o"CurrentDocument"2.6.3相冊管理 123測試 14\o"CurrentDocument"3.1后臺管理登陸 14\o"CurrentDocument"3.2博客管理 15\o"CurrentDocument"3.2.1添加文章驗證 15\o"CurrentDocument"3.3.2刪除文章驗證 15\o"CurrentDocument"3.3.3修改文章驗證 16\o"CurrentDocument"3.3留言管理 16\o"CurrentDocument"3.4.1修改照片信息驗證 17\o"CurrentDocument"3.4.2上傳照片驗證 17總結(jié) 18\o"CurrentDocument"參考文獻 191課題描述本次課題是要完成一個集日志發(fā)表、后臺管理為一體的個人博客管理系統(tǒng)。在前臺游客可以查看相冊、博文、等并可在留言板中添加評論。后臺管理可以實現(xiàn)的功能有：博文的添加、修改和刪除；照片的添加、刪除以及分類；查詢刪除留言等。界面直觀、操作簡單，內(nèi)容布局條理清楚，版面協(xié)調(diào)、統(tǒng)一，能夠?qū)崿F(xiàn)方便快捷的管理與維護。開發(fā)工具：Dreamweavercs5>SQLserver20082設計過程該博客網(wǎng)站包括前臺瀏覽和后臺管理兩部分功能。實現(xiàn)過程包括三部分：前臺功能設計，后臺設計，數(shù)據(jù)庫設計。2.1需求分析本系統(tǒng)的用戶包括：普通游客、博客主人。（1） 普通游客進入網(wǎng)站后可以瀏覽博客文章和博客相冊，并在瀏覽博客后進行評論。（2） 博客主人通過前臺登錄后，可對自己的博客空間進行管理,包括發(fā)布自己的網(wǎng)絡日志，收藏個人照片，相關人員進行交流和溝通以及刪除訪問者發(fā)表的評論等。（3） 在博客管理界面，博主可以對自己的博客類型進行管理。包括：添加、編輯和刪除博客類型。（4） 博主可以暫時不發(fā)布博客，而是將文章先放到草稿箱等以后要發(fā)布時，再從草稿箱中提出，還能夠?qū)⒒厥照局械牟┛瓦€原或者將博客從回收站中徹底刪除。（5） 博主還可以上傳圖片文件，同時進行管理，包括瀏覽和刪除操作。（6） 博主能夠?qū)τ慰偷脑u論進行管理，包括查詢和刪除操作。2.2系統(tǒng)流程圖后臺業(yè)務流程：（博主操作流程）見下圖：登錄ZA結(jié)束開始登陸成功登錄失敗注銷或退出相冊管理文章管理登錄ZA結(jié)束開始登陸成功登錄失敗注銷或退出相冊管理文章管理留言管理圖2.1后臺業(yè)務流程圖前臺業(yè)務流程：（游客操作流程）見下圖：圖2.2前臺業(yè)務流程2.3功能結(jié)構(gòu)分析此系統(tǒng)主要包含兩個方面，一為前臺信息顯示系統(tǒng)即普通游客空間、二為后臺信息管理系統(tǒng)即管理員管理空間。前者是面向公眾的一個窗口，通過前臺信息顯示系統(tǒng)方便普通游客瀏覽日志、評論和留言。后臺信息管理系統(tǒng)在管理員登錄后，管理員可以發(fā)表日志；回復評論和留言；管理日志、評論、留言及個人信息等。系統(tǒng)的基本功能結(jié)構(gòu)圖如圖2.1所示。圖2.3功能結(jié)構(gòu)圖普通游客模塊：主要是為了讓訪問本博客的游客對博客有一個基本的了解。通過游客的評論和留言了解游客對本博客博主博文的評價，以便于同博主更好的互動和交流。博客主人管理員模塊：主要實現(xiàn)對所發(fā)表的博文、評論及留言信息進行管理，對博客各個方面的管理與維護以便網(wǎng)站更好的運行。其個管理模塊的功能有：文章管理：管理員可以對博文進行分類管理、添加分類、添加博文等操作。相冊管理：管理員可以對照片進行分類管理、添加分類、添加或刪除照片等操作。留言管理：管理員可以回復或者刪除游客留言。我主要負責瀏覽日志和文章管理兩塊。2.4數(shù)據(jù)庫設計本系統(tǒng)采用SQLServer2005作為開發(fā)工具。根據(jù)系統(tǒng)需求分析和保證數(shù)據(jù)統(tǒng)一、完整和高效的原則，需要對數(shù)據(jù)庫進行合理的設計。首先先在SQLServer2005中建立一個名為“blog”的數(shù)據(jù)庫來存放本系統(tǒng)所必須的數(shù)據(jù)表。本系統(tǒng)數(shù)據(jù)庫中主要的數(shù)據(jù)表分別為用戶注冊表（Register）,博客類別表（Class），博客文章表（News），圖片文件表（Photo），博客留言表（Message）。如表2-1—2-5所示：

表-dbo.R&gisiter拷要列名數(shù)據(jù)類型允許空003 ]int回Liser_nannevarchar(15)p3E5worduarcharflS)0sendpasswordvarchar(15)Bquestionvarchar(30)Banswervarchar(3Q)Baiilevarc±iar(30)國relnameuarc±iar(15)addresswarchar(200)回ageintsex如「⑵phene varchar(20)表2-1用戶注冊表表-擂要列名教據(jù)類型允許空[Chssjd:intBClsEE_riarrienv3rctisr(30)AddDatedatetime間B表2-2博客類別表表-dbc-News摘要列名巍據(jù)類型允許空>eNeva'sJdintnTtienvardiar(.3O)園Bodyrwardiar(3000j國AddDatedatetinneClickint國Reint匣］Classnvardiar(l^)國IsSavebit匣］15既1bit國表2-3博客文章表-dbc.Photc表-dbo.News摘要列名數(shù)據(jù)類型允許空>vphotojdint□Ttleyarchar(50)Infbwarc±iar(5Q)AddDatedatetinfteUrlvarc±iar(50)表2-4圖片文件表

2.5前臺頁面設計2.5.1母版頁設計利用母版頁可以將前臺的幾個頁面創(chuàng)建一致的布局。單個母版頁可以為應用程序中的所有頁（或一組頁）定義所需的外觀和標準行為。然后可以創(chuàng)建包含要顯示的內(nèi)容的各個內(nèi)容頁。當用戶請求內(nèi)容頁時，這些內(nèi)容頁與母版頁合并以將母版頁的布局與內(nèi)容頁的內(nèi)容組合在一起輸出。如下圖2.4為site2.master起輸出。如下圖2.4為site2.master的設計圖。首頁IftUL旺留言我的博客圖2.4母版頁設計圖2.5.2首頁設計首頁作為內(nèi)容頁面被包含在母版頁site2.master的占位符控件顯示最新文章、友情鏈接、相冊以及留言。如圖2.5所示。

我的博客首頁祖朋日志留言管理登錄注冊最新文章海請珍H最新文章海請珍H脖于后有更的人!!!友情銷接2011/11/71te0l：S3滬指郵日在航匚鹽耄隹氏擊.寶際上走廄一23日旱握中就已蛙指出多方西防守點在鼠口批.遠善可忌一下?3日苗早報女帝*爐遂令日攻防睦、咨EiO果埃始匠篷.伯監(jiān)也吏為主.涕覽時I評詮的音莎何以表達情感？2011/11/711:20!43.Qfi± 中匪?，（sfnpnntntfwrainJiS?若適于5?至坦歌每片的粉繡怕一定全左耳賽歸在怨=圭照?BJ1利FSn。mi"白U白值.擊由白昌fts■冬W由宿I出由由切＜TTif；aS^1.Tidriai圖2.5主頁面主要具體代碼如下：<asp:ContentID=〃〃ContentPlaceHolderlD=〃Left〃runat=〃server”〉<uc1:LeftListID=〃LeftListl"runat=〃server"/></asp:Content><asp:ContentID=""ContentPlaceHolderlD=〃Right〃runat="server”〉<asp:RepeaterID="Repeaterl"runat="server”〉<ItemTemplate><divid=”c-right"><divclass="Page”><h3><ahref='<%#Eval("news_id”,"Next.aspx?id={0}")%>'target="_blank"><%#Eval("Title")%></a></h3><pclass="botime"><%#Eval("AddDate")%></p><pclass="bod"><%#BindBody(Eval("Body").ToString())%></p><pclass="show”>瀏覽|評論</p><br></div></div></ItemTemplate></asp:Repeater>

2.5.3留言板設計留言板主要是把訪客的留言顯示出來，是一個博主與游客談心交流的地方，在留言板中可以暢所欲言，就感興趣的話題展開討論與大家進行交流和溝通。留言模板頁面如圖2.6所示。圖2.6留言板主要代碼如下：<divid=〃inner〃><div><uc1:liuyanID=〃liuyanl"runat=〃server”/></div><br/><br/><uc2:huifuID=〃huiful"runat=〃server"/></div>2.6后臺頁面設計2.6.1后臺頁面布局設計后臺頁面使用框架iframe來搭建頁面。iframe元素會創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架。如下圖2.7

圖2.7后臺頁面設計圖主要代碼如下：<divid=〃inner〃><div><iframename=〃top" src=〃../html/top.htm" scrolling=〃no”frameborder=〃0〃width=〃700px〃></iframe></div><div><iframename=〃out〃src=〃../html/outlookleft.html〃scrolling="no”frameborder=〃0〃width=〃180px〃height=”530px"></iframe></div><div><iframename="cen" src=”../html/Main.htm" scrolling="no”frameborder="0"width=”465px"height=”479px"></iframe></div></div>后文中用target屬性來設置頁面<li><ahref=”../Manage/ManangeNews.aspx"target="cen”>文章管理</a></li>2.6.2文章管理設計博主登錄后單擊導航欄“添加文章”即可進入添加文章頁面。點擊“文章管理”可以進行文章的編輯刪除操作。添加文章和文章管理頁面分別如圖2.8和圖2.9所示。破口女童文童首理日志分類草稿箱回蟀用戶配置莢頭：3/心 '充司您：CSSC1D35-段苒 -宇性1I-1-子E-1?西里畛B〃壬二二坦商=dbWV借’□處￡隹W主菱臨信白田（3國口文章標通添加日期文章類別點擊次數(shù)編輯刪除逢高繼續(xù)減倉11-11^7140輯輯刪除音樂何以表達情感？11-11-0760編輯決7E蒞子叩運八大口口盾11-1190輯輯刪除清珍惜脖子后有痣的人■11-11-07140痢輯刪除聰12-03-0110偏輯刪除颯颯1S-0110蝙輯刪除ZUCK1U20編輯刪除共L頁當前第頃宣頁上二g 豳1▼圖2.9文章管理圖添加文章的主要代碼：protectedvoidbtnAdd_Click(objectsender,EventArgse){stringtext二InputText(Editor1.Text);if(_AddNew(txtTitle.Text.Trim(),text,DateTime.Now,0,0,TType.SelectedValue,false,false)>0){ClientScriptManagerscript二this.ClientScript;script.RegisterStartupScript(this.GetType(),"123",〃alert('添加文章失敗')"，true);}else{ClientScriptManagerscript二this.ClientScript;script.RegisterStartupScript(this.GetType(),"123","<script>alert('添加文成功)|');location.href('ManangeNews.aspx');</script>");}}添加至草稿箱的主要代碼：protectedvoidbtndraft_Click(objectsender,EventArgse){if((_AddNew(txtTitle.Text.Trim(),Editor1.Text.Trim(),DateTime.Now,0,0,TType.SelectedValue,true,false)>0))ClientScriptManagerscr二this.ClientScript;scr.RegisterStartupScript(this.GetType(),"34","alert('未能添加到草稿箱')"，true);}else{Response.Write("<script>alert('已經(jīng)添加到草稿')</script>");Response.Redirect("~/CuteSoft_Client/NewSave2.aspx");}}2.6.2留言管理留言管理模塊可以通過查找關鍵字或開始結(jié)束日期來獲得相應留言記錄，進行刪除操作。留言模板頁面如圖2.10所示。美健字：開始日期： 結(jié)束日期： I查詢I驟作編號留言人留言時目留m內(nèi)笞刪除1wjn我睬一個！刪除2遍110?03:54我贖一個！刪除j2OIA^;1210?03:54好文章！刪除4wjn10?0.j：54同意你的觀點！刪除苗wsn2OIA^;1510?03:54你說的真好！刪除7W5n22310?0.j：54太有才了！uni院17zfq22319:34:06得到uni1Sz￡q22320tZ/2.;l813:42:44水果色uni院23叉忐忑201111/2817:14:44諷德誦功上的uni24交忐忑2011U/Z817:15:34諷德誦功上的最后一頁圖2.10留言板頁面主要實現(xiàn)代碼如下：<asp:QueryExtenderID=〃QueryExtender1〃runat=〃server〃TargetControlID二〃LinqDataSource1〃><asp:SearchExpressionDataFields=〃body"SearchType=〃StartsWith"><asp:ControlParameterControlID="TextBox1"/></asp:SearchExpression><asp:RangeExpressionDataField="date"MaxType="Inclusive"MinType="Inclusive"><asp:ControlParameterControlID="TextBox2"DbType="DateTime"/><asp:ControlParameterControlID="TextBox3"DbType="DateTime"/></asp:RangeExpression></asp:QueryExtender>2.6.3相冊管理通過相冊管理模塊可以進行上傳照片，插看和刪除圖片。如下2.11圖。

用戶配置日志宜哩用戶配置日志宜哩圖2.11相冊管理圖查看相冊修改代碼：protectedvoidbutsubmit_Click(objectsender,EventArgse){stringtitle=〃〃，info二〃〃；intid二Convert.ToInt32(Request.QueryString[〃id〃]);for(inti= 0;i<dlphotoinfo.Controls.Count;i++){title=((TextBox)dlphotoinfo.Controls[i].FindControl(〃txttitle〃)).Text;info=((TextBox)dlphotoinfo.Controls[i].FindControl(〃txtinfo〃)).Text;}if(_UpdatePhoto(id,title,info)〈=0){ClientScriptManagerscript二this.ClientScript;script.RegisterStartupScript(this.GetType(),"123",〃<script>alert('修改圖片功！')；location.href('ManagePhoto.aspx');</script>");}else{ClientScriptManagerscript二this.ClientScript;script.RegisterStartupScript(this.GetType(),"12","alert('修改圖片失??！')"，true);}3測試3.1后臺管理登陸在后臺管理中需要有一個登陸的頁面，只有進行登錄并通過身份驗證的用戶，才可以在個人博客頁面發(fā)表日志，并借助個人設置實現(xiàn)對個人博客相關信息的管理維護。對于沒有經(jīng)過身份驗證的網(wǎng)絡用戶不允許在博客頁面中發(fā)表日志，更不允許對博客頁面信息進行管理維護。其登陸頁面如圖3.1所示。后臺管于登錄用戶臺wjn223密碼圖3.1后臺管理登陸頁面登陸頁面具體代碼如下：protectedvoidbtnlogin_Click(objectsender,EventArgse){stringuid二txtuid.Text.Trim().ToString();stringpwd二txtpwd.Text.Trim().ToString();if(uid!=""&&pwd!=""){varresult二fromninbdc.Registerwheren.user_id=二Int32.Parse(uid)&&n.user_name=二pwdselectn;if(result!=null){Session[〃username〃]=uid;Response.Redirect(〃../Manage/Hou.aspx〃，true);}else{ClientScriptManagerclient二this.ClientScript;client.RegisterStartupScript(this.GetType(),"55",〃<script>alert('用戶名或密碼錯誤，請重新輸入！');history.back()</script>");return;

}}}3.2博客管理3.2.1添加文章驗證進入后臺添加文章后界面如圖3.2所示。圖3.2圖3.2管理菜單首頁.2刪除文章驗證來目網(wǎng)頁的代類別點擊次教編輯■除逢高縫續(xù)】音樂何以;決定推子|請珍惜脖?來目網(wǎng)頁的代類別點擊次教編輯■除逢高縫續(xù)】音樂何以;決定推子|請珍惜脖?聰-颯颯-ZUCK1U已炒回收站！0痢輯刪除I60輯輯刪除190煽輯刪除p0偏輯gg0編輯福10端輯刪除20蝙輯刪除共［頁當前第1頁首頁上一頁下一頁尾頁［,3.3.3修改文章驗證在點擊“編輯”之后會出現(xiàn)博文的具體信息，進行修改，“保存修改”即把修改后的內(nèi)容添加到數(shù)據(jù)庫中去如圖3.4所示。立章標距:睡五:泠豐中等于六鐘頭方法TOC\o"