WEB音樂網(wǎng)站設計說明

1、 . . . WEB課程設計報告課程設計題目：音樂設計學生： 專業(yè)： 班級： 指導教師： 2012年04月28日目錄第1節(jié) 課程設計題目與背景1 1.1 設計題目1 1.2 設計背景1第2節(jié) 設計的開發(fā)工具1第3節(jié) 建設過程1 3.1 系統(tǒng)分析13.2 數(shù)據(jù)庫的設計23.3 功能模塊介紹5第4節(jié) 工作流程9 4.1 連接數(shù)據(jù)庫9 4.2 用戶登錄9 4.3 歌曲顯示，以最新歌曲為例10 4.4 音樂搜索11第5節(jié) 顯示效果13 5.1 主頁13 5.2 歌曲分類頁面14 5.3 音樂搜索頁面14 5.4 用戶留言頁面14 5.5 音樂播放器頁面155.6 后臺管理主頁面15 5.7 用戶管理頁

2、面165.8 歌曲管理頁面165.9 留言管理頁面175.10 系統(tǒng)管理頁面17第6節(jié) 總結(jié)和設計體會182 / 22第1節(jié) 課程設計題目與背景1.1 設計題目 構架一個音樂，要求必須包含音樂的一些基本功能，即前臺的用戶申請登陸功能，聽歌功能，音樂搜索，音樂收藏功能，提交留言和后臺的用戶管理，歌曲管理，留言管理，系統(tǒng)管理。1.2 設計背景 在互聯(lián)網(wǎng)發(fā)展迅猛的今天，我們無時無刻不與網(wǎng)絡接觸，可以從中查找我們需要的信息，可以發(fā)布想讓別人知道的信息，可以找到你不認識但真心的朋友，也可以第一時間看到國外的重大事件。當我們無事可做的時候，便開始了娛樂方式的搜索，由此，很多音樂和視頻應運而生，服務大家，為

3、我們的生活增添了色彩。隨著我國網(wǎng)民的增加，也促進了音樂的開發(fā)。第2節(jié) 設計的開發(fā)工具2.1 Dreamweaver 8.0 2.2 Flash 8.02.3 Firework 8.02.4 Access數(shù)據(jù)庫2.5 IIS服務器說明：Dreamweaver用于的開發(fā)，F(xiàn)lash用于flash效果的制作，firework對圖片進行處理，IIS作為我們的asp服務器，數(shù)據(jù)庫則采用微軟的Access數(shù)據(jù)庫。第3節(jié) 建設過程3.1 系統(tǒng)分析音樂包括兩大功能模塊：前臺和后臺。兩大功能模塊又分為很多子模塊。前臺包括動態(tài)顯示歌曲模塊，動態(tài)顯示時間模塊，用戶登錄與注冊模塊，關于我們和留言模塊，音樂搜索模塊。后

4、臺包括用戶管理模塊，歌曲管理模塊，留言管理模塊和系統(tǒng)管理模塊。整體模塊組織如下圖所示：音樂網(wǎng)前臺模塊后臺模塊用戶注冊模塊用戶登錄模塊動態(tài)顯示歌曲留言模塊音樂搜索模塊動態(tài)顯示時間用戶管理模塊歌曲管理模塊留言管理模塊系統(tǒng)管理模塊3.1.1 前臺模塊詳細功能描述 用戶注冊：用戶注冊自己的空間 用戶登錄：用戶登錄空間查看音樂收藏 動態(tài)顯示歌曲：根據(jù)類別不同，顯示華人歌曲，日歌曲，影視歌曲，傷感歌曲，非主流歌曲等等。 動態(tài)時間：網(wǎng)頁中顯示動態(tài)的時間 音樂搜索：搜索數(shù)據(jù)庫中包含的歌曲 留言：用戶提交自己的留言3.1.2 后臺模塊詳細功能描述 用戶管理：顯示和編輯所有用戶信息，歌曲收藏和刪除用戶 歌曲管理：

5、顯示，編輯和插入歌曲信息，刪除歌曲 留言管理：顯示和刪除留言信息 系統(tǒng)管理：修改管理員密碼和信息3.2 數(shù)據(jù)庫的設計 3.2.1 用戶信息表（users），屬性和容如下表：列名數(shù)據(jù)類型必填字段默認值說明Userid自動編號是無用戶IdUsername文本是無用戶名Userpassword文本是無密碼Mobile文本是無手機User 文本是無Adddate日期/時間是是注冊日期Psw_quesions文本是無密碼提示Psw_answer文本是無密碼答案City文本是無所在城市Address文本是無地址Sex文本是無性別Realname文本是無真實Code文本否無Useremail文本是無電子 3

