《网站设计与开发》课程设计-一个音乐网站的设计.doc

学号网站设计与开发课程设计报告题目： 一个音乐网站的设计专业： 数字媒体技术班级： 姓名： 指导教师： 成绩： 文化创意与传播学院 2015年3月16日目录1、设计内容及要求11.1需求分析11.2系统运行环境分析11.3系统开发要求12、系统整体设计12.1设计方案12.2模块功能及结构23、数据库的设计3 3.1数据库表的设计33.2数据库的连接34、系统页面详细设计54.1 音乐列表页面设计54.2 播放音乐页面设计84.3 音乐下载页面设计84.4 显示投票结果页面设计94.5 投票页面设计104.6 留言板页面设计124.7 管理留言页面设计134.8 注册论坛用户页面设计144.9 论坛用户登录页面设计144.10论坛首页设计154,11论坛发表帖子设计164.12论坛阅读帖子页面设计175、系统测试205.1系统测试过程206、总 结20参考文献21文化创意与传播学院网站设计与开发课程设计1、设计内容及要求1.1需求分析通过调查，要求系统需要以下功能：用户可以方便的在线听歌；用户可以方便的下载歌曲；用户可以向我们进行留言，提出宝贵的意见；用户可以完成在线调查，对我们网站进行评价；用户可以与其他用户的交流，可以发表新帖，查看帖子，回复新帖。1.2系统运行环境分析microsoft active server pages即asp,是一套服务器端脚本环境, html网页、asp指令和 activex元件可以通过asp结合建立应用程序，其建立的web服务器应用程序具有动态、交互且高效的特点。有了asp就不必担心客户的浏览器是否能运行所编写的代码，因为所有的程序都将在服务器端执行，包括所有嵌在普通html中的脚本程序。当程序执行完毕后，服务器仅将执行的结果返回给客户浏览器，这样也就减轻了客户端浏览器的负担，大大提高了交互的速度。1.3系统开发要求1、网络服务器操作系统：windows 98以上2、web服务器：iis 3、后台数据库系统：access 20004、网页编程语言：html，asp5、网页前台编辑工具：macromedia dreamweaver 8、adobe photoshop.2文化创意与传播学院网站设计与开发课程设计 2、系统整体设计2.1设计方案由于系统的定位是一个在线音乐系统，是使用asp技术结合控件开发的一套在线音乐系统。系统运行在windows xp,用iis作为服务器，用asp完成动态交互功能。后台数据库是用access。系统构架图如图2-1所示。 在线听歌，下载歌曲，留言板，在线投票，在线论坛。留言管理，用户管理，帖子管理前台交互后台交互access数据库windows xp iis html access 图2-1系统构架图2.2模块功能及结构本音乐系统主要包括五个功能模块：下载歌曲，在线听歌，留言板，在线投票，在线论坛。系统模块结构如图2-2所示首页（index）在线听歌（1 play .asp）下载歌曲（1 download.asp）留言板（1留言板.asp）在线投票（vote.asp）在线论坛（bbs.aps）查看投票（show_vote.asp）图2-2 系统模块结构3、数据库的设计3.1数据库表的设计 根据系统的开发要求我们设定了数据库主要有音乐信息表（music），管理员数据表（admin），用户留言表(guestbook)，票数计算表（dbvote），投票ip地址表（dbvoteip），帖子内容表（bbs），论坛用户表（user），专辑歌曲表（liangjingru,wanglihong,sunyannzi,zhoujielun）。数据库表如图3-1所示。 数据库（music_db）音乐信息表（music）系统管理员（admin）用户留言表（guestbook）用户投票表（advote）用户ip地址表（dbvoteip）帖子内容表（bbs）论坛用户表（user）专辑歌曲表（liangjingru）图3-1 数据库表图3.2数据库的连接access数据库工具是microsoft office套件的重要组成部分。access适用于小型商务应用，用来存储和管理商务活动所需要的数据。access不仅是一个数据库，而且具有强大的数据管理功能，可以方便的利用各种数据源，生成窗体（表单）、查询、报表和应用程序等。利用asp开发小型项目时，access往往是首选的数据库工具。利用dsn连接，即利用odbc数据源进行连接。用此方法前，需要首先给要连接的数据库建立一个数据源，然后利用数据源名进行连接。对要连接的数据库定义数据源名。第一步：依次选择 控制面板-管理工具-数据源 命令，打开odbc数据库管理器对话框。 图3-2 odbc数据源管理器对话框图3-3 odbc microsoft access对话框第二步：用dreamweaver打开 新建的网页，打开“应用程序”面板，并选择数据库按钮-单击“自定义链接字符串”，打开“自定义链接字符串”对话框，如图3-4，图3-5所示图3-4应用程序图3-5 “自定义链接字符串”对话框在连接字符串文本框中输入：provider=microsoft.jet.oledb.4.0;data source=e:zuopindatamusic_db.mdb;persist security info=false单击“测试” 按钮会弹出“ 成功创建链接脚本”对话框，如图3-6所示 图3-6 “ 成功创建链接脚本”对话框到此，数据库链接完成。64、系统页面详细设计4.1 音乐列表页面设计音乐列表页面做出来如图4-1 所示：图4-1 网站主页第一步：首先制作好页眉，版权和通栏等区域，并在页面中部的主体部分插入一个表格，打开“绑定”面板，打开“记录集”对话框，创建一个记录集命名为rs1，成功创建记录集后，在“绑定”面板中便可以看到，如图4-2所示图4-2 “绑定”面板第二步：在页面中插入一行六列的表格，依次将记录集中的记录字段绑定到表格中。第三步：在第五列和第六列单元格中分别插入一幅图片，并相应的创建一个空链接，然后选中第五列的图像，打开“行为”面板，单击“添加行为”按钮，选择“打开浏览器窗口”菜单项，弹出“打开浏览器窗口”对话框。第四步：打开“选择文件”对话框，选中“1play.asp”.然后单击“参数”按钮，在“参数”对话框中新建一个参数“id”，然后将光标定位于“值”所在的列中，在打开的“动态数据”对话框（如图4-3所示）中的“记录集rs1”中选择“id”，依次单击确定，关闭对话框。图4-3 “动态数据”对话框第五步：依照第三步和第四步的步骤，也为第六列的图像添加一个“打开浏览器窗口”的行为。第六步：选中音乐记录的表格的行，在“服务器行为”面板中，从弹出的菜单中选中“重复区域”菜单项，打开“重复区域”对话框，进行如图4-4所示的设置，单击确定关闭对话框。图4-4 “重复区域”对话框到次，完成页面的制作。其表格的代码为： % while (repeat1_numrows 0) and (not rs1.eof) % img src=photo/试听.jpg alt=试听 width=20 height=20 border=0 align=middle onclick=mm_openbrwindow(1 play .asp?id=,播放音乐,) / img src=photo/下载.jpg alt=下载 width=20 height=20 border=0 align=middle onclick=mm_openbrwindow(1 download.asp?id=,歌曲下载,) / 4.2 播放音乐页面设计播放音乐页面设计出了如图4-5 所示：图4-5 播放音乐页面第一步：首先制作好页眉，版权和通栏等区域，打开“绑定”面板，打开“记录集”对话框，创建一个记录集命名为rs2，成功创建记录集后，在“绑定”面板中便可以看到。第二步：在页面中插入相应的表格，输入相应的文本，接着将“绑定”面板中记录集rs2的“musicname”“singername”和“musictheme”分布插入到单元格中对应文字的后面。如图4-6所示图4-6 单元格第三步：再插入一个表格，将光标定位于表格中，然后切换到代码视图中插入以下代码：embed src= width=500 height=45 autostart=true loop=true。4.3 音乐下载页面设计第一步：首先制作好页眉，版权和通栏等区域，打开“绑定”面板，打开“记录集”对话框，创建一个记录集命名为rs3，成功创建记录集后，在“绑定”面板中便可以看到。 第二步：插入三行的表格，并输入相应的文本，然后将“绑定”面板中记录集rs3的“musicurl”插入到第二行单元格中，由于在本系统数据库中“musicurl”字段保存的音乐文件的相对路径，再次要添加路径前缀http:/localhost/music/，如图4-7所示，图4-7添加路径第三步：选中“下载地址”的完整路径，然后建立一个指向其自己的超链接：localhost/至此，此网页制作完成.4.4 显示投票结果页面设计显示投票结果页面做出来如图4-8 所示：图4-8 显示投票结果第一步：首先制作好页眉，版权和通栏等区域，打开“绑定”面板，打开“记录集”对话框，单击“高级”按钮，在“sql”文本框中输入以下查询语句：select best,better,good,inferior,(best+better+good+inferior) as total,(best/total) as bestpercent,(better/total) as betterpercent,(good/total) as goodpercent,(inferior/total) as inferiorpercentfrom dbvote创建一个记录集命名为rs3， 第二步：插入一个表格并设置属性如图4-9所示.，然后在页面中输入相应的说明文本，将绑定面板中的相应字段插入到网页中的合适位置。图4-9 表格属性第三步：打开“服务器行为”面板，单击选中一个动态文本选项，这里选中 “动态文本（votedb.bestpercent）”，双击鼠标，打开“动态文本”对话框，在对话框的“格式”下拉列表中选择“百分之-2个小数点”选项，如图4-10所示，单击确定关闭对话框。图4-10 “动态文本”对话框第四步：参照第三步的操作方法，将服务器行为面板中的“动态文本（votedb.betterpercent）”，“动态文本（votedb.goodpercent）”“动态文本（votedb.inferiorpercent）”的格式都设成相同的设置。第五步：在第二列第一行的单元格中插入一个一行一列的表格，表格的宽度暂时设置为50像素，单击选中右边单元格中插入的动态文本vote.bestpercent，切换到代码视图中复制动态文本的源代码，将刚才插图的表格的宽度设置为刚才复制的源代码。其表格的代码为：width= border=0 cellspacing=0 bgcolor=#126872   第六步：参照第四步的操作方法，在第2.3.4行的单元格中各插入一行一列的表格，并各个表格的宽度设置为相应的动态值。至此，此页面完成。4.5 投票页面设计本网页主要实现以下3个方面的功能：1收集用户投票时选择的信息。2防止用户重复投票。3将用户悬着的投票信息传递到网页count.asp如图所示：制作步骤：第一步：制作投票表单，：首先制作好页眉，版权和通栏等区域，然后插入一个2行1列的表格，在表格的第一行中输入文本“您认为本站的设计效果如何？”在表格的第二行中插入一个表单域并将其命名为vote。在新插入表格的第1列的前四行单元格中分别插入一个单选按钮，将单选按钮都命名为“favorite”，其选定值依次设置为“best”、“ better”、“good”和“inferior”，在四个单选按钮的右侧分别输入相应的说明性文本。第二步：在表格的第五行插入连个按钮并进行相应的设置，选中标签为“查看”的按钮，打开“行为”面板，单击 “添加行为”按钮，在弹出的菜单中选择“打开浏览器窗口”，打开“打开浏览器窗口”对话框，在对话框中选择“show_vote.asp”，单击“确定”关闭对话框。第三步：防止重复投票，打开“绑定”面板，单击面板中的加号，在弹出的菜单中选择“请求变量”菜单项（如图4-11所示）。在弹出的“请求变量”对话框中的类型下拉列表中选择“request.servervariables”选项，在名称文本框中输入“remote_addr”，单击“确定”关闭对话框。此时在“绑定”面板中就可以看到该变量。4-11“请求变量”菜单项和“绑定”面板第四步：在“投票”按钮的右侧插入一个隐藏域，选中隐藏域图标，将其命名为“sendip”，然后单击面板上的“绑定到动态源”按钮，从而打开“动态数据”对话框，然后选中刚刚建立的“request.servervariable .remote_addr”。单击“确定”关闭对话框。这样就可以获取浏览者的ip地址了。第五步：打开 “服务器行为”面板，在弹出的 “插入记录“菜单项中进行如图4-12所示的设置。4-12“插入记录”设置 第六步：在“服务器行为“面板中单击加号按钮，在弹出的菜单中选择“用户身份验证” 检查新用户名打开“检查新用户名”。 第七步：在网页vote.asp中单击代码按钮，切换到源代码视图中，查找到代码：mm_editredirecturl = count.asp，然后将其修改为：mm_editredirecturl = count.asp?favorite=&request(favorite)。到此，此页制作完成。4.6 留言板页面设计第一步：在页面中插入表单，并输入相应的文本，插入相应的文本框和按钮，如图4-13所示，图4-13插入第二步：打开“服务器行为”面板，单击加号按钮，选择插入记录并进行插入。本页的主要涉及是表单的设计，其代码为：form method=post action= name=form1   姓名: 邮件地址: 主页: 消息:   4.7 管理留言页面设计第一步：首先制作好页眉，版权和通栏等区域，再插入两行表格输入，“留言管理”和“退出管理”等文本。在页面的中间插入一行五列的表格，依次将recordset1记录集的数据绑定到表格，在最后一列中输入“删除”两字，如图所示，第二步：选中此表格，单击“服务器行为”面板中的加号，选择“重复区域”进行显示全部设置，再单击“服务器行为”面板中的加号，选择“转到详细页面”，进行如图5-19所示的设置，其代码为：a href=delete.asp?删除第三步：单击“服务器行为”面板中的加号，进行选择，打开对话框后，选择完成后转到留言板页面。4.8 注册论坛用户页面设计论坛注册新用户包括注册新用户页面（reg.asp）、注册成功提示页（regsuccess.asp）、注册失败提示页（regerror.asp），制作注册新用户页面（reg.asp） 打开【绑定】面板，单击面板中的加号按钮，在弹出的快捷菜单中选择【阶段变量】菜单项，打开【阶段变量】对话框，在【名称】文本框中输入“mm_username”，单击【确定】按钮创建一个阶段变量。同样步骤再创建一个阶段变量“mm_uerauthorization”。制作完成如图所示：注册新用户页面4.9 论坛用户登录页面设计论坛用户登录部分主要包括用户登录页面（）和登录失败提示页面（）的制作。制作登陆页，是用来验证登录用户的用户名、密码和访问级别的。如果验证通过，则转到响应的页面，如果不通过，则转到登录失败的提示页面。如图所示：第一步：新建login.asp页面，参照前面的内容制作好页眉、版权和通栏等区域，然后插入表格，在表格中做出如图所示的表单。第二步：打开【服务器行为】面板，单击面板中的加号按钮，在弹出的快捷菜单中选择【用户身份验证】选择【登录用户】菜单项，打开【登录用户】对话框，在【登录用户】对话框中设置各项参数，将表单中的用户名、密码与数据库中的用户名、密码字段相对应。 第三步：打开【绑定】面板，单击面板中的加号按钮，在弹出的快捷菜单中选择【阶段变量】菜单项，打开【阶段变量】对话框，在【名称】文本框中输入“mm_username”，单击【确定】按钮创建一个阶段变量。同样步骤再创建一个阶段变量“mm_uerauthorization”。相关代码： 4.10论坛首页设计 论坛的首页按照帖子发表的时间先后顺序来显示论坛中帖子的列表，并实现自动分页显示，每页中有一定的记录数。制作完成如图4-15所示：图4-15论坛首页第一步：新建bbs.asp页面，参照前面的内容制作好页眉、版权和通栏等区域，在页面中插入表格，在表格中插入一幅图片并输入公告文本，然后添加标签并设置其相应属性设计一个滚动公告栏。第二步：打开【服务器行为】面板，打开【记录集】对话框，在名称文本框中输入“bbsrs”，在【连接】下拉列表中选择【bbs】，单击【确定】创建记录集。第三步：切换到【绑定】面板，在【绑定】面板中将“subject”“name”“addtime”“hits”分别插入到文本“帖子主题”“作者”“发表时间”“点击数”下方的单元格中，并设置对应的对其方式。然后选中刚刚绑定动态字段的行，单击【服务器行为】面板中的加号按钮，在弹出的菜单中选中【重复区域】菜单项，在【重复区域】对话框设置显示10条记录。第四步：选中关于帖子主题的动态文本“bbsrs.subject”，然后在属性面板中单击【链接】选项右边的按钮打开【选中文件】对话框，选中阅读帖子详细内容的网页“readbbs.asp”，然后单击“参数”按钮，在【参数】对话框中新建一个参数id，打开【动态数据】对话框选中记录集中的id字段。接着在【属性】面板中设置超链接目标的打开方式为“b_lank”4,11论坛发表帖子设计 网页addbbs.asp具有两项功能：即在不同的情况下，该页面可以分别用来发表新帖、回复主题贴。如图4-16所示：图4-16 发帖页面第一步：新建addbbs.asp页面，参照前面的内容制作好页眉、版权和通栏等区域，插入相应的表格并填写如图所示的内容。第二步：将光标定位于文本“随便说说”的后边，插入一幅表情图片。在pic文件夹中存放了place1.gifplace8.gif，文件夹pic与网页addbbs.asp在站点的同一目录下。在表情的右边插入一个单选按钮，并命名为“pic”，其【选中值】设置为表情图像的路径。第三步：单击【服务器行为】面板的加号按钮，在弹出的菜单中选择【用户身份验证】，选择【限制对页的访问】对话框，选中【用户名和密码】单选按钮；在【如果访问被拒绝，则转到】文本框中输入登陆页（login.asp）的路径。第四步：单击表单插入栏中的【隐藏域】按钮，插入一个隐藏域，在【属性】面板中将隐藏域命名为“addtime”，将其值设置为“”，在【动态数据】对话框中，单击选中阶段变量“mm_username”，单击确定完成设置。第五步：单击【绑定】面板中加号按钮，在弹出的菜单中选择【请求变量】菜单项，在【请求变量】对话框中的【类型】下拉列表中选择【request.querystring】，在名称文本框中输入“subject”，单击确定完成变量的建立。同样步骤再建立三个变量。切换到代码视图中，将光标定位于标签“”的后面，插入相应的代码：% id=request(id)subjectid=request(subjectid)subject=request.querystring(subject)if idand subjectid=0 thensubjectid=idelseif subjectid= thensubjectid=0end if%4.12论坛阅读帖子页面设计阅读帖子详细内容主要是readbbs.asp页面的制作，该页面通过发送页的url参数，打开帖子的详细内容。如果有回复贴，则同时显示回复贴的内容；如果没有就是只显示本帖的内容。如图4-17所示：图4-17阅读帖子页面第一步：新建readbbs.asp页面，参照前面的内容制作好页眉、版权和通栏等区域，按照要求插入相应的表格。第二步：单击【服务器行为】面板中加号按钮，在弹出的菜单中选择【命令】菜单项，打开【命令】对话框，在【名称】文本框中输入“cmd”，在【连接】下拉列表中选择【music】，在类型下拉列表中选择【更新】，在【数据库项】列表框中展开表格，选择数据库表“bbs”中的“hits”字段名，单击set按钮。在sql文本中输入sql语句：update bbs set hits=hits+1 where id。第三步：创建记录集bbsrs1，将【绑定】面板中相应的动态文本插入到单元格中。第四步：创建记录集bbsrs2，在记录集高级对话框中，将变量“mmcolparam”的【运行值】设置为“bbsrs1.fields.item(“username”).value”。将光标定位于文本“帖子主题”下方的单元格中，单击插入栏中的【图像】按钮，打开【选择图像源文件】对话框。然后选中【数据源】单选按钮，并选中记录集“bbsrs2”中的“face”字段，第五步：切换到代码视图，在 “发表新帖”后面加上以下代码：|ahref=editbbs.asp?id= 第六步：选中文本“回复此贴”，在【属性】面板中单击【链接】，打开【选择文件】对话框。在【参数】对话框中创建3个参数。第七步：切换到代码视图，在标签的前面插入一段asp代码。第八步：选中文本“暂无回复”所在的表格，单击【服务器行为】面板中的加号按钮，在弹出的菜单中选择【显示区域】，打开【如果记录集为空则显示区域】对话框。在记录集下拉列表中选择【bbsrs3】，单击“确定”按钮，完成本网页的制作。网页的部分代码： 公告 欢迎参加建站一周年活动！ 管理论坛 发表帖子 帖子主题： img src= border=0 / img src= border=0 align=absmiddle / 发帖时间： a href=addbbs.asp?id=&subjectid=&subject=回复此贴|发表新帖 |a href=editbbs.asp?id=修改帖子|a href=delbbs.asp?id=&username=删除帖子   相关回帖：   % while (repeat1_numrows 0) and (not bbsrs3.eof) % 标题： 内容： 回复于： 暂无回复帖！ 5、系统测试5.1系统测试过程系统测试主要完成以下模块的测试：在线听歌，下载歌曲，留言板，投票系统，在线论坛。在线听歌模块的测试：打开网站主页，首先对音乐列表中的音乐进行试听，看看能不能播放网站上的歌曲。然后对几个歌手新出专辑里歌曲进行试听测试。下载歌曲模块的测试：在网站主页点击进入下载歌曲模块，依次对网站提供的下载歌曲的链接进行测试，看看能不能正常下载歌曲。留言板模块的测试：在网站主页点击进入留言板模块，进行留言板功能的测试，填写