網(wǎng)站資源共享課程設(shè)計(jì)報(bào)告

1、裝訂線課程設(shè)計(jì)報(bào)告設(shè)計(jì)題目： 資源共享 班 級：學(xué) 號：姓 名：指導(dǎo)教師：成 績： 日期：2013-01-05目標(biāo)與內(nèi)容：目標(biāo)：布局資源共享頁面，實(shí)現(xiàn)資源共享功能。資源共享分為登錄、前臺(tái)、后臺(tái)三個(gè)界面（省略登錄界面）。前臺(tái)實(shí)現(xiàn)資源上傳，上傳至數(shù)據(jù)庫，后臺(tái)顯示上傳的資源，并且能進(jìn)行修改刪除。(1) 學(xué)會(huì)網(wǎng)頁頁面的設(shè)計(jì)和基本布局.(2) 能夠使用代碼布局網(wǎng)頁.(3) 使用代碼實(shí)現(xiàn)網(wǎng)頁功能.(4) 能夠?qū)?shù)據(jù)庫和頁面相連接.(5) 理解網(wǎng)頁的基本制作流程.內(nèi)容：本次課程設(shè)計(jì)的我的選題是：資源共享。實(shí)現(xiàn)功能： 1、前臺(tái)界面點(diǎn)擊“搜索”可以搜索共享資源（因頁面未設(shè)計(jì)，此處省略）。 2、資源共享過程：輸入

2、共享的資源名、選擇專題名稱、輸入資源鏈接、選擇共享資源的分類。單機(jī)“資源上傳”。完成資源上傳過程。 3、前臺(tái)完成資源上傳過程，后臺(tái)顯示上傳的資源信息。單擊“修改”可以修改上傳資源的信息。單擊“刪除”實(shí)現(xiàn)刪除上傳資源功能。后臺(tái)界面必須分頁，避免頁面撐破。地點(diǎn)與軟件環(huán)境：地點(diǎn)：60#504機(jī)房軟件環(huán)境：Microsoft Visual Studio 2005Dreamweaver CS4Photoshop CS3SQL Server Management Studio課程設(shè)計(jì)主要內(nèi)容：問題簡析：一、頁面設(shè)計(jì)本次課程設(shè)計(jì)的主題有資源共享，會(huì)員管理，考試生成系統(tǒng)，留言板等。首先每位同學(xué)確定自己的主題，

3、搜集資料，整理素材，設(shè)計(jì)出符合自己主題的頁面。一般分為登錄界面、前臺(tái)顯示界面和后臺(tái)管理界面。實(shí)現(xiàn)前臺(tái)和后臺(tái)相連接的功能。系統(tǒng)效果圖設(shè)計(jì):需實(shí)現(xiàn)的資源共享的兩個(gè)界面：1、前臺(tái)顯示界面效果圖 如圖1 ： 圖1.前臺(tái)顯示界面（1）、前臺(tái)界面點(diǎn)擊“搜索”可以搜索共享資源。 （2）、資源共享過程：輸入共享的資源名、選擇專題名稱、輸入資源鏈接、選擇共享資源的分類。單機(jī)“資源上傳”。完成資源上傳過程。 2、后臺(tái)管理界面效果圖 如圖2： 圖2.后臺(tái)管理界面后臺(tái)顯示上傳的資源信息?？梢孕薷纳蟼髻Y源的信息，以及實(shí)現(xiàn)刪除上傳資源功能。頁面設(shè)計(jì)結(jié)束之后，同學(xué)之間隨機(jī)交換設(shè)計(jì)的界面，做接下來的功能實(shí)現(xiàn)部分。我將要做的是

4、資源共享系統(tǒng)。二、步驟簡析布局資源共享頁面，實(shí)現(xiàn)資源共享功能。資源共享分為登錄、前臺(tái)、后臺(tái)三個(gè)界面（省略登錄界面）。前臺(tái)實(shí)現(xiàn)資源上傳，上傳至數(shù)據(jù)庫，后臺(tái)顯示上傳的資源，并且能進(jìn)行修改刪除。系統(tǒng)設(shè)計(jì)：一、 切圖1、首先用Photoshop CS3進(jìn)行界面切圖，將實(shí)現(xiàn)鏈接或者其他功能的文字、圖片隱藏。2、利用切圖工具 ，根據(jù)需要將頁面切成幾個(gè)小塊。 例如：前臺(tái)顯示界面根據(jù)需要可以切成如圖3、4、5、6四個(gè)界面 圖3.頁面頂部 圖4.顯示頁面left圖5.顯示頁面right 圖6.頁面底部3、將頁面上將要用到的圖片切下來。保存到image文件夾。二、 頁面布局接下來在Dreamweaver CS4中

