網(wǎng)站資源共享課程設(shè)計報告

PAGEPAGE4裝裝訂線課程設(shè)計報告課程設(shè)計報告設(shè)計題目：資源共享班級：學(xué)號：姓名：指導(dǎo)教師：成績：日期：2013-01-05

目標與內(nèi)容：目標：布局資源共享頁面，實現(xiàn)資源共享功能。資源共享分為登錄、前臺、后臺三個界面（省略登錄界面）。前臺實現(xiàn)資源上傳，上傳至數(shù)據(jù)庫，后臺顯示上傳的資源，并且能進行修改刪除。學(xué)會網(wǎng)頁頁面的設(shè)計和基本布局.能夠使用代碼布局網(wǎng)頁.使用代碼實現(xiàn)網(wǎng)頁功能.能夠?qū)?shù)據(jù)庫和頁面相連接.理解網(wǎng)頁的基本制作流程.內(nèi)容：本次課程設(shè)計的我的選題是：資源共享。實現(xiàn)功能：1、前臺界面點擊“搜索”可以搜索共享資源（因頁面未設(shè)計，此處省略）。2、資源共享過程：輸入共享的資源名、選擇專題名稱、輸入資源鏈接、選擇共享資源的分類。單機“資源上傳”。完成資源上傳過程。3、前臺完成資源上傳過程，后臺顯示上傳的資源信息。單擊“修改”可以修改上傳資源的信息。單擊“刪除”實現(xiàn)刪除上傳資源功能。后臺界面必須分頁，避免頁面撐破。地點與軟件環(huán)境：地點：60#504機房軟件環(huán)境：MicrosoftVisualStudio2005DreamweaverCS4PhotoshopCS3SQLServerManagementStudio課程設(shè)計主要內(nèi)容：問題簡析：一、頁面設(shè)計本次課程設(shè)計的主題有資源共享，會員管理，考試生成系統(tǒng)，留言板等。首先每位同學(xué)確定自己的主題，搜集資料，整理素材，設(shè)計出符合自己主題的頁面。一般分為登錄界面、前臺顯示界面和后臺管理界面。實現(xiàn)前臺和后臺相連接的功能。系統(tǒng)效果圖設(shè)計:圖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、將頁面上的文字，小圖標等元素逐一放入頁面中，調(diào)整位置，初步完成頁面布局。制作數(shù)據(jù)庫1、打開SQLServerManagementStudio，新建數(shù)據(jù)庫，命名為“database”，保存在指定的文件夾。2、新建表，在表中輸入后臺中需要的列名?！靶蛱枴保败浖愋汀?，“軟件名”。類型都為“nachar（50）”設(shè)置“序號”為主鍵。保存表為“Table_1”。如圖7圖7.數(shù)據(jù)庫設(shè)計四、實現(xiàn)功能1、打開MicrosoftVisualStudio2005，新建項目，選擇“其他項目類型”—“VisualStudio解決方案”。保存到指定文件夾。將DreamweaverCS4中兩個頁面的代碼分別拷貝到Solution1中。并且將css以及所用到的image圖片一并拷貝到Solution1中。調(diào)試運行。2、在前臺“qt.aspx.cs”中插入代碼實現(xiàn)前臺數(shù)據(jù)上傳后保存在數(shù)據(jù)庫中并能在后臺顯示編輯的功能。代碼如下：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();//將文件上傳到以當(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>成功添加，詳細信息：<br>");strMsg.Append("文件類型："+this.FileUpload1.PostedFile.ContentType.ToString()+"<br>");strMsg.Append("文件名："+filepath+"<br>");strMsg.Append("存處文件名："+newfilename+"<br>");//strMsg.Append("文件上傳到服務(wù)器的路徑為："+savapath+"<br>");strMsg.Append("擴展名："+FileExtension+"<br>");strMsg.Append("大?。?+FileUpload1.PostedFile.ContentLength+"個字節(jié)</font>");this.Label1.Text=strMsg.ToString();}catch(Exceptionerror){Response.Write(error.ToString());}finally{conn.Close();}}}}3、打開后臺頁面，在指定層中插入控件“Gradeview”配置數(shù)據(jù)源，將數(shù)據(jù)庫中的數(shù)據(jù)庫“database”鏈接到控件中。如圖8圖8.后臺數(shù)據(jù)庫綁定到這邊為止，已經(jīng)實現(xiàn)了前臺和后臺相連接的功能。前臺上傳的資源已經(jīng)能夠上傳至數(shù)據(jù)庫中，并且能夠在后臺中修改刪除等。資源共享功能已經(jīng)實現(xiàn)。調(diào)試運行與結(jié)果分析：完成后的資源共享系統(tǒng)有以下能實現(xiàn)以下功能：前臺頁面完成基本布局，搜索，上傳等按鈕能實現(xiàn)，文本框內(nèi)能打字。能夠選擇軟件的分類。如圖9：圖9.前臺界面效果圖資源共享界面的主要功能就是資源上傳，點擊頁面“瀏覽”彈出對話框，選擇本地資源，點擊“上傳”可以將選擇的資源上傳至數(shù)據(jù)庫。上傳資源界面如圖10：圖10.資源上傳資源上傳成功，頁面顯示上傳成功的詳細信息。如圖11圖11.資源上傳成功四、前臺資源上傳成功后，上傳的文件已上傳至數(shù)據(jù)庫，后臺從數(shù)據(jù)庫中調(diào)出上傳的文件信息，顯示如圖12，并且能夠進行編輯，刪除。實現(xiàn)后臺的基本功能。圖12.后臺界面效果圖課程設(shè)計的小結(jié)/心得：不知不覺,二個星期的網(wǎng)站課程設(shè)計已經(jīng)結(jié)束,回顧這一段日子,學(xué)會很多東西,了解了網(wǎng)頁制作的基本流程和制作方法。在設(shè)計這個網(wǎng)站時真的體會很多東西，從一開始網(wǎng)頁主題的確定，到主頁總體的設(shè)計、前臺功能設(shè)計與管理、后臺功能設(shè)計與管理、每個分頁面的設(shè)計等。整個設(shè)計的過程可以說是一個艱難而有充實的學(xué)習(xí)的過程，許多的知識都是第一次深入接觸和學(xué)習(xí)，如ASP的調(diào)試工具，基本的環(huán)境配置也是第一次整體性的整合和摸索，對自己來說真的是一個極大的考驗。在不斷的測試和學(xué)習(xí)中遇到了很多很多的困難特別是自己一個人一組，每當(dāng)有不懂的地方就去網(wǎng)上去找資料，去圖書館借參考書。有了理論知識根本是還不夠的，當(dāng)遇到困難的