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

1、.装订线 课程设计报告设计题目： 资源共享 班 级： 学 号： 姓 名： 指导教师： 成 绩： 日期：2013-01-05 目标与内容：目标：布局资源共享页面，实现资源共享功能。资源共享分为登录、前台、后台三个界面（省略登录界面）。前台实现资源上传，上传至数据库，后台显示上传的资源，并且能进行修改删除。(1) 学会网页页面的设计和基本布局.(2) 能够使用代码布局网页.(3) 使用代码实现网页功能.(4) 能够将数据库和页面相连接.(5) 理解网页的基本制作流程.内容：本次课程设计的我的选题是：资源共享。实现功能： 1、前台界面点击“搜索”可以搜索共享资源（因页面未设计，此处省略）。 2、资源

2、共享过程：输入共享的资源名、选择专题名称、输入资源链接、选择共享资源的分类。单机“资源上传”。完成资源上传过程。 3、前台完成资源上传过程，后台显示上传的资源信息。单击“修改”可以修改上传资源的信息。单击“删除”实现删除上传资源功能。后台界面必须分页，避免页面撑破。地点与软件环境：地点：60#504机房软件环境：Microsoft Visual Studio 2005Dreamweaver CS4Photoshop CS3SQL Server Management Studio课程设计主要内容：问题简析：一、页面设计本次课程设计的主题有资源共享，会员管理，考试生成系统，留言板等。首先每位同学确

3、定自己的主题，搜集资料，整理素材，设计出符合自己主题的页面。一般分为登录界面、前台显示界面和后台管理界面。实现前台和后台相连接的功能。系统效果图设计:需实现的资源共享的两个界面：1、前台显示界面效果图 如图1 ： 图1.前台显示界面（1）、前台界面点击“搜索”可以搜索共享资源。 （2）、资源共享过程：输入共享的资源名、选择专题名称、输入资源链接、选择共享资源的分类。单机“资源上传”。完成资源上传过程。 2、后台管理界面效果图 如图2： 图2.后台管理界面后台显示上传的资源信息。可以修改上传资源的信息，以及实现删除上传资源功能。页面设计结束之后，同学之间随机交换设计的界面，做接下来的功能实现部分

4、。我将要做的是资源共享系统。二、步骤简析布局资源共享页面，实现资源共享功能。资源共享分为登录、前台、后台三个界面（省略登录界面）。前台实现资源上传，上传至数据库，后台显示上传的资源，并且能进行修改删除。系统设计：一、 切图1、首先用Photoshop CS3进行界面切图，将实现链接或者其他功能的文字、图片隐藏。2、利用切图工具 ，根据需要将页面切成几个小块。 例如：前台显示界面根据需要可以切成如图3、4、5、6四个界面 图3.页面顶部 图4.显示页面left 图5.显示页面right 图6.页面底部3、将页面上将要用到的图片切下来。保存到image文件夹。二、 页面布局接下来在Dreamwea

5、ver CS4中利用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-

6、image: url(image/4.jpg); width:798px; height:40px;四个层的id分别为a、b、c、d。再用链接代码将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; heigh

7、t:366px; margin-left:540px; margin-top:-370px;#d background-image: url(images/4.jpg); width:700px; height:24px;3、接下来再在整体的背景页面上插入层，将一些文字，图片，按钮等元素放入页面中。下面举一些例子。例：插入按钮代码：   插入文字代码：我的资源3、将页面上的文字，小图标等元素逐一放入页面中，调整位置，初步完成页面布局。三、 制作数据库1、打开SQL Server Management Studio，新建数据库，命名为“database”，保存在指定的文件夹。2、新建表

8、，在表中输入后台中需要的列名。“序号”，“软件类型”，“软件名”。类型都为“nachar（50）”设置“序号”为主键。保存表为“Table_1”。如图7 图7.数据库设计四、 实现功能 1、打开Microsoft Visual Studio 2005，新建项目，选择“其他项目类型”“Visual Studio解决方案”。保存到指定文件夹。将Dreamweaver CS4中两个页面的代码分别拷贝到Solution1中。并且将css以及所用到的image图片一并拷贝到Solution1中。调试运行。 2、在前台“qt.aspx.cs”中插入代码实现前台数据上传后保存在数据库中并能在后台显示编辑的功

9、能。 代码如下：using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using System.Data.SqlClient;using System.IO;public partial class

10、_Default : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) protected void Button1_Click(object sender, EventArgs e) if (FileUpload1.PostedFile.FileName = string.Empty) Response.Write(alert(请选择要上传的文件！);); else /获取要上传的文件的信息 string filepath = FileUpload1.PostedFile.FileName;/文件路