5、利用css將切下來的背景圖片拼接在一起。具體的css代碼如下：1、前臺(tái)頁面布局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: ur

6、l(image/4.jpg); width:798px; height:40px;四個(gè)層的id分別為a、b、c、d。再用鏈接代碼將css與頁面連接：<linkhref="main1.css"rel="stylesheet"type="text/css"/>2、后臺(tái)頁面布局與前臺(tái)類似。 后臺(tái)頁面布局css代碼：#a background-image: url(images/1.jpg); width:700px; height:54px;#b background-image: url('images/2.jpg&#

7、39;); 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: abso

8、lute; width: 66px; height: 18px; z-index: 13; left: 336px; top: 431px"id="layer13">&nbsp;<asp:ButtonID="Button1"runat="server"onclick="Button1_Click"Text="上傳"/></div>插入文字代碼：<divstyle="position: absolute; width: 61px; h

9、eight: 17px; z-index: 2; left: 34px; top: 105px"id="layer2"><palign="center"><b><fontsize="2">我的資源</font></b></div>3、將頁面上的文字，小圖標(biāo)等元素逐一放入頁面中，調(diào)整位置，初步完成頁面布局。三、 制作數(shù)據(jù)庫1、打開SQL Server Management Studio，新建數(shù)據(jù)庫，命名為“database”，保存在指定的文件夾。2、

10、新建表，在表中輸入后臺(tái)中需要的列名?！靶蛱枴?，“軟件類型”，“軟件名”。類型都為“nachar（50）”設(shè)置“序號”為主鍵。保存表為“Table_1”。如圖7 圖7.數(shù)據(jù)庫設(shè)計(jì)四、 實(shí)現(xiàn)功能 1、打開Microsoft Visual Studio 2005，新建項(xiàng)目，選擇“其他項(xiàng)目類型”“Visual Studio解決方案”。保存到指定文件夾。將Dreamweaver CS4中兩個(gè)頁面的代碼分別拷貝到Solution1中。并且將css以及所用到的image圖片一并拷貝到Solution1中。調(diào)試運(yùn)行。 2、在前臺(tái)“”中插入代碼實(shí)現(xiàn)前臺(tái)數(shù)據(jù)上傳后保存在數(shù)據(jù)庫中并能在后臺(tái)顯示編輯的功能。 代碼如下

11、：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;publicpartialclass_Default :

12、 System.Web.UI.Page protectedvoid Page_Load(object sender, EventArgs e) protectedvoid Button1_Click(object sender, EventArgs e) if (FileUpload1.PostedFile.FileName = string.Empty) Response.Write("<script>alert('請選擇要上傳的文件！');</script>"); else /獲取要上傳的文件的信息string filepath

13、= FileUpload1.PostedFile.FileName;/文件路徑string oldfilename = filepath.Substring(filepath.LastIndexOf("")+1);/文件名string FileExtension = Path.GetExtension(oldfilename); /文件的擴(kuò)展名int filelength = (int)oldfilename.Length;/文件名長度/隨機(jī)生成文件名Random Rnd = newRandom();int strRnd = Rnd.Next(1, 99);string n

14、ewfilename = 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();/將文件上傳到以當(dāng)前日期命名的文件夾中string UpLoadName = DateTime.Now.Y

