個人網(wǎng)頁設(shè)計與開發(fā)剖析

1、河北軟件設(shè)計與編程實踐課程設(shè)計報告-個人網(wǎng)頁設(shè)計與開發(fā)班級：姓名： 學號：指導(dǎo)教師： 目 錄第1章 引言11.1 開發(fā)背景以及課題意義1第2章 系統(tǒng)分析22.1 游客觀賞模塊功能22.2 管理員管理模塊功能22.3 系統(tǒng)運行環(huán)境及技術(shù)2第3章 系統(tǒng)設(shè)計33.1 系統(tǒng)總體設(shè)計33.2 系統(tǒng)模塊設(shè)計33.2.1 游客觀賞模塊33.2.2 管理員管理模塊功能43.3 數(shù)據(jù)庫設(shè)計43.3.1 數(shù)據(jù)庫總體設(shè)計53.3.2 數(shù)據(jù)庫的詳細設(shè)計5第4章 系統(tǒng)實現(xiàn)74.1 數(shù)據(jù)庫連接74.2 游客模塊的實現(xiàn)74.2.1 登錄驗證模塊74.2.1 游客瀏覽模塊94.3 管理員模塊的實現(xiàn)104.3.1 登錄驗證模塊

2、104.3.2 管理員管理模塊11第5章 結(jié)論12參考文獻13此處寫題目第1章 引言個人網(wǎng)頁設(shè)計在我的社會中應(yīng)用很廣，隨著經(jīng)濟社會的發(fā)展，計算機已被應(yīng)用到社會生活的各個領(lǐng)域。與此同時，互聯(lián)網(wǎng)作為信息技術(shù)的通信橋梁連接著全球的計算機，而網(wǎng)站作為網(wǎng)絡(luò)信息主要的表現(xiàn)形式而且還是互聯(lián)網(wǎng)信息的主要承載者，在Internet上表現(xiàn)出其及其重要的地位，并發(fā)揮著其及其重要的作用。無論是在國內(nèi)還是國外都得以迅速的發(fā)展和壯大，并被人們重視和關(guān)注。互聯(lián)網(wǎng)已經(jīng)徹底的改變了世界，互聯(lián)網(wǎng)的世界里蘊藏著無限的可能，在這種情況下，各行各業(yè)及其個人、單位、工廠、企事業(yè)等等在網(wǎng)上構(gòu)筑屬于自己的網(wǎng)絡(luò)信息平臺，保護自己的網(wǎng)絡(luò)資源并在

3、互聯(lián)網(wǎng)上開辟自己的市場和消費群體，以及構(gòu)造自己的數(shù)字化世界和加強全球范圍內(nèi)不同地域的人們聯(lián)系交流等等活動也就顯的日益重要。于是各種各樣的網(wǎng)站便如雨后春筍般地出現(xiàn)魚龍混雜且良莠不齊。Internet的日益興起和以網(wǎng)頁為載體的網(wǎng)絡(luò)信息的廣泛傳播和應(yīng)用，使得網(wǎng)站的建設(shè)及網(wǎng)頁制作得到發(fā)展的空間，大至大型企業(yè)的產(chǎn)品推銷、售后服務(wù)、解決方案，小至個人Web頁面開發(fā)，形形色色，五彩繽紛，網(wǎng)站建設(shè)和網(wǎng)頁制作也成為計算機網(wǎng)絡(luò)領(lǐng)域最熱門的話題。1.1 開發(fā)背景以及課題意義隨著經(jīng)濟社會的發(fā)展，計算機已經(jīng)被應(yīng)用到社會生活的各個領(lǐng)域。與此同時，互聯(lián)網(wǎng)作為信息技術(shù)的通訊橋梁連接著全球的計算機，而網(wǎng)站作為網(wǎng)絡(luò)信息的主要表現(xiàn)

