WEB音乐网站设计说明

1、 . . . WEB课程设计报告课程设计题目：音乐设计学生： 专业： 班级： 指导教师： 2012年04月28日目录第1节 课程设计题目与背景1 1.1 设计题目1 1.2 设计背景1第2节 设计的开发工具1第3节 建设过程1 3.1 系统分析13.2 数据库的设计23.3 功能模块介绍5第4节 工作流程9 4.1 连接数据库9 4.2 用户登录9 4.3 歌曲显示，以最新歌曲为例10 4.4 音乐搜索11第5节 显示效果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 系统管理页面17第6节 总结和设计体会182 / 22第1节 课程设计题目与背景1.1 设计题目 构架一个音乐，要求必须包含音乐的一些基本功能，即前台的用户申请登陆功能，听歌功能，音乐搜索，音乐收藏功能，提交留言和后台的用户管理，歌曲管理，留言管理，系统管理。1.2 设计背景 在互联网发展迅猛的今天，我们无时无刻不与网络接触，可以从中查找我们需要的信息，可以发布想让别人知道的信息，可以找到你不认识但真心的朋友，也可以第一时间看到国外的重大事件。当我们无事可做的时候，便开始了娱乐方式的搜索，由此，很多音乐和视频应运而生，服务大家，为

3、我们的生活增添了色彩。随着我国网民的增加，也促进了音乐的开发。第2节 设计的开发工具2.1 Dreamweaver 8.0 2.2 Flash 8.02.3 Firework 8.02.4 Access数据库2.5 IIS服务器说明：Dreamweaver用于的开发，Flash用于flash效果的制作，firework对图片进行处理，IIS作为我们的asp服务器，数据库则采用微软的Access数据库。第3节 建设过程3.1 系统分析音乐包括两大功能模块：前台和后台。两大功能模块又分为很多子模块。前台包括动态显示歌曲模块，动态显示时间模块，用户登录与注册模块，关于我们和留言模块，音乐搜索模块。后

4、台包括用户管理模块，歌曲管理模块，留言管理模块和系统管理模块。整体模块组织如下图所示：音乐网前台模块后台模块用户注册模块用户登录模块动态显示歌曲留言模块音乐搜索模块动态显示时间用户管理模块歌曲管理模块留言管理模块系统管理模块3.1.1 前台模块详细功能描述 用户注册：用户注册自己的空间 用户登录：用户登录空间查看音乐收藏 动态显示歌曲：根据类别不同，显示华人歌曲，日歌曲，影视歌曲，伤感歌曲，非主流歌曲等等。 动态时间：网页中显示动态的时间 音乐搜索：搜索数据库中包含的歌曲 留言：用户提交自己的留言3.1.2 后台模块详细功能描述 用户管理：显示和编辑所有用户信息，歌曲收藏和删除用户 歌曲管理：

5、显示，编辑和插入歌曲信息，删除歌曲 留言管理：显示和删除留言信息 系统管理：修改管理员密码和信息3.2 数据库的设计 3.2.1 用户信息表（users），属性和容如下表：列名数据类型必填字段默认值说明Userid自动编号是无用户IdUsername文本是无用户名Userpassword文本是无密码Mobile文本是无手机User 文本是无Adddate日期/时间是是注册日期Psw_quesions文本是无密码提示Psw_answer文本是无密码答案City文本是无所在城市Address文本是无地址Sex文本是无性别Realname文本是无真实Code文本否无Useremail文本是无电子 3

6、.2.2 音乐信息表（music），属性和容如下表：列名数据类型必填字段默认值说明id自动编号是无音乐编号Music_name文本是无音乐名称Artist文本是无艺术家url文本是是音乐文件地址Zhuanji文本是无所属专辑Adddate日期/时间是是添加日期Liebie文本是是所属分类3.2.3 管理员信息表（admin），属性和容如下表：列名数据类型必填字段默认值说明Id自动编号是否管理员编号Admin文本是否用户名Adminpassword文本是否密码3.2.4 留言信息表（liuyan），属性和容如下表：列名数据类型必填字段默认值说明Ly_id自动编号是否留言编号Content文本是否

7、留言容Connection文本是否留言方式Addtime日期/时间是是留言日期3.2.5 信息表（webmess），属性和容如下表：列名数据类型必填字段默认值说明Shuoming文本是否说明Web_name文本是否名称Web_yuming文本是否域名Web_key文本是否关键字Describle文本是否描述 3.2.6 歌曲收藏表（shoucang），属性如下表：列名数据类型必填字段默认值说明S_id自动编号是否收藏编号Username文本是否用户idMusic_name文本是否音乐idAdddate日期/时间是否收藏时间 3.2.7 用户-音乐关系表（sx），属性如下表:列名数据类型必填字段

8、默认值说明S_id自动编号是否编号Username文本是否用户名Music_name文本是否歌曲名Artist文本是否艺术家url文本是是音乐地址Adddate日期/时间是是添加日期3.3 功能模块介绍登陆界面输入用户名和密码账号或密码错误！N注销用户修改注册信息修改成功点击注册链接Y注册页面Y检查表单元素填写注册信息YN3.3.1 登陆注册模块该模块的工作流程图如下：3.3.2 动态显示歌曲模块歌曲显示华人歌曲日韩歌曲欧美歌曲影视歌曲乐队歌曲DJ歌曲流行歌曲伤感歌曲经典歌曲网络歌曲非主流歌曲根据数据库中音乐的类别分别绑定数据集判断有无音乐显示歌曲列表没有相关记录！YN该模块流程图如下： 3.

