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

PAGEPAGE4裝裝訂線課程設(shè)計(jì)報(bào)告課程設(shè)計(jì)報(bào)告設(shè)計(jì)題目：資源共享班級(jí)：學(xué)號(hào)：姓名：指導(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)行修改刪除。學(xué)會(huì)網(wǎng)頁頁面的設(shè)計(jì)和基本布局.能夠使用代碼布局網(wǎng)頁.使用代碼實(shí)現(xiàn)網(wǎng)頁功能.能夠?qū)?shù)據(jù)庫和頁面相連接.理解網(wǎng)頁的基本制作流程.內(nèi)容：本次課程設(shè)計(jì)的我的選題是：資源共享。實(shí)現(xiàn)功能：1、前臺(tái)界面點(diǎn)擊“搜索”可以搜索共享資源（因頁面未設(shè)計(jì)，此處省略）。2、資源共享過程：輸入共享的資源名、選擇專題名稱、輸入資源鏈接、選擇共享資源的分類。單機(jī)“資源上傳”。完成資源上傳過程。3、前臺(tái)完成資源上傳過程，后臺(tái)顯示上傳的資源信息。單擊“修改”可以修改上傳資源的信息。單擊“刪除”實(shí)現(xiàn)刪除上傳資源功能。后臺(tái)界面必須分頁，避免頁面撐破。地點(diǎn)與軟件環(huán)境：地點(diǎn)：60#504機(jī)房軟件環(huán)境：MicrosoftVisualStudio2005DreamweaverCS4PhotoshopCS3SQLServerManagementStudio課程設(shè)計(jì)主要內(nèi)容：問題簡析：一、頁面設(shè)計(jì)本次課程設(shè)計(jì)的主題有資源共享，會(huì)員管理，考試生成系統(tǒng)，留言板等。首先每位同學(xué)確定自己的主題，搜集資料，整理素材，設(shè)計(jì)出符合自己主題的頁面。一般分為登錄界面、前臺(tái)顯示界面和后臺(tái)管理界面。實(shí)現(xiàn)前臺(tái)和后臺(tái)相連接的功能。系統(tǒng)效果圖設(shè)計(jì):圖5.顯示頁面right圖6.頁面底部3、將頁面上將要用到的圖片切下來。保存到image文件夾。。頁面布局接下來在DreamweaverCS4中利用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:url(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');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、將頁面上的文字，小圖標(biāo)等元素逐一放入頁面中，調(diào)整位置，初步完成頁面布局。制作數(shù)據(jù)庫1、打開SQLServerManagementStudio，新建數(shù)據(jù)庫，命名為“database”，保存在指定的文件夾。2、新建表，在表中輸入后臺(tái)中需要的列名。“序號(hào)”，“軟件類型”，“軟件名”。類型都為“nachar（50）”設(shè)置“序號(hào)”為主鍵。保存表為“Table_1”。如圖7圖7.數(shù)據(jù)庫設(shè)計(jì)四、實(shí)現(xiàn)功能1、打開MicrosoftVisualStudio2005，新建項(xiàng)目，選擇“其他項(xiàng)目類型”—“VisualStudio解決方案”。保存到指定文件夾。將DreamweaverCS4中兩個(gè)頁面的代碼分別拷貝到Solution1中。并且將css以及所用到的image圖片一并拷貝到Solution1中。調(diào)試運(yùn)行。2、在前臺(tái)“qt.aspx.cs”中插入代碼實(shí)現(xiàn)前臺(tái)數(shù)據(jù)上傳后保存在數(shù)據(jù)庫中并能在后臺(tái)顯示編輯的功能。代碼如下：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('請(qǐng)選擇要上傳的文件！');</script>");}else{//獲取要上傳的文件的信息stringfilepath=FileUpload1.PostedFile.FileName;//文件路徑stringoldfilename=filepath.Substring(filepath.LastIndexOf("\\")+1);//文件名stringFileExtension=Path.GetExtension(oldfilename);//文件的擴(kuò)展名intfilelength=(int)oldfilename.Length;//文件名長度//隨機(jī)生成文件名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();//將文件上傳到以當(dāng)前日期命名的文件夾中stringUpLoadName=DateTime.Now.Year.ToString()+"-"+DateTime.Now.Month.ToString()+"-"+DateTime.Now.Day.ToString();boolFileUploadPathExists=File.Exists(Server.MapPath("UpLoad"+"\\"+UpLoadName));//指定文件夾不存在，如果不存在就創(chuàng)建該文件夾if(!FileUploadPathExists){Directory.CreateDirectory(Server.MapPath("UpLoad"+"\\"+UpLoadName));}//保存上傳的文件stringsavapath=Server.MapPath("UpLoad"+"\\"+UpLoadName);//保存路徑stringsavapath1="UpLoad"+"\\"+UpLoadName+"\\"+newfilename;//保存路徑FileUpload1.PostedFile.SaveAs(savapath+"\\"+newfilename);//連接數(shù)據(jù)庫字符串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>成功添加，詳細(xì)信息：<br>");strMsg.Append("文件類型："+this.FileUpload1.PostedFile.ContentType.ToString()+"<br>");strMsg.Append("文件名："+filepath+"<br>");strMsg.Append("存處文件名："+newfilename+"<br>");//strMsg.Append("文件上傳到服務(wù)器的路徑為："+savapath+"<br>");strMsg.Append("擴(kuò)展名："+FileExtension+"<br>");strMsg.Append("大小："+FileUpload1.PostedFile.ContentLength+"個(gè)字節(jié)</font>");this.Label1.Text=strMsg.ToString();}catch(Exceptionerror){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)頁面完成基本布局，搜索，上傳等按鈕能實(shí)現(xiàn)，文本框內(nèi)能打字。能夠選擇軟件的分類。如圖9：圖9.前臺(tái)界面效果圖資源共享界面的主要功能就是資源上傳，點(diǎn)擊頁面“瀏覽”彈出對(duì)話框，選擇本地資源，點(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í)的過程，許多的知識(shí)都是第一次深入接觸和學(xué)習(xí)，如ASP的調(diào)試工具，基本的環(huán)境配置也是第一次整體性的整合和摸索，對(duì)自己來說真的是一個(gè)極大的考驗(yàn)。在不斷的測試和學(xué)習(xí)中遇到了很多很多的困難特別是自己一個(gè)人一組，每當(dāng)有不懂的地方就去網(wǎng)上去找資料，去圖書館借參考書。有了理論知識(shí)根本是還不夠的，當(dāng)遇到困難的