15、ear.ToString()+"-"+DateTime.Now.Month.ToString()+"-"+DateTime.Now.Day.ToString();bool FileUploadPathExists = File.Exists(Server.MapPath("UpLoad"+""+UpLoadName);/指定文件夾不存在，如果不存在就創(chuàng)建該文件夾if (!FileUploadPathExists) Directory.CreateDirectory(Server.MapPath("UpLo

16、ad"+""+UpLoadName); /保存上傳的文件string savapath = Server.MapPath("UpLoad" + "" + UpLoadName);/保存路徑string savapath1 = "UpLoad" + "" + UpLoadName +""+ newfilename;/保存路徑 FileUpload1.PostedFile.SaveAs(savapath + "" + newfilename);/連接

17、數(shù)據(jù)庫字符串string connStr = "Data Source=.SQLEXPRESS;AttachDbFilename=|DataDirectory|database.mdf;Integrated Security=True;User Instance=True" SqlConnection conn = new SqlConnection(connStr); conn.Open();string cmdtext = "insert into T_UpFile(FileName,FileLength,FileType,FilePath) values(&

18、#39;" + newfilename + "','" + filelength + "','" + FileExtension + "','"+savapath1+"')" SqlCommand cmd = new SqlCommand(cmdtext, conn);try cmd.ExecuteNonQuery(); System.Text.StringBuilder strMsg = new System.Text.StringBuilder(

19、); strMsg.Append("<br><br><font color=green>成功添加，詳細(xì)信息：<br>"); strMsg.Append("文件類型：" + this.FileUpload1.PostedFile.ContentType.ToString() + "<br>"); strMsg.Append("文件名：" + filepath + "<br>"); strMsg.Append("存處文

20、件名：" + newfilename + "<br>");/strMsg.Append("文件上傳到服務(wù)器的路徑為：" + savapath + "<br>"); strMsg.Append("擴(kuò)展名：" + FileExtension + "<br>"); strMsg.Append("大?。?quot; + FileUpload1.PostedFile.ContentLength + "個(gè)字節(jié)</font>&quo

21、t;);this.Label1.Text = strMsg.ToString(); catch (Exception error) Response.Write(error.ToString(); finally conn.Close(); 3、打開后臺(tái)頁面，在指定層中插入控件“Gradeview”配置數(shù)據(jù)源，將數(shù)據(jù)庫中的數(shù)據(jù)庫“database”鏈接到控件中。如圖8圖8.后臺(tái)數(shù)據(jù)庫綁定到這邊為止，已經(jīng)實(shí)現(xiàn)了前臺(tái)和后臺(tái)相連接的功能。前臺(tái)上傳的資源已經(jīng)能夠上傳至數(shù)據(jù)庫中，并且能夠在后臺(tái)中修改刪除等。資源共享功能已經(jīng)實(shí)現(xiàn)。調(diào)試運(yùn)行與結(jié)果分析：完成后的資源共享系統(tǒng)有以下能實(shí)現(xiàn)以下功能：一、 前臺(tái)頁面

22、完成基本布局，搜索，上傳等按鈕能實(shí)現(xiàn)，文本框內(nèi)能打字。能夠選擇軟件的分類。 如圖9： 圖9.前臺(tái)界面效果圖二、 資源共享界面的主要功能就是資源上傳，點(diǎn)擊頁面“瀏覽”彈出對話框，選擇本地資源，點(diǎn)擊“上傳”可以將選擇的資源上傳至數(shù)據(jù)庫。上傳資源界面 如圖10： 圖10.資源上傳三、 資源上傳成功，頁面顯示上傳成功的詳細(xì)信息。如圖11 圖11.資源上傳成功四、前臺(tái)資源上傳成功后，上傳的文件已上傳至數(shù)據(jù)庫，后臺(tái)從數(shù)據(jù)庫中調(diào)出上傳的文件信息，顯示如圖12，并且能夠進(jìn)行編輯，刪除。實(shí)現(xiàn)后臺(tái)的基本功能。 圖12.后臺(tái)界面效果圖課程設(shè)計(jì)的小結(jié)/心得：不知不覺,二個(gè)星期的網(wǎng)站課程設(shè)計(jì)已經(jīng)結(jié)束,回顧這一段日子,學(xué)會(huì)很多東西,了解了網(wǎng)頁制作的基本流程和制作方法。在設(shè)計(jì)這個(gè)網(wǎng)站時(shí)真的體會(huì)很多東西，從一開始網(wǎng)頁主題的確定，到主頁總體的設(shè)計(jì)、前臺(tái)功能設(shè)計(jì)與管理、后臺(tái)功能設(shè)計(jì)與管理、每個(gè)分頁面的設(shè)計(jì)等。整個(gè)設(shè)計(jì)的過程可以說是一個(gè)艱難而有充實(shí)的學(xué)習(xí)的過程，許多的知識都是第一次深入接觸和學(xué)習(xí)，如ASP的調(diào)試工具，基本的環(huán)境配置也是第一次整體性的整合和摸索，對自己來說真的是一個(gè)極大的考驗(yàn)。在不斷的測試和學(xué)習(xí)中遇到了很多很多的困難特別是自己一個(gè)人一組，每當(dāng)有不懂的地方就去網(wǎng)上去找資料，去圖書館借參考書。有了理論知識根本是還不夠的，當(dāng)遇到困難的時(shí)候都有老師的熱心幫助。在老師的指導(dǎo)下，經(jīng)過我的努