9、3.3 动态显示时间模块该模块采用javascript脚本显示动态的系统时间，代码如下：<script language = "javascript" > /动态时钟<!-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秒，调用show方法 -> </script>3.3.4 音乐搜索模块该模块的工作流程图如下：音乐搜索判断数据库中

13、表中是否存在改信息输入搜索信息Y显示搜索信息N没有相关记录3.3.5 留言模块 该模块的工作流程图如下：用户留言检查合法性输入留言信息Y提交到数据库N输入内容有误！后台管理判断账号和密码正确性Y账号或密码错误！N输入管理员账号和密码查看歌曲信息查看用户信息查看留言信息修改管理员密码删除成功！删除用户YN删除歌曲YN添加歌曲输入歌曲信息检查表单删除成功！添加成功！YN删除成功！删除留言YN输入旧密码输入新密码是否正确N检查表单修改成功！YYN3.3.6 后台管理该模块的工作流程图如下：第4节 工作流程4.1 连接数据库4.1.1 创建ODBC数据源管理工具数据源ODBC系统DSN打开ODBC M

14、icrosoft Access安装，数据源名conn，选择数据库文件，确定。4.1.2 连接数据库文件（如下图）4.2 用户登录 包括3个页面：login.asp,loginfo.asp和loginerr.asp,通过添加服务器行为的登陆用户行为即可。登陆成功如图：4.3 歌曲显示，以最新歌曲为例4.3.1 做出最新歌曲显示页面，如下：4.3.2 绑定记录集 添加服务器行为中的添加记录集，打开下图记录集节目，正确填写各项，华人歌曲和日歌曲等页面只是筛选或排序不同而已。此页面的记录集如下：4.3.3 添加重复区域和显示区域 选中要重复的区域，添加服务器行为中的重复区域，选择相应条件即可，选择插入

15、应用程序记录集分页记录集导航条，添加上一页和下一页等。4.3.4 显示的结果如下：4.4 音乐搜索4.4.1 添加搜索结果页面4.4.2 绑定记录集 注：Request.Form(“searchtext”)是从搜索页面传递过来的参数，并将该参数与数据库中的歌曲名和艺术家字段比较，筛选出需要的记录。4.4.3 搜索结果显示，如下：4.5 音乐播放页面4.5.1 Dreamweaver中制作出该页面 注：列表中为框架网页，包括15个网页，即15个分类，可以查看自己的收藏，并播放收听美妙的歌曲。4.5.2 绑定记录集 注：musicid为点击试听后传递的参数第5节 显示效果5.1 主页 注：主页的右

16、上角为动态时钟，上方为形象flash，并有设为首页和添加收藏功能，可通过上传作品和下载作品查看说明，中间分类导航条和音乐搜索，左下角为会员登录窗体，可通过进行注册，下方说明，关于我们和留言提交。5.2 歌曲分类页面 注：歌曲分类页面均来自于模板，结构相似，只是数据集的绑定不同而已，故此不做重复介绍。5.3 音乐搜索页面注：在音乐搜索文本框中输入搜索文本，点击音乐搜索按钮后，会显示出搜索结果，同样也可以在有主页模板生成的其他页面进行搜索。5.4 用户留言页面 输入反馈容和联系方式后，单击确定提交按钮，即可将用户要反馈的容提交给后台数据库。5.5 音乐播放器页面注：点击音乐名称或者点击试听后，会自

17、动打开该网页播放器页面，播放你选中的音乐，而播放器的左边分类歌曲列表，供你选择喜欢的各种类型歌曲。5.6 后台管理主页面注：在上述登陆后台页面中输入管理员账号和密码，输入正确后登陆到后台管理，如下： 注：后台显示登陆的管理员名称，进入后台后，可以进行一下操作：用户管理，歌曲管理，留言管理和系统管理。5.7 用户管理页面 注：该页面可以查看用户的详细资料，查看用户的音乐收藏和删除用户。5.8 歌曲管理页面 注：该页面可以对音乐资料进行查看，编辑和删除，同样也可以插入音乐。5.9 留言管理页面 注：留言页面，可以查看用户的留言和建议来提高的稳定性，亦可以删除无用的留言。5.10 系统管理页面 系统

18、管理页面包括修改管理员密码和更改信息两个部分，功能实现密码修改和信息信息修改，截图如下：第6节 总结和设计体会 通过本次课程设计，我对asp的构建有了更深一步的了解，弥补了课堂上学习不到的知识，同时也对制作中使用的软件有了一定的掌握，如：Dreamweaver，Flash和Firework，可以利用这些软件做出自己想要的效果，一个周的时间也做出了自己还算满意的作品。 但同时还存在很多问题，如IIS服务器的配置会偶尔出错。在制作网页的过程中，有时候会对自己做出的效果并不满意，总是达不到自己想要的结果，大概是实践太少的缘故吧！对此应该加强练习，增加经验。最后要感老师和同学们的帮助，我相信此次课程设计会对今后的生活有一定的影响。东华理工学院长江学院课程设计评分表课程设计题目：音乐设计项目容满分实评选题能结合所学课程知识、有一定的能力训练。符合选题要求（1人一题）10工作量适中，难