6、.2.2 音樂信息表（music），屬性和容如下表：列名數(shù)據(jù)類型必填字段默認值說明id自動編號是無音樂編號Music_name文本是無音樂名稱Artist文本是無藝術家url文本是是音樂文件地址Zhuanji文本是無所屬專輯Adddate日期/時間是是添加日期Liebie文本是是所屬分類3.2.3 管理員信息表（admin），屬性和容如下表：列名數(shù)據(jù)類型必填字段默認值說明Id自動編號是否管理員編號Admin文本是否用戶名Adminpassword文本是否密碼3.2.4 留言信息表（liuyan），屬性和容如下表：列名數(shù)據(jù)類型必填字段默認值說明Ly_id自動編號是否留言編號Content文本是否

7、留言容Connection文本是否留言方式Addtime日期/時間是是留言日期3.2.5 信息表（webmess），屬性和容如下表：列名數(shù)據(jù)類型必填字段默認值說明Shuoming文本是否說明Web_name文本是否名稱Web_yuming文本是否域名Web_key文本是否關鍵字Describle文本是否描述 3.2.6 歌曲收藏表（shoucang），屬性如下表：列名數(shù)據(jù)類型必填字段默認值說明S_id自動編號是否收藏編號Username文本是否用戶idMusic_name文本是否音樂idAdddate日期/時間是否收藏時間 3.2.7 用戶-音樂關系表（sx），屬性如下表:列名數(shù)據(jù)類型必填字段

8、默認值說明S_id自動編號是否編號Username文本是否用戶名Music_name文本是否歌曲名Artist文本是否藝術家url文本是是音樂地址Adddate日期/時間是是添加日期3.3 功能模塊介紹登陸界面輸入用戶名和密碼賬號或密碼錯誤！N注銷用戶修改注冊信息修改成功點擊注冊鏈接Y注冊頁面Y檢查表單元素填寫注冊信息YN3.3.1 登陸注冊模塊該模塊的工作流程圖如下：3.3.2 動態(tài)顯示歌曲模塊歌曲顯示華人歌曲日韓歌曲歐美歌曲影視歌曲樂隊歌曲DJ歌曲流行歌曲傷感歌曲經(jīng)典歌曲網(wǎng)絡歌曲非主流歌曲根據(jù)數(shù)據(jù)庫中音樂的類別分別綁定數(shù)據(jù)集判斷有無音樂顯示歌曲列表沒有相關記錄！YN該模塊流程圖如下： 3.

9、3.3 動態(tài)顯示時間模塊該模塊采用javascript腳本顯示動態(tài)的系統(tǒng)時間，代碼如下：<script language = "javascript" > /動態(tài)時鐘<!-function show() var date = new Date(); /日期對象 var now = "" var myweekday=date.getDay();var weekday=""now = date.getFullYear()+"年" now = now + (date.getMonth()+1)+&quo

10、t;月" now = now + date.getDate()+"日 " if(myweekday= 0)weekday=" 星期日 "else if(myweekday = 1)weekday=" 星期一 "else if(myweekday = 2)weekday=" 星期二 "else if(myweekday = 3)weekday=" 星期三 "else if(myweekday = 4)weekday=" 星期四 "else if(myweekday =

11、 5)weekday=" 星期五 "else if(myweekday = 6)weekday=" 星期六 "now = now +weekday;now = now + date.getHours()+":" if(date.getMinutes().toString().length=2)now = now + date.getMinutes()+":" elsenow = now + "0"+date.getMinutes()+":" if(date.getSecond

12、s().toString().length=2)now = now + date.getSeconds(); elsenow = now + "0"+date.getSeconds(); document.getElementById("nowDiv").innerHTML = now; /div的html是now這個字符串 setTimeout("show()",1000); /設置過1000毫秒就是1秒，調(diào)用show方法 -> </script>3.3.4 音樂搜索模塊該模塊的工作流程圖如下：音樂搜索判斷數(shù)據(jù)庫中

13、表中是否存在改信息輸入搜索信息Y顯示搜索信息N沒有相關記錄3.3.5 留言模塊 該模塊的工作流程圖如下：用戶留言檢查合法性輸入留言信息Y提交到數(shù)據(jù)庫N輸入內(nèi)容有誤！后臺管理判斷賬號和密碼正確性Y賬號或密碼錯誤！N輸入管理員賬號和密碼查看歌曲信息查看用戶信息查看留言信息修改管理員密碼刪除成功！刪除用戶YN刪除歌曲YN添加歌曲輸入歌曲信息檢查表單刪除成功！添加成功！YN刪除成功！刪除留言YN輸入舊密碼輸入新密碼是否正確N檢查表單修改成功！YYN3.3.6 后臺管理該模塊的工作流程圖如下：第4節(jié) 工作流程4.1 連接數(shù)據(jù)庫4.1.1 創(chuàng)建ODBC數(shù)據(jù)源管理工具數(shù)據(jù)源ODBC系統(tǒng)DSN打開ODBC M

