个人主页设计

个人主页系统分析1、 个人主页系统需求分析系统功能需求：(1)前台主要功能要求：a) 允许访问者进入本人个人主页，但必须登录才可访问(需要身份 验证，包括帐号和密码)；b) 当登录首页时可以显示即时时间；c) 通过用户登录界面，只要登录成功了，就可以看到我的个人主页， 饼可播放背景音乐；d) 允许访问者查看“我的日志”、“我的照片”、“我的视频”，“我的 博客”以及“给我留言”；e) 允许访问者了解我个人，即查看我的“个人简介”，还可以通过“我 的博客”更进一步了解本人，查看更多我的文章并发表评论和留 言；f) 访问者可以通过“给我留言”这一部分给我留言或者对我的个人 主页提意见或建议；g) 通过 “个人主页”中的“安全退出”可以关闭整个主页系统或者 也可以通过“给我留言”的页面做是否退出整个程序的选择。(2)后台主要功能要求：a) 可以查看和修改用户个人资料；b) 可以对文章进行修改、删除和添加；c) 可以替换当前音乐为自己喜欢的音乐作为主页背景音乐d) 可以修改前台的主业模版。 个人主页系统性能要求：“ 个人主页”系统，应该在系统性能方面满足以下基本要求： 个人主页系统具有易操作性； 个人主页系统具有通用性、灵活性； 个人主页系统具有可维持性； 个人主页系统具有开放性； 个人主页系统具有隐私权限设置。2、 个人主页用例模型用 UML 的用例图表示如下：浏览登录页面了解我个人3、系统流程图分析是否是否登录是否是否登:-2 -发表评论或留言专进入登录页面结束游客访问者退出 増登陆界面进入个人主页登陆访问给我我我我个我的的的的人留博视日昭八、简 客频志片介二数据库设计(1)利用Access创建数据库“fxhmdb”打开 Microsoft Office Access 2003 创建该个人主页中所要用到的数据库fxh.mdb和相册.mdb两个数据库。以“fxh.mdb”为例：单击【创建】，在【新建】【空数据库】得到如下界面：m content文本留言内容m time日期留言时间完成，保存，表名称为“message”，如下:单击“使用设计器创建表”，输入系统所需的内容，如下所示：字段名数据类型注释u_name文本用户名（帐号）或留言人u password数字密码u_question文本要更新密码或注册时的问 题u_anwser文本要更新密码或注册时的问 题的答案完成，保存，表名称为“userinfo”，如下:完成表的创建后的数据库结果是：fsh :数据库（Access 2000文杵格式）匿 Message :表m userm contentm time米要把该数据库绑定到“个人主页”中，需要在“个人主页”的系统中为“App_Data” 添加“fxh.mdb”，而且“fxh.mdb”也必须在“App_Data”中才可实现系统的功能。解决方案“陌-落空加 ” (1亍项目-l( E - VI陌落审殊r -_ App_D a ta.fxh. m db通过“Default.aspx”登录页面中的“注册”就可以得到以下的Accsee数据库表：“fxh.mdb ”数据库创建完成。(2)利用Access创建数据库相册mdb”步骤如创建“fxh.mdb” 一样。同理得到“相册.mdb ”数据库的相关信息：其中，包括两个表“class”和“upload”，创建好了这两个表，可以得到数据库结 果，如下图所示：不同到+ J xh. mdb- 相册.m业 皆相册业有了这部分就可以完成“我的相册”的“查看”和“上传照片”的功能了。“我的相册”中的分类包括“非主流”和“卡通人物”，如下所示照片只要上传成功了，就可以在Access数据库“相册.mdb”中看到照片或图片的 “id”，“filename”，“path”和“classid” 了，这样一来更方便查看照片或图片是否 真的“上传成功”或者“上传失败”。upload :表id|f ilt!rL：=jriHpathclassi d7upload/2007122318upload/20071223191 i shi m i ngshsngupluad/1i shimin1101 jpgUpluad/ 1. ipK1112. jpgupluad/E. ipK1:ess数据库，“相册jmdb”8也创建成功了。12656786113U3533P8T1D93226 upload/U3533P8T2144. jpgupluad/4. ipK2（自动編号）0利用三、制作过程及页面关键代码1. 打开 Microsoft Office Access 2003 创建该个人主页中所要用到的数据库 fxh.mdb和相册.mdb两个数据库。其中fxh.mab中包含两个表，分别是message和 userinfo,相册.mdb数据库中包含两个表，分别是class和upload。如下图所示:象表苣询to主刖使用设计器创連表:刖使用向导创連表凰J通过输凡数据创連表询冒 message丰1 userinfo表使用设计器创連表使用向导创逢表通过输入数据创連表classupload1非主疣2卡邇人物userinfo :表u rL：=iiTie1u E：iS5wordu questi onu：=ltle,i|1, er123202CB962AC59075B964B0T152D234B70123aoacBgesAcsgoTE.fxhD41D8CD98F00B204E9800998ECF8427E111BCBE3365E6AC95Ek i ：: fuE10AHC3949BA5yAI：BE56E05TF20F883Ea：25ED1BCB423B0BTni aogu.E1 LiAIiCSd-ifdBAFyAIiBESeEOSTFSOFSSSE123250CF8B51C773F3米Bupload :表tilerL：EUTiHpathcl as si d7upload/2007122318upload/2007122319li EhiniingEhengSuplu a di11 i shi m i n1101 jpgupluadi11. jpg1112- JPgupluadi12. ipE112upload/12656786113U3533F8T1D93226upload/U3533F8T2144- jpgupluadi14. jpg2自动編号要想实现网站与数据库有联系且不出错，每个主要页面都要有的关键代码是: using System.Data;using System.Data.OleDb;using System.Web.Security;在 web.config 中的关键代码是2.打开Microsoft Visual Studio 2008,【新建】一【网站】一【ASP.NET网站】 一（选择存储路径）【确定】，创建了第一个页面“Default.aspx （即登录页面）”， 同样的方法创建“ msg.aspx （给我留言）”、“ recover.aspx （忘记密码）”、“users.aspx（用户管理）”、“register.aspx（注册新账号”）、“个人简介.aspx”、 “个人主页.aspx”、“class.aspx （查看照片）”、“Default1 .aspx （相册可以上 传照片）”、“pic.aspx （显示照片）”，同样，按照上述步骤创建“.htm”文件，分 别有“我的日志.htm”、“我的视频.htm”、“我的微博.htm”以及“我的照片集.htm”创建完成效果如下图所示：面介绍ister、忘记 和密码，IDthis.Title = 用户登录 ; protected void Login_Click(object sender, EventArgs e)if (Username.Text = | Password.Text =)Response.W rit e(scrip t language二javascrip taler t(用户名或 密码不能为空！ )；/script)；return;string ConnSql =System.Configuration.ConfigurationManager.ConnectionStringsfxh.Conn ectionString；OleDbConnection Conn = new OleDbConnection(ConnSql)； Conn.Open()； string SecPwd=FormsAuthentication.HashPasswordForStoringInConfigFile(Password.Text, MD5)；string StrinSQL=select * from userinfo where u_name=+ Username.Text+and u_password=+SecPwd+；OleDbCommand SelectCom = new OleDbCommand(StrinSQL, Conn); OleDbDataReader dr = SelectCom.ExecuteReader();/Response.Write(StrinSQL); /Response.End();/if (!dr.Read()Response.W rit e(scrip t language二javascrip taler t(用户名或 密码错误！ )；/script)；Response.Redirect();elseSessionPass = dru_name； Response.Redirec t(个人主页.aspx);dr.Close()； Conn.Close()；protected void Register_Click(object sender, EventArgs e)Response.Redirect(Register.aspx)；protected void Repassword_Click(object sender, EventArgs e)if (Username.Text =)Response.Write(script language=javescriptalert( 请输入用户 名！ )；/script)；elseSessionusername = Username.Text； Response.Redirect(recover.aspx)；protected void Manager_Click(object sender, EventArgs e)if (Username.Text != fxh)Response.W rit e(scrip t language二javascrip taler t(请使用管理员身份登录！ )；/script)；return;string ConnSql =System.Configuration.ConfigurationManager.ConnectionStringsfxh.Conn ectionString；OleDbConnection Conn = new OleDbConnection(ConnSql)；Conn.Open()；string SecPwd =FormsAuthentication.HashPasswordForStoringInConfigFile(Password.Text, MD5)；string StrinSQL = select * from userinfo where u_name=fxhand u_password= +Password.Text + ;OleDbCommand SelectCom = new OleDbCommand(StrinSQL, Conn)；OleDbDataReader dr = SelectCom.ExecuteReader()；if (!dr.Read()Response.W rit e(scrip t language二javescrip taler t(登录失败，请检查密码！ )；/script)；elseSessionPass = succeed；Response.Redirect(users.aspx)；dr.Close()；Conn.Close()；注：如果登录时密码错误，可以选择“忘记密码”来找回密码，其前提是你还记得要回 答的问题和答案。否则只有重新注册帐号来访问我的“个人主页”。面首先介绍下2忘记密码：恢复遗忘密码XX请回答下列问题:该回答的答案是：其中回答的答案不正确也不能为矍则不来自两页的消息1 提示问题的答案不正确辛确定正确则通过，即可以重新设置密码:恢复遗忘密码请回答下列问题222该回答的答案是：m提理返面输新密码：确卿密码：萸新密码输入新密码，确认新密码，通过返回登录页面登录，进入“个人主页” 所用到的服务器控件有四个TextBox(ID分别为：UserNameLab、Question、NewPwd、ReNewPwd、UpdateBtn),三个 Button (提交 SubmitBtn、返回 BackBtn、更新密码UpdateBtn)关键代码有public partial class recover : string StringAnswer;protected void Page_Load(object sender, EventArgs e) this.Title = 恢复遗忘的密码;Panel1.Visible = false; if(SessionUserName = null)Response.Redirect(Default.aspx);elseUserNameLab.Text = SessionUserName.ToString(); string ConnSql=System.Configuration.ConfigurationManager.ConnectionStringsfxh.Conn ectionString;OleDbConnection Conn = new OleDbConnection(ConnSql); Conn.Open();string StringOledb =select * from userinfo where u_name=+UserNameLab.Text+;OleDbCommand SelectCom = new OleDbCommand(StringOledb, Conn);OleDbDataReader dr = SelectCom.ExecuteReader();if (!dr.Read()Response.W rit e(scrip t language二javascrip taler t(用户名不 存在，请单击“返回”按钮回到登录页面重新填写！ )；/scrip t)；return;Question.Text = dru_question.ToString()；StringAnswer = dru_answer.ToString()； dr.Close()；Conn.Close()；protected void SubmitBtn_Click(object sender, EventArgs e)if (Answer.Text=)Response.W rit e(scrip t language二javascrip taler t(提示问题 的答案不能为空！ )；/script)；return；string SecAnswer =FormsAuthentication.HashPasswordForStoringInConfigFile(Answer.Text,- - 13 - -MD5);if (SecAnswer != StringAnswer)Response.W rit e(scrip t language二javascrip taler t(提示问题 的答案不正确！ )；/script)；return;elsePanel1.Visible = true；protected void BackBtn_Click(object sender, EventArgs e)Response.Redirect(Default.aspx)；protected void UpdateBtn_Click(object sender, EventArgs e) if (NewPwd.Text = | ReNewPwd.Text = ) Response.W rit e(scrip t language二javascrip taler t(新密码不 能为空！ )；/script)；return；if (NewPwd.Text != ReNewPwd.Text)Response.W rit e(scrip t language二javascrip taler t(两次输入 密码不一样，请重新输入！ )；/script)；return；string ConnSql =System.Configuration.ConfigurationManager.ConnectionStringsfxh.Conn ectionString；OleDbConnection Conn = new OleDbConnection(ConnSql)； OleDbCommand com = new OleDbCommand(select * from userinfo, Conn)；DataSet ds=new DataSet()；OleDbDataAdapter da = new OleDbDataAdapter()；Conn.Open(); string SecPwd=FormsAuthentication.HashPasswordForStoringInConfigFile(NewPwd.Text,MD5 );String SqlUpdate=updata userinfo set u_password= +SecPwd+where u_name=+UserNameLab.Text+;da.SelectCommand=com;da.Fill(ds,UserName);OleDbCommand UpdateCom = new OleDbCommand(SqlUpdate, Conn);da.UpdateCommand=UpdateCom;da.UpdateCommand.ExecuteNonQuery();Conn.Close();Response.Write(alert( 密 码 修 改 成功，请单击“返回”按钮回到登录页面! )；/scrip t)；3注册新账号橹用户注册来自两页的消息注册新账号! 用户名未被占用，可以正常注册确定提示“未被占用”则可注册，注册成功则返回重新登录，成功即可跳转页面至“个 人主页”。其中用到的服务控件有 5 个 TextBox(ID 分别是 UserName、UserPwd、ReUserPwd、 SecQuestion、SecAnswer), 一个 LinkButton (检查用户名 IDCheckName),两个 Button (提交 IDSubmitBtn、返回 BackBtn)。关键代码有：static bool PassCheck;void CheckUserName()string ConnSql =System.Configuration.ConfigurationManager.ConnectionStringsfxh.Conn ectionString;OleDbConnection Conn = new OleDbConnection(ConnSql);Conn.Open();string strSQL = select * from userinfo where u_name= +UserName.Text +;OleDbCommand Com = new OleDbCommand(strSQL, Conn);OleDbDataReader dr = Com.ExecuteReader();if (dr.Read()PassCheck = false;elsePassCheck = true;dr.Close();Conn.Close();protected void Page_Load(object sender, EventArgs e)this.Title = 用户注册;protected void CheckName_Click(object sender, EventArgs e)if (UserName.Text = )Response.W rit e(scrip t language二javascrip taler t(用户名不 为空！ )；/script)；return;CheckUserName()；if (PassCheck)Response.W rit e(scrip t language二javascrip taler t(用户名未 被占用，可以正常注册)；/scrip t)；elseResponse.W rit e(scrip t language二javascrip taler t(用户名已 被占用，请选择其他名称)；/scrip t)；protected void SubmitBtn_Click(object sender, EventArgs e)if (UserName.Text = )Response.W rit e(scrip t language二javascrip taler t(用户名不 得为空！ )；/script)；CheckUserName()；if (!PassCheck)Response.W rit e(scrip t language二javascrip taler t(用户名已 被占用，请选择其他名称)；/scrip t)；return；if (UserPwd. Text = | ReUserPwd. Text = | SecQuestion. Text = | SecAnswer.Text = )Response.W rit e(scrip t language二javascrip taler t(请填写所 有项！ )；/script)；return；if (UserPwd.Text != ReUserPwd.Text)Response.W rit e(scrip t language二javascrip taler t(两次输入 的密码不相同！ )；/script)；return;string ConnSql =System.Configuration.ConfigurationManager.ConnectionStringsfxh.Conn ectionString；OleDbConnection Conn = new OleDbConnection(ConnSql)； string PwdMD5 =FormsAuthentication.HashPasswordForStoringInConfigFile(UserPwd.Text, MD5)；string AnswerMD5 =FormsAuthentication.HashPasswordForStoringInConfigFile(SecAnswer.Text, MD5)；string Val = + UserName.Text + , + PwdMD5 + , + SecQuestion.Text + , + AnswerMD5 + ；stringSqlIns=insertintouserinfo(u_name,u_password,u_question,u_answer)values( + Val + )；OleDbCommand InsCom = new OleDbCommand(SqlIns, Conn)； OleDbDataAdapter da = new OleDbDataAdapter()； Conn.Open()； da.InsertCommand = InsCom； da.InsertCommand.ExecuteNonQuery()；Response.W rit e(scrip t language二javascrip taler t(注册成功，请 单击“返回”进入登录页面)；/scrip t)；UserName.Text = ；UserPwd.Text = ； SecQuestion.Text = ；SecAnswer.Text = ；protected void BackBtn_Click(object sender, EventArgs e) Response.Redirect(Default.aspx)；用户管理：用户管理中的用户名“ fxh ”是唯一的，密码也是唯一的，除此之外都不能实现这 一部分的所有功能。下面介绍下这部分的内容：用户管理这个页面所用到的服务器控件有：一个DropDownList (IDUserNameDrop),其中在这个控件的属性中重要的是：Dat aSc elDAccessDataSourcelDzt aTex tFi mid_userD aA aT ex tF arm atS tt i ngIl：taValueFi eld_user要绑定数执行删除删除用户和留言据库fxh.mdb。实现其中的效果。还有两个TextBox(ID分别是：NewPassword、 ReNewPassword),这两个空间可以重新设置其密码。三个Button (执行删除、修 改密码和返回主页， ID 分别为 DelUser、 ChangePwd 、 BackHome)， 一个 RadioButtonList 控件(ID： DelSelect)。从下拉列表中选择用户名，选择“仅删除用户”或“删除用户和留言”执行删除 下面以“删除用户和留言”为例。用户管理 用户名： 新密码， 认新密码：同样的，“更新密码”与“忘记密码”中的修改密码是一样的功能。关键的代码有：public partial class users : protected void Page_Load(object sender, EventArgs e)if(SessionPass != succeed) Response.Redirect(Default.aspx); protected void DelUser_Click(object sender, EventArgs e) if (UserNameDrop.Text = fxh)Response.W rit e(scrip t language二javascrip taler t(默认管理 员用户不能删除！ )；/script)；return;string ConnSql =System.Configuration.ConfigurationManager.ConnectionStringsfxh.Conn ectionString；OleDbConnection Conn = new OleDbConnection(ConnSql)；string DelUser = delete from userinfo where u_name= + UserNameDrop.Text + ；OleDbCommand DelCom = new OleDbCommand(DelUser, Conn)； OleDbDataAdapter da = new OleDbDataAdapter()； Conn.Open()；da.DeleteCommand = DelCom； da.DeleteCommand.ExecuteNonQuery()； Conn.Close()；if (DelSelect.SelectedIndex = 1)string DelUserMsg = delete from message where m_user= + UserNameDrop.Text + ；OleDbCommand DelCom1 = new OleDbCommand(DelUserMsg, Conn)； OleDbDataAdapter da1 = new OleDbDataAdapter()； Conn.Open()；da1.DeleteCommand = DelCom1； da1.DeleteCommand.ExecuteNonQuery()； Conn.Close()；Response.Write(alert( 删 除 操 作 成 功！ )；/script)；UserNameDrop.DataSourceID = AccessDataSource1;UserNameDrop.DataBind()；protected void ChangePwd_Click(object sender, EventArgs e)if(NewPassword.Text!=ReNewPassword.Text)Response.W rit e(sc tipt language二javascrip taler t(两次输入 的密码不同，请重新输入！ )；/script)；return；string ConnSql=System.Configuration.ConfigurationManager.ConnectionStringsfxh.Conn ectionString；OleDbConnection Conn = new OleDbConnection(ConnSql)； OleDbCommandSelectCom=newOleDbCommand(select*fromuserinfo, Conn)；DataSet ds=new DataSet()；OleDbDataAdapter da = new OleDbDataAdapter()； Conn.Open()； string SecPwd=FormsAuthentication.HashPasswordForStoringInConfigFile(NewPassword.Text ,MD5)；string UpdateSql = update userinfo set u_password= + SecPwd + +where u_name= + UserNameDrop.Text + ； da.SelectCommand = SelectCom； da.Fill(ds,username)；OleDbCommand UpdateCom = new OleDbCommand(UpdateSql, Conn)； da.UpdateCommand = UpdateCom； da.UpdateCommand.ExecuteNonQuery()；Conn.Close()；Response.W rit e(scrip t language二javascrip taler t(密码已修改， 请单击“返回”按钮回到登录页面！ )；/script)；protected void BackHome_Click(object sender, EventArgs e) SessionPass = null;Response.Redirect(Default.aspx); 个人主页：只要账号和密码是本系统中存在的且正确的，就可以访问该主页，登录成功的界面如下：成我的日志没担啦、没有你、就算把世界给我、我还是一无所有、给我留言人简介最近动态: 视频 照片 B爱在飞翔_2_的照r别在我转身之前转身,哪怕就多停留一秒0倉亍人主页别在我转身之前转身,哪怕就多停留一秒0我的日志我的视频我的照片我的博客 给我留言个人简介360C):window.opener=null;window.close(););咎讯微渝百度空间新浪博客我的飞信关键代码:http:我的相关博客我的相关博客你的心声.世界的回声在这里,f再微小的心声，也能让更多的陌勺落$荡。点击上图 “个人主页”中的“4我的微博”可得到以下的效果，以“腾讯微博” 和“新浪微博”为例:vtitle 我的博客 v/titlevframeset rows=20%,80% border=10vframe srcolling=yes noresize marginheight=value marginwidth=value src=right.htmvframe name=1vframe srcolling=yes noresize marginheight=value marginwidth=value v/framesetv/htmlvbody background=Image/71.jpg style=fontcolor:#ff0000vspan class=style2 我 的日志列表v/spanvspanclass=style1vbr /vbr /v/spanvbrva href=2052 target=lvspan class=stylel腾讯微博 v/spanv/ava href= target=lvspan class=stylel百 度空间 v/spanv/ava href= target=lvspan class=stylel 新浪 博客 v/spanv/ava href=http:space2.feixin.lOO target=lvspan class=stylel我 的飞信 v/spanv/av/body点击上图 “个人主页”中的“6个人简介”得到以下效果返回个人主页基本资料:姓名：付晓红岀生年月：1990年g月27日o方法是:性）简介.aspx ”的页面中输入以上信息，然后将其与“HyperLink6爰好：写作长跑人主 页.aspx联系方式：Tel: QQ： 774306276.332802予諛style=font-size: large; color: #FFFFFF 返 回 个 人 主 页 点击上图“个人主页”中的“8我的照片集”得到以下效果：E的照片集”的“H 而且可以自动;inkUrl園性设置为 旨片，不必手动查看砂阳5港呼議照片集 x |冷E3meta http-equiv二Content-Type content二text/html; charset=gb2312 / title陌落 殇照片集/titleSCRIPT language=javascript src=js/xixi.js/SCRIPT/headbody style=text-align:centerSCRIPTFlashInsert(myResize, mainflash/kor_main. swf, 1000, 550, always, transparent, #000000, high, middle);/SCRIPT p陌-落殇J-照片集/p tda href二个人主页.aspx返回主页/a/td/body点击上图 “个人主页”中的“2我的视频”和“8爱在飞翔”得到以下效果倉我的视频.wmv”方法与上边的那几个“Hyperlink”的属性设置方法一样，只是将HyperlinkUrl” 设置为“ /我的视频/我的视频.htm”就可以得到查看视频的效果。当然首先要在 if该系统中有这段视频“=爱在飞翔 关键代码：html tit le我的视频/titl e/headenter|mbed src=爱在飞翔.wmv heigh t=600 wid th=600 loop=2 /center/html 点击上图“个人主页”中的3-我的照片”得到如下的页面，为了看着明了下面我 用箭头将其描述出来。只要点击“浏览”找到喜欢的图片然后上传就可以了，当然有“上传成功”也有“上 传失败”，如下所示：相册按分类查看图片请选择分类非主沛刁.请选择文件E:360曲tm重要数据泉面1浏览.按分类杳看图片请选择分类卡通人物V请选择文件上传失败.*“上传成功”或在未上传时你都可以“按分类查看图片”，如下所示的效果（点击 途中画圈的部分就可以如你所愿查看所有图片）。W相册继续上传rultaUl.Paem.Wil_Click(object sender, EventArgs e)protected void Page_Lprotected void Bui tOfe|d|object SndllQt键代码齐；blic partial class _Def点击“点击”就可以看到下页所示的效果（这里以“非主流”为例）：if (IsPostBack)Boolean fileOK = false;String path = Server.MapPath(/upload/);if (FileUpload1.HasFile)String fileExtension =System.IO.Path.GetExtension(FileUpload1.FileName).ToLower();String allowedExtensions = .gif, .png, .jpeg, .jpg ;for (int i = 0; i allowedExtensions.Length; i+)if (fileExtension = allowedExtensionsi)fileOK = true;if (fileOK)tryFileUpload1.PostedFile.SaveAs(path+ FileUpload1.FileName);/ 负 责 把 文 件 上 传 到 upload 文件夹int id =Convert.ToInt32( DropDownList1.SelectedValue);FileToDB(FileUpload1.FileName, upload/ +FileUpload1.FileName,id);Label1.Text = 上传成功!;catchLabel1.Text = 上传失败.;elseLabel1.Text = 类型不匹配.;public void FileToDB(string filename, string path, int classid) string sql = insert into upload(filename,path,classid) values(+ filename + , + path + , + classid + ); string constr =ConfigurationManager.ConnectionStringsdb