4、形式而且還是互聯(lián)網(wǎng)信息的主要策劃主要承載者，在internet上表現(xiàn)著極其重要的地位，發(fā)揮著極其重要的作用。經(jīng)過本學期對web設(shè)計基礎(chǔ)這門課課程的學習，對web設(shè)計以及相關(guān)代碼的使用已經(jīng)有了深入地了解，個人網(wǎng)頁設(shè)計與開發(fā)就運用web設(shè)計使用。網(wǎng)頁實際是一個文件，他存放在世界某一個角落某一個計算機中而這臺計算機必須與互聯(lián)網(wǎng)相連的。在進行動態(tài)網(wǎng)絡(luò)制作的過程中，通常使用ASP來完成，由于ASP使用方便，操作簡單，很多網(wǎng)頁設(shè)計者一直使用ASP，ASP相對于其他網(wǎng)頁制作來說易學易懂，同時配合數(shù)據(jù)庫的操作，是個人網(wǎng)站有更好的網(wǎng)絡(luò)平臺和交互性。在我們的工作、日常生活中，能夠擁有一個自己的網(wǎng)站，已經(jīng)成為不少人

5、的驕傲與希望，這個課題的研究就是因為個人網(wǎng)站。在突出了自己的風格和特點時，還應(yīng)用了現(xiàn)在流行的網(wǎng)站設(shè)計和數(shù)據(jù)庫技術(shù)。第2章 系統(tǒng)分析在我的人個人頁面設(shè)計上設(shè)有登錄界面，其中有管理員登錄、游客登錄。在我的管理員登錄中，管理員可以對自己的個人頁面進行管理，管理自己的個人信息，可以修改刪除自己的個人信息。管理自己的相冊，上傳、刪除自己的相冊并在表中顯示出來。管理自己的日志，可以添加、刪除、更改自己的日志。管理自己的說說，發(fā)表自己一天中的看法想法，也可以對自己的說說進行更改刪除，也可以回復(fù)別人對你的說說的評價。管理自己的留言板，留言板是他人對你的留言，你可以刪除、回復(fù)留言板的內(nèi)容。在我的游客登錄界面上，

6、游客可以進行賬號注冊，登陸后進入我的個人頁面網(wǎng)站界面。該網(wǎng)站是用母版頁做的，添加了背景音樂。游客可以查看我的個人信息資料、我的相冊、我的日志文件、我的說說并且可以回復(fù)，在我的留言板中為我自己留言發(fā)表自己的觀點。游客登錄不能修改任何東西，可以評論。2.1 游客觀賞模塊功能在游客登錄界面上，游客可以進行賬號注冊，登陸后進入我的個人頁面網(wǎng)站界面。該網(wǎng)站是用母版頁做的，添加了背景音樂。游客可以查看我的個人信息資料、我的相冊、我的日志文件、我的說說并且可以回復(fù)，在我的留言板中為我自己留言發(fā)表自己的觀點。游客登錄不能修改任何東西，可以評論。2.2 管理員管理模塊功能在管理員登錄中，管理員可以對自己的個人頁

7、面進行管理，管理自己的個人信息，可以修改刪除自己的個人信息。管理自己的相冊，上傳、刪除自己的相冊并在表中顯示出來。管理自己的日志，可以添加、刪除、更改自己的日志。管理自己的說說，發(fā)表自己一天中的看法想法，也可以對自己的說說進行更改刪除，也可以回復(fù)別人對你的說說的評價。管理自己的留言板，留言板是他人對你的留言，你可以刪除、回復(fù)留言板的內(nèi)容。2.3 系統(tǒng)運行環(huán)境及技術(shù)1、采用C#語言、SQL server 2008數(shù)據(jù)庫、ADO.net 連接數(shù)據(jù)庫技術(shù)。2、開發(fā)環(huán)境 開發(fā)工具：Microsoft Visual Studio 2010操作系統(tǒng)：Windows 7數(shù)據(jù)庫工具：Microsoft SQL

8、 Server 2008開發(fā)語言：C#第3章 系統(tǒng)設(shè)計3.1 系統(tǒng)總體設(shè)計3.2 系統(tǒng)模塊設(shè)計3.2.1 游客觀賞模塊已有賬號游客可以直接登錄，沒有的可以注冊后登陸。游客登錄后，選擇該模塊負責對用戶個人信息的查看，游客可以查看我的個人信息資料、我的相冊、我的日志文件、我的說說并且可以回復(fù)，在我的留言板中為我自己留言發(fā)表自己的觀點。游客登錄不能修改任何東西，可以評論。如圖4.3 游客觀賞模塊游客登錄 游客查看我的界面游客注冊3.2.2 管理員管理模塊功能管理員登錄在管理員登錄中，管理員可以對自己的個人頁面進行管理，管理自己的個人信息，可以修改刪除自己的個人信息。管理自己的相冊，上傳、刪除自己的相

