网站资源共享课程设计报告

PAGEPAGE4装装订线课程设计报告课程设计报告设计题目：资源共享班级：学号：姓名：指导教师：成绩：日期：2013-01-05

目标与内容：目标：布局资源共享页面，实现资源共享功能。资源共享分为登录、前台、后台三个界面（省略登录界面）。前台实现资源上传，上传至数据库，后台显示上传的资源，并且能进行修改删除。学会网页页面的设计和基本布局.能够使用代码布局网页.使用代码实现网页功能.能够将数据库和页面相连接.理解网页的基本制作流程.内容：本次课程设计的我的选题是：资源共享。实现功能：1、前台界面点击“搜索”可以搜索共享资源（因页面未设计，此处省略）。2、资源共享过程：输入共享的资源名、选择专题名称、输入资源链接、选择共享资源的分类。单机“资源上传”。完成资源上传过程。3、前台完成资源上传过程，后台显示上传的资源信息。单击“修改”可以修改上传资源的信息。单击“删除”实现删除上传资源功能。后台界面必须分页，避免页面撑破。地点与软件环境：地点：60#504机房软件环境：MicrosoftVisualStudio2005DreamweaverCS4PhotoshopCS3SQLServerManagementStudio课程设计主要内容：问题简析：一、页面设计本次课程设计的主题有资源共享，会员管理，考试生成系统，留言板等。首先每位同学确定自己的主题，搜集资料，整理素材，设计出符合自己主题的页面。一般分为登录界面、前台显示界面和后台管理界面。实现前台和后台相连接的功能。系统效果图设计:图5.显示页面right图6.页面底部3、将页面上将要用到的图片切下来。保存到image文件夹。。页面布局接下来在DreamweaverCS4中利用css将切下来的背景图片拼接在一起。具体的css代码如下：1、前台页面布局css代码：#a{background-image:url(image/1.jpg);width:798px;height:119px;}#b{background-image:url(image/2.jpg);width:169px;height:441px;}#c{background-image:url(image/3.jpg);width:621px;height:441px;margin-left:169px;margin-top:-441px;}#d{background-image:url(image/4.jpg);width:798px;height:40px;}四个层的id分别为a、b、c、d。再用链接代码将css与页面连接：<linkhref="main1.css"rel="stylesheet"type="text/css"/>2、后台页面布局与前台类似。后台页面布局css代码：：#a{background-image:url(images/1.jpg);width:700px;height:54px;}#b{background-image:url('images/2.jpg');width:535px;height:367px;}#c{background-image:url('images/3.jpg');width:151px;height:366px;margin-left:540px;margin-top:-370px;}#d{background-image:url(images/4.jpg);width:700px;height:24px;}3、接下来再在整体的背景页面上插入层，将一些文字，图片，，按钮等元素放入页面中。下面举一些例子。例：插入按钮代码：<divstyle="position:absolute;width:66px;height:18px;z-index:13;left:336px;top:431px"id="layer13"> <asp:ButtonID="Button1"runat="server"onclick="Button1_Click"Text="上传"/></div>插入文字代码：<divstyle="position:absolute;width:61px;height:17px;z-index:2;left:34px;top:105px"id="layer2"> <palign="center"><b><fontsize="2">我的资源</font></b></div>3、将页面上的文字，小图标等元素逐一放入页面中，调整位置，初步完成页面布局。制作数据库1、打开SQLServerManagementStudio，新建数据库，命名为“database”，保存在指定的文件夹。2、新建表，在表中输入后台中需要的列名。“序号”，“软件类型”，“软件名”。类型都为“nachar（50）”设置“序号”为主键。保存表为“Table_1”。如图7图7.数据库设计四、实现功能1、打开MicrosoftVisualStudio2005，新建项目，选择“其他项目类型”—“VisualStudio解决方案”。保存到指定文件夹。将DreamweaverCS4中两个页面的代码分别拷贝到Solution1中。并且将css以及所用到的image图片一并拷贝到Solution1中。调试运行。2、在前台“qt.aspx.cs”中插入代码实现前台数据上传后保存在数据库中并能在后台显示编辑的功能。代码如下：usingSystem;usingSystem.Data;usingSystem.Configuration;usingSystem.Web;usingSystem.Web.Security;usingSystem.Web.UI;usingSystem.Web.UI.WebControls;usingSystem.Web.UI.WebControls.WebParts;usingSystem.Web.UI.HtmlControls;usingSystem.Data.SqlClient;usingSystem.IO;publicpartialclass_Default:System.Web.UI.Page{protectedvoidPage_Load(objectsender,EventArgse){}protectedvoidButton1_Click(objectsender,EventArgse){if(FileUpload1.PostedFile.FileName==string.Empty){Response.Write("<script>alert('请选择要上传的文件！');</script>");}else{//获取要上传的文件的信息stringfilepath=FileUpload1.PostedFile.FileName;//文件路径stringoldfilename=filepath.Substring(filepath.LastIndexOf("\\")+1);//文件名stringFileExtension=Path.GetExtension(oldfilename);//文件的扩展名intfilelength=(int)oldfilename.Length;//文件名长度//随机生成文件名RandomRnd=newRandom();intstrRnd=Rnd.Next(1,99);stringnewfilename=DateTime.Now.Year.ToString()+DateTime.Now.Month.ToString()+DateTime.Now.Day.ToString()+DateTime.Now.Hour.ToString()+DateTime.Now.Minute.ToString()+DateTime.Now.Second.ToString()+strRnd.ToString()+FileExtension.ToLower();//将文件上传到以当前日期命名的文件夹中stringUpLoadName=DateTime.Now.Year.ToString()+"-"+DateTime.Now.Month.ToString()+"-"+DateTime.Now.Day.ToString();boolFileUploadPathExists=File.Exists(Server.MapPath("UpLoad"+"\\"+UpLoadName));//指定文件夹不存在，如果不存在就创建该文件夹if(!FileUploadPathExists){Directory.CreateDirectory(Server.MapPath("UpLoad"+"\\"+UpLoadName));}//保存上传的文件stringsavapath=Server.MapPath("UpLoad"+"\\"+UpLoadName);//保存路径stringsavapath1="UpLoad"+"\\"+UpLoadName+"\\"+newfilename;//保存路径FileUpload1.PostedFile.SaveAs(savapath+"\\"+newfilename);//连接数据库字符串stringconnStr=@"DataSource=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\database.mdf;IntegratedSecurity=True;UserInstance=True";SqlConnectionconn=newSqlConnection(connStr);conn.Open();stringcmdtext="insertintoT_UpFile(FileName,FileLength,FileType,FilePath)values('"+newfilename+"','"+filelength+"','"+FileExtension+"','"+savapath1+"')";SqlCommandcmd=newSqlCommand(cmdtext,conn);try{cmd.ExecuteNonQuery();System.Text.StringBuilderstrMsg=newSystem.Text.StringBuilder();strMsg.Append("<br><br><fontcolor=green>成功添加，详细信息：<br>");strMsg.Append("文件类型："+this.FileUpload1.PostedFile.ContentType.ToString()+"<br>");strMsg.Append("文件名："+filepath+"<br>");strMsg.Append("存处文件名："+newfilename+"<br>");//strMsg.Append("文件上传到服务器的路径为："+savapath+"<br>");strMsg.Append("扩展名："+FileExtension+"<br>");strMsg.Append("大小："+FileUpload1.PostedFile.ContentLength+"个字节</font>");this.Label1.Text=strMsg.ToString();}catch(Exceptionerror){Response.Write(error.ToString());}finally{conn.Close();}}}}3、打开后台页面，在指定层中插入控件“Gradeview”配置数据源，将数据库中的数据库“database”链接到控件中。如图8图8.后台数据库绑定到这边为止，已经实现了前台和后台相连接的功能。前台上传的资源已经能够上传至数据库中，并且能够在后台中修改删除等。资源共享功能已经实现。调试运行与结果分析：完成后的资源共享系统有以下能实现以下功能：前台页面完成基本布局，搜索，上传等按钮能实现，文本框内能打字。能够选择软件的分类。如图9：图9.前台界面效果图资源共享界面的主要功能就是资源上传，点击页面“浏览”弹出对话框，选择本地资源，点击“上传”可以将选择的资源上传至数据库。上传资源界面如图10：图10.资源上传资源上传成功，页面显示上传成功的详细信息。如图11图11.资源上传成功四、前台资源上传成功后，上传的文件已上传至数据库，后台从数据库中调出上传的文件信息，显示如图12，并且能够进行编辑，删除。实现后台的基本功能。图12.后台界面效果图课程设计的小结/心得：不知不觉,二个星期的网站课程设计已经结束,回顾这一段日子,学会很多东西,了解了网页制作的基本流程和制作方法。在设计这个网站时真的体会很多东西，从一开始网页主题的确定，到主页总体的设计、前台功能设计与管理、后台功能设计与管理、每个分页面的设计等。整个设计的过程可以说是一个艰难而有充实的学习的过程，许多的知识都是第一次深入接触和学习，如ASP的调试工具，基本的环境配置也是第一次整体性的整合和摸索，对自己来说真的是一个极大的考验。在不断的测试和学习中遇到了很多很多的困难特别是自己一个人一组，每当有不懂的地方就去网上去找资料，去图书馆借参考书。有了理论知识根本是还不够的，当遇到困难的