14、icrosoft Access安裝，數(shù)據(jù)源名conn，選擇數(shù)據(jù)庫文件，確定。4.1.2 連接數(shù)據(jù)庫文件（如下圖）4.2 用戶登錄 包括3個頁面：login.asp,loginfo.asp和loginerr.asp,通過添加服務器行為的登陸用戶行為即可。登陸成功如圖：4.3 歌曲顯示，以最新歌曲為例4.3.1 做出最新歌曲顯示頁面，如下：4.3.2 綁定記錄集 添加服務器行為中的添加記錄集，打開下圖記錄集節(jié)目，正確填寫各項，華人歌曲和日歌曲等頁面只是篩選或排序不同而已。此頁面的記錄集如下：4.3.3 添加重復區(qū)域和顯示區(qū)域 選中要重復的區(qū)域，添加服務器行為中的重復區(qū)域，選擇相應條件即可，選擇插入

15、應用程序記錄集分頁記錄集導航條，添加上一頁和下一頁等。4.3.4 顯示的結(jié)果如下：4.4 音樂搜索4.4.1 添加搜索結(jié)果頁面4.4.2 綁定記錄集 注：Request.Form(“searchtext”)是從搜索頁面?zhèn)鬟f過來的參數(shù)，并將該參數(shù)與數(shù)據(jù)庫中的歌曲名和藝術家字段比較，篩選出需要的記錄。4.4.3 搜索結(jié)果顯示，如下：4.5 音樂播放頁面4.5.1 Dreamweaver中制作出該頁面 注：列表中為框架網(wǎng)頁，包括15個網(wǎng)頁，即15個分類，可以查看自己的收藏，并播放收聽美妙的歌曲。4.5.2 綁定記錄集 注：musicid為點擊試聽后傳遞的參數(shù)第5節(jié) 顯示效果5.1 主頁 注：主頁的右

16、上角為動態(tài)時鐘，上方為形象flash，并有設為首頁和添加收藏功能，可通過上傳作品和下載作品查看說明，中間分類導航條和音樂搜索，左下角為會員登錄窗體，可通過進行注冊，下方說明，關于我們和留言提交。5.2 歌曲分類頁面 注：歌曲分類頁面均來自于模板，結(jié)構相似，只是數(shù)據(jù)集的綁定不同而已，故此不做重復介紹。5.3 音樂搜索頁面注：在音樂搜索文本框中輸入搜索文本，點擊音樂搜索按鈕后，會顯示出搜索結(jié)果，同樣也可以在有主頁模板生成的其他頁面進行搜索。5.4 用戶留言頁面 輸入反饋容和聯(lián)系方式后，單擊確定提交按鈕，即可將用戶要反饋的容提交給后臺數(shù)據(jù)庫。5.5 音樂播放器頁面注：點擊音樂名稱或者點擊試聽后，會自

17、動打開該網(wǎng)頁播放器頁面，播放你選中的音樂，而播放器的左邊分類歌曲列表，供你選擇喜歡的各種類型歌曲。5.6 后臺管理主頁面注：在上述登陸后臺頁面中輸入管理員賬號和密碼，輸入正確后登陸到后臺管理，如下： 注：后臺顯示登陸的管理員名稱，進入后臺后，可以進行一下操作：用戶管理，歌曲管理，留言管理和系統(tǒng)管理。5.7 用戶管理頁面 注：該頁面可以查看用戶的詳細資料，查看用戶的音樂收藏和刪除用戶。5.8 歌曲管理頁面 注：該頁面可以對音樂資料進行查看，編輯和刪除，同樣也可以插入音樂。5.9 留言管理頁面 注：留言頁面，可以查看用戶的留言和建議來提高的穩(wěn)定性，亦可以刪除無用的留言。5.10 系統(tǒng)管理頁面 系統(tǒng)

18、管理頁面包括修改管理員密碼和更改信息兩個部分，功能實現(xiàn)密碼修改和信息信息修改，截圖如下：第6節(jié) 總結(jié)和設計體會 通過本次課程設計，我對asp的構建有了更深一步的了解，彌補了課堂上學習不到的知識，同時也對制作中使用的軟件有了一定的掌握，如：Dreamweaver，F(xiàn)lash和Firework，可以利用這些軟件做出自己想要的效果，一個周的時間也做出了自己還算滿意的作品。 但同時還存在很多問題，如IIS服務器的配置會偶爾出錯。在制作網(wǎng)頁的過程中，有時候會對自己做出的效果并不滿意，總是達不到自己想要的結(jié)果，大概是實踐太少的緣故吧！對此應該加強練習，增加經(jīng)驗。最后要感老師和同學們的幫助，我相信此次課程設計會對今后的生活有一定的影響。東華理工學院長江學院課程設計評分表課程設計題目：音樂設計項目容滿分實評選題能結(jié)合所學課程知識、有一定的能力訓練。符合選題要求（1人一題）10工作量適中，難