9、冊并在表中顯示出來。管理自己的日志，可以添加、刪除、更改自己的日志。管理自己的說說，發(fā)表自己一天中的看法想法，也可以對自己的說說進行更改刪除，也可以回復(fù)別人對你的說說的評價。管理自己的留言板，留言板是他人對你的留言，你可以刪除、回復(fù)留言板的內(nèi)容。 管理個人日志管理個人說說管理個人相冊管理個人檔3.3 數(shù)據(jù)庫設(shè)計數(shù)據(jù)庫的設(shè)計是整個網(wǎng)絡(luò)購物系統(tǒng)的核心，是非常重要的一部分，它的正確與否直接影響整個設(shè)計的好與壞，從數(shù)據(jù)庫的選擇到如何建立表都是非常關(guān)鍵的。系統(tǒng)采用SQL Server 2008作為后臺數(shù)據(jù)庫。在SQL Server 2008中新建一個名為“個人信息表”的數(shù)據(jù)庫，在數(shù)據(jù)庫中創(chuàng)建數(shù)據(jù)表，共創(chuàng)

10、建6個表，并設(shè)置各段屬性，以下介紹各個表的結(jié)構(gòu)。3.3.1 數(shù)據(jù)庫總體設(shè)計本系統(tǒng)為基于ASP.NET的在線購物系統(tǒng)，所有數(shù)據(jù)都存放在數(shù)據(jù)庫的表中。表3.1為本系統(tǒng)所涉及到的數(shù)據(jù)表。表3.1 數(shù)據(jù)表列表表名功能及屬性個人信息表存放個人信息(姓名，年齡，性別，民族，星座，出生年月，聯(lián)系電話，家庭住址，個性簽名，愛好，郵箱)留言板存放留言板信息(留言內(nèi)容，用戶名，評論內(nèi)容)日志存放日志信息(日志內(nèi)容)說說存放說說信息(主題，內(nèi)容，評論內(nèi)容，回復(fù)內(nèi)容，用戶名)相冊存放相冊信息(圖片)用戶表存放用戶細信息(用戶名，密碼)3.3.2 數(shù)據(jù)庫的詳細設(shè)計本數(shù)據(jù)庫一共涉及6張表，各表詳細信息如下所述。1. 個人

11、信息表：該表中存放個人的所有信息，該表字段及其類型定義如表3.2所示。表3.2 商品信息表(goods)字段名字段類型可否為空描述姓名Char(10)Not Null個人（主鍵）年齡Char(10)NULL個人信息的年齡性別Char(2) Null性別民族Char（10）Null文化習俗星座Char（10）Null星座出生年月Char（10）Null出生年月日期聯(lián)系電話Char（10）Null個人電話家庭住址Char（10）Null家庭地理位置個性簽名Varchar（30）Null個人的觀點愛好Char（10）NULL個人愛好郵箱Char（10）NULL個人郵箱2. 留言表：該表中存放留言信息

12、，該表字段及其類型定義如下表字段名字段類型可否為空描述留言內(nèi)容Char（50）Not Null留言信息（主鍵）用戶名Char（10）Null留言的用戶名評論內(nèi)容Char (50)Null管理員評論的內(nèi)容3. 日志表：該表中存放發(fā)表的日志信息，該表字段及其類型定義如下表字段名字段類型可否為空描述日志內(nèi)容 Char（50）Not Null發(fā)表的日志內(nèi)容（主鍵）4. 說說表：該表中存放發(fā)表的說說信息，該表字段及其類型定義如下表字段名字段類型可否為空描述主題Char（50）Not Null發(fā)表的面向的觀點（主鍵）內(nèi)容Char（100）Null說說中的內(nèi)容評論內(nèi)容Char（100）Null用戶評論的內(nèi)容