11、径 string oldfilename = filepath.Substring(filepath.LastIndexOf()+1);/文件名 string FileExtension = Path.GetExtension(oldfilename); /文件的扩展名 int filelength = (int)oldfilename.Length;/文件名长度 /随机生成文件名 Random Rnd = new Random(); int strRnd = Rnd.Next(1, 99); string newfilename = DateTime.Now.Year.ToString()

12、+ DateTime.Now.Month.ToString() + DateTime.Now.Day.ToString() + DateTime.Now.Hour.ToString() + DateTime.Now.Minute.ToString() + DateTime.Now.Second.ToString() + strRnd.ToString() + FileExtension.ToLower(); /将文件上传到以当前日期命名的文件夹中 string UpLoadName = DateTime.Now.Year.ToString()+-+DateTime.Now.Month.ToSt

13、ring()+-+DateTime.Now.Day.ToString(); bool FileUploadPathExists = File.Exists(Server.MapPath(UpLoad+UpLoadName); /指定文件夹不存在，如果不存在就创建该文件夹 if (!FileUploadPathExists) Directory.CreateDirectory(Server.MapPath(UpLoad+UpLoadName); /保存上传的文件 string savapath = Server.MapPath(UpLoad + + UpLoadName);/保存路径 strin

14、g savapath1 = UpLoad + + UpLoadName + newfilename;/保存路径 FileUpload1.PostedFile.SaveAs(savapath + + newfilename); /连接数据库字符串 string connStr = Data Source=.SQLEXPRESS;AttachDbFilename=|DataDirectory|database.mdf;Integrated Security=True;User Instance=True; SqlConnection conn = new SqlConnection(connStr

15、); conn.Open(); string cmdtext = insert into T_UpFile(FileName,FileLength,FileType,FilePath) values( + newfilename + , + filelength + , + FileExtension + ,+savapath1+); SqlCommand cmd = new SqlCommand(cmdtext, conn); try cmd.ExecuteNonQuery(); System.Text.StringBuilder strMsg = new System.Text.Strin

16、gBuilder(); strMsg.Append(成功添加，详细信息：); strMsg.Append(文件类型： + this.FileUpload1.PostedFile.ContentType.ToString() + ); strMsg.Append(文件名： + filepath + ); strMsg.Append(存处文件名： + newfilename + ); /strMsg.Append(文件上传到服务器的路径为： + savapath + ); strMsg.Append(扩展名： + FileExtension + ); strMsg.Append(大小： + Fil

17、eUpload1.PostedFile.ContentLength + 个字节); this.Label1.Text = strMsg.ToString(); catch (Exception error) Response.Write(error.ToString(); finally conn.Close(); 3、打开后台页面，在指定层中插入控件“Gradeview”配置数据源，将数据库中的数据库“database”链接到控件中。如图8 图8.后台数据库绑定到这边为止，已经实现了前台和后台相连接的功能。前台上传的资源已经能够上传至数据库中，并且能够在后台中修改删除等。资源共享功能已经实现

18、。调试运行与结果分析：完成后的资源共享系统有以下能实现以下功能：一、 前台页面完成基本布局，搜索，上传等按钮能实现，文本框内能打字。能够选择软件的分类。 如图9： 图9.前台界面效果图 二、 资源共享界面的主要功能就是资源上传，点击页面“浏览”弹出对话框，选择本地资源，点击“上传”可以将选择的资源上传至数据库。上传资源界面 如图10： 图10.资源上传三、 资源上传成功，页面显示上传成功的详细信息。如图11 图11.资源上传成功四、前台资源上传成功后，上传的文件已上传至数据库，后台从数据库中调出上传的文件信息，显示如图12，并且能够进行编辑，删除。实现后台的基本功能。 图12.后台界面效果图课

19、程设计的小结/心得：不知不觉,二个星期的网站课程设计已经结束,回顾这一段日子,学会很多东西,了解了网页制作的基本流程和制作方法。 在设计这个网站时真的体会很多东西，从一开始网页主题的确定，到主页总体的设计、前台功能设计与管理、后台功能设计与管理、每个分页面的设计等。整个设计的过程可以说是一个艰难而有充实的学习的过程，许多的知识都是第一次深入接触和学习，如ASP的调试工具，基本的环境配置也是第一次整体性的整合和摸索，对自己来说真的是一个极大的考验。在不断的测试和学习中遇到了很多很多的困难特别是自己一个人一组，每当有不懂的地方就去网上去找资料，去图书馆借参考书。有了理论知识根本是还不够的，当遇到困难的时候都有老师的热心帮助。在老师的指导下，经过我的努力，设计如期的完成了，由于时间关系和自己的知识有限，系统在很多功能不是很完善，但是毕竟最后完成了整体的运作，这也让我感到我的付出是有收获的，让我感到十分的欣慰。作为网页设计的初学者，我对网页设计非常感兴趣，一心想完成一个美观、实用、简单的