13、回復(fù)內(nèi)容Char（100）Null管理員回復(fù)的內(nèi)容用戶名Char（100）Null評論用戶的用戶的名5. 相冊表：該表中存放相冊圖片信息，該表字段及其類型定義如下表字段名字段類型可否為空描述圖片Char（10）Not Null圖片的名字（主鍵）6. 用戶表：該表中存放用戶游客信息，該表字段及其類型定義如下表字段名字段類型可否為空描述用戶名Char（10）Not Null用戶的名稱（主鍵）密碼Char（10） Null用戶名的密碼第4章 系統(tǒng)實現(xiàn)4.1 數(shù)據(jù)庫連接系統(tǒng)使用Microsoft SQL Server 2008作數(shù)據(jù)庫。在數(shù)據(jù)庫進行連接時，使用數(shù)據(jù)庫連接對象Connection（）通過

14、數(shù)據(jù)庫連接字符串連接到數(shù)據(jù)庫。具體連接數(shù)據(jù)庫的代碼實現(xiàn)如下：（1）在Web.config中定義數(shù)據(jù)庫連接字符串：<add name="tushu" connectionString="data source=.SQLEXPRESS;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|個人信息表.mdf;User Instance=true" providerName="System.Data.SqlClient"/>（2）在需要連接數(shù)據(jù)庫的類中添加命名空間：us

15、ing System.Data;using System.Data.SqlClient;（3）使用SqlConnection對象連接數(shù)據(jù)庫SqlConnection conn = new SqlConnection();/創(chuàng)建數(shù)據(jù)庫連接對象conn.ConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings"個人信息表".ToString();/設(shè)置連接字符串conn.Open();/打開數(shù)據(jù)庫4.2 游客模塊的實現(xiàn)4.2.1 登錄驗證模塊圖4.1 登錄驗證界面系統(tǒng)分為游客和管

16、理員2種角色，均需通過登陸驗證模塊才能進入各自主界面。該模塊的界面如圖4.1所示，主要功能為實現(xiàn)游客登錄驗證、用戶注冊，用到的數(shù)據(jù)表為用戶信息表，其實現(xiàn)原理如下：(1）選擇【注冊】按鈕，進入注冊界面，添加新用戶，即在表中添加新記錄。 (2）輸入用戶名和密碼后，點擊【登錄】按鈕，系統(tǒng)會查詢表中記錄核對該信息，若正確，則游客進入瀏覽我的個人網(wǎng)頁。該模塊實現(xiàn)登錄的主要代碼如下。protected void Button1_Click(object sender, EventArgs e) SqlConnection con = new SqlConnection(); if (TextBox1.Te

17、xt = " " | TextBox2.Text = "") Response.Write("<script>alert('學¡ì號?或¨°密¨¹碼?不?能¨¹為a空?！ê?')</script>"); else con.ConnectionString = "Data Source=.SQLEXPRESS;AttachDbFilename=|DataDirectory|個?人¨?信?息

18、¡é表À¨ª.mdf; Integrated Security=True;User Instance=True" con.Open(); string str = "select * from 用®?戶¡ì表À¨ª where 用®?戶¡ì名?='" + TextBox1.Text + "'" + "and 密¨¹碼?='" + TextBox

19、2.Text + "'" SqlCommand com = new SqlCommand(str, con); SqlDataReader dr = com.ExecuteReader(); if (dr.HasRows) Response.Redirect("用®?戶¡ì查¨¦看¡ä界?面?.aspx?name=" + TextBox1.Text); else Response.Write("<script>alert('請?輸º?入&

20、#168;?正y確¨¡¤的Ì?用®?戶¡ì名?或¨°密¨¹碼?！ê?')</script>"); TextBox1.Text = TextBox2.Text = "" TextBox1.Focus(); con.Close(); protected void Button2_Click(object sender, EventArgs e) Response.Redirect("用®?戶¡

21、6;注Á¡é冊¨¢.aspx"); 4.2.1 游客瀏覽模塊（1）、該模塊主要實現(xiàn)進入我的界面，瀏覽查看我的個人相冊、個人檔、我的日志、我的說說、我的留言板這些我的操作。 （2）、 再進入我的說說留言板中有評論功能代碼如下：protected void Button1_Click(object sender, EventArgs e) SqlConnection conn = new SqlConnection(); conn.ConnectionString = "Data Source=.SQLEXPRESS;Attac

22、hDbFilename=|DataDirectory|個?人¨?信?息¡é表À¨ª.mdf;Integrated Security=True;User Instance=True " conn.Open(); string name = Request.QueryString"name" string strSQL = "UPDATE 說¦Ì說¦Ì set 評¨¤論?內(nèi)¨²容¨Y ='"

23、+ TextBox1.Text + "'" + "where 主¡Â題¬a='" + DropDownList1.SelectedItem +"'" string strSQL2 = "UPDATE 說¦Ì說¦Ì set 用®?戶¡ì名? ='" + name + "'" + "where 主¡Â題¬a='&q

24、uot; + DropDownList1.SelectedItem +"'" SqlCommand com = new SqlCommand(strSQL, conn); SqlCommand com2 = new SqlCommand(strSQL2, conn); com.ExecuteNonQuery(); com2.ExecuteNonQuery(); conn.Close(); GridView3.DataBind(); 4.3 管理員模塊的實現(xiàn) 4.3.1 登錄驗證模塊該管理員只有一個，所以登陸比較簡單代碼如下：protected void Button

25、1_Click(object sender, EventArgs e) if (TextBox1.Text = "138866" && TextBox2.Text = "123456") Response.Redirect("管¨¹理¤¨ª員¡À管¨¹理¤¨ª.aspx?name="+TextBox1.Text); else Response.Write("<script>ale

26、rt('管¨¹理¤¨ª員¡À登Ì?錄?失º¡ì敗㨹')</script>"); 4.3.2 管理員管理模塊 （1） 管理員管理我的個人信息，在我的個人信息可以修改，利用數(shù)據(jù)庫實現(xiàn)，將更改的信息添加到數(shù)據(jù)庫中，實現(xiàn)我的個人信息管理。（2） 管理員管理我的日志，數(shù)據(jù)庫中有一個日志表，在我的日志中我可以添加新的日志、修改日志、刪除我喜歡的日志。實現(xiàn)管理我的日志。（3） 管理員管理我的說說，在我的說說界面中我可以發(fā)表個人的

27、說說，添加主題、說說內(nèi)容、回復(fù)他認為我回復(fù)的評論，在我的說說界面還可以刪除我的說說、修改我的說說等。（4） 管理員管理我的相冊，在我的相冊界面中我可以刪除我的相冊圖片，刪除是確認刪除的確定，在我的相冊中還可以上傳圖片到我的相冊中實現(xiàn)圖片的上傳。（5） 管理我的留言板，在我的留言板界面中，管理員可以刪除他人的留言、可以回復(fù)他人的留言，在這個界面中比較簡單，留言恢復(fù)功能。其中說說回復(fù)發(fā)表說說的代碼如下：protected void Button1_Click(object sender, EventArgs e) SqlConnection conn = new SqlConnection();

28、conn.ConnectionString = "Data Source=.SQLEXPRESS;AttachDbFilename=|DataDirectory|個?人¨?信?息¡é表À¨ª.mdf;Integrated Security=True;User Instance=True " conn.Open(); string str = "'" + TextBox1.Text + "','" + TextBox2.Text + "'

29、;" string strSQL = "insert into 說¦Ì說¦Ì(主¡Â題¬a,內(nèi)¨²容¨Y)values(" + str + ")" SqlCommand com = new SqlCommand(strSQL, conn); com.ExecuteNonQuery(); conn.Close(); GridView1.DataBind(); 圖片上傳代碼如下：if (IsPostBack) Boolean fileOK = fal

30、se; string path = Server.MapPath("/相¨¤冊¨¢/"); if (AA.HasFile) string BB = System.IO.Path.GetExtension(AA.FileName).ToLower(); string aa = ".gif", ".bmp", ".jpg", "png", ".zip", ".rar" ; for (int i = 0; i < a

31、a.Length; i+) if (BB = aai) fileOK = true; if (fileOK) try AA.PostedFile.SaveAs(path + AA.FileName); Label1.Text = "<font color=red>文?件t上¦?傳ä?成¨¦功|! </font><br>大䨮小?為a:" + AA.PostedFile.ContentLength + "<br>文?件t類¤¨&

32、#164;型¨ª為a：êo" + AA.PostedFile.ContentType + "<br>文?件t名?稱?為a：êo" + AA.PostedFile.FileName; catch Label1.Text="文?件t沒?有®D上¦?傳ä?成¨¦功|！ê?" else Label1.Text="文?件t類¤¨¤型¨ª不?對?！ê?" if (AA.Pos