Web应用程序设计上机实验指导.ppt

《Web应用程序设计上机实验指导.ppt》由会员分享，可在线阅读，更多相关《Web应用程序设计上机实验指导.ppt（54页珍藏版）》请在三一办公上搜索。

1、1,Web应用程序设计上机实验指导,2,1 ASP基础上机实验,1.1 IIS 5.0的安装与环境配置1.2 使用ASP Studio2005编写简单的ASP程序1.3 使用Dreamweaver 8编写简单的ASP程序,3,2 超文本标记语言HTML上机实验,2.1 多媒体网页的制作（表格结构）2.2 多媒体网页的制作（框架结构）2.3 注册信息表的制作,4,3 脚本语言VBScript上机实验,3.1 九九乘法表的改进3.2 下拉列表的制作3.3 猜数字游戏,5,4ASP内置对象上机实验,4.1学生信息调查表的制作4.2使用Cookies统计用户访问网站次数 4.3聊天室程序的改进,6,5

2、ASP内置组件上机实验,5.1用户登录和注册页面的制作5.2简单E-shop的制作5.3 访客留言簿的制作5.4文件和文件夹的管理5.5广告显示页面的制作5.6使用PageCounter组件统计网页访问次数,7,6 Web应用程序开发实例上机实验,6.1 在成绩查询系统中添加新功能6.2 在BBS论坛中优化数据库的连接程序 6.3 在新闻发布系统中完善密码控制功能,8,1 ASP基础上机实验,1.1 IIS 5.0的安装与环境配置【实验目的】（1）理解ASP的工作原理。（2）掌握IIS 5.0的安装配置过程。（3）学会用EditPlus编写ASP程序。【实验内容】安装并配置IIS 5.0，设置

3、Web站点。下载并安装EditPlus，并用EditPlus编写例ch2_1.asp程序，保存在C:/SAMPLE。使用IE浏览器运行程序。,9,1.1 IIS 5.0的安装与环境配置,【实验步骤】（1）在Windows XP操作系统上，安装IIS 5.0，并配置Web站点，站点名为“myweb”，主目录为C:/SAMPLE，并创建虚拟目录。测试站点是否配置成功。（2）下载并安装EditPlus编辑器，创建ASP文件，输入例ch2_1.asp代码，将给定的代码保存在目录C:/SAMPLE中。（3）打开IIS，打开浏览器来调试并运行该ASP程序，观察输出的结果,10,1.2 使用ASP Stud

4、io2005编写简单的ASP程序,【实验目的】（1）掌握ASP Studio2005开发ASP程序的过程。（2）掌握用ASP Studio2005编写和调试ASP程序的方法。【实验内容】参照教材的内容，下载并安装ASP Studio2005，输入给定的程序例ch2_1.asp，设置断点，观察变量在执行过程中的变化，然后运行程序观察执行结果。,11,使用ASP Studio2005编写简单的ASP程序,【实验步骤】（1）在Windows XP操作系统上，下载并安装ASP Studio2005。（2）打开ASP Studio2005，在“解决方案”栏中右击，新建一个ASP项目，命名为sample。

5、（3）在sample下添加新文件，输入例ch2_1.asp的内容后保存。（4）单击“运行”按钮，观察输出的结果。,12,1.3 使用Dreamweaver 8编写简单的ASP程序,【实验目的】（1）了解Dreamweaver 8的结构与功能。（2）熟练掌握IIS的站点配置方法。（3）学会用Dreamweaver 8编写ASP程序。【实验内容】打开Dreamweaver 8，并用Dreamweaver 8编写ASP文件，输入例ch2_1.asp的代码，然后用IE浏览器观察程序的执行结果。,13,使用Dreamweaver 8编写简单的ASP程序,【实验步骤】（1）在Windows XP操作系统上

6、，打开IIS，并配置Web站点，站点名为“SAMPLE”，主目录为C:/SAMPLE，测试站点是否配置成功。（2）使用Dreamweaver 8的向导，选择“创建新项目”中的“ASP VBScript”选项。（3）在新建的文件中输入例ch2_1.asp的代码后保存在 C:/SAMPLE路径下，并命名文件。（4）打开IIS服务，打开浏览器测试运行该ASP程序，观察输出的结果。,14,2 超文本标记语言HTML上机实验,2.1 多媒体网页的制作（表格结构）【实验目的】（1）掌握HTML表格标记及属性。（2）掌握多媒体的标记及属性。【实验内容】本实验使用表格作为多媒体网页的结构，要求在表格单元格内有

7、文字和图像等多媒体内容，并且能够播放音乐和影像视频。,15,多媒体网页的制作（表格结构）,【实验步骤】（1）打开EditPlus编辑器，创建一个表格。（2）设置表格线的宽度，增加表格的背景颜色等属性。（3）在各个单元格内分别输入文字和插入图像。（4）在两个单元格内分别嵌入音乐和图像视频的代码，要求事先准备好音乐和视频文件，保存文件。（5）调试程序并打开浏览器运行多媒体网页程序。,16,2.2 多媒体网页的制作（框架结构）,【实验目的】（1）掌握框架集和框架的标记及属性。（2）掌握多媒体的标记及属性。【实验内容】本实验使用框架作为多媒体网页的结构，要求把页面分成4个子窗口，分别在其中输入文字、嵌

8、入图像、音乐和影像视频。,17,多媒体网页的制作（框架结构）,【实验步骤】（1）在Windows XP操作系统上，打开IIS，并配置Web站点，站点名为“SAMPLE”，主目录为C:/SAMPLE，测试站点是否配置成功。（2）使用Dreamweaver 8的向导，选择“创建新项目”中的“ASP VBScript”选项。（3）在新建的文件中输入例ch2_1.asp的代码后保存在 C:/SAMPLE路径下，并命名文件。（4）打开IIS服务，打开浏览器测试运行该ASP程序，观察输出的结果。,18,2.3 注册信息表的制作,【实验目的】（1）掌握HTML表格标记及属性。（2）掌握常用表单控件标记及属性

9、。【实验内容】本实验把几种常用表单输入区域放置在表格单元格中，使各种类型的输入区域排列整齐、美观。具体样式要求如图9-1所示。,19,2.3 注册信息表的制作,20,2.3 注册信息表的制作,【实验步骤】（1）打开EditPlus编辑器，创建一个表格。（2）设置表格线的宽度，增加表格的背景颜色等属性。（3）在表格第2列单元格内分别输入文本框、密码框、文本区、提交按钮和重置按钮，保存文件。（4）调试程序并打开浏览器运行注册信息表程序。,21,9.3 脚本语言VBScript上机实验,3.1 九九乘法表的改进【实验目的】（1）掌握HTML表格标记及属性。（2）掌握VBScript循环语句及嵌套的使

10、用方法。【实验内容】在本书第4章中应用案例“九九乘法表的制作”基础上改进相应程序，要求样式如图9-2所示。具体要求为：去掉表格线，增加表格的背景颜色，三角形显示九九乘法表。,22,3.1 九九乘法表的改进,23,3.1 九九乘法表的改进,【实验步骤】（1）打开EditPlus编辑器，输入相应代码。（2）重新设置表格线的宽度，增加表格的背景颜色。（3）改写循环语句，保存文件。（4）调试程序并打开浏览器运行九九乘法表程序。,24,3.2 下拉列表的制作,【实验目的】（1）掌握HTML表单下拉列表制作的一种方法。（2）掌握VBScript循环语句的使用方法。【实验内容】编写程序，要求使用VBScri

11、pt循环语句制作一个下拉列表，展开后显示1至12月份，具体样式如图9-3所示。,25,3.2 下拉列表的制作,【实验步骤】（1）打开EditPlus编辑器，输入相应代码。（2）设置表单下拉列表及属性。（3）使用循环语句设置下拉列表项，保存文件。（4）调试程序并打开浏览器运行下拉列表程序。,26,下拉列表样式,27,3.3 猜数字游戏,【实验目的】（1）掌握VBScript输入和输出函数。（2）掌握VBScript条件语句和循环语句的使用方法。【实验内容】编写一个客户端脚本程序，要求用户使用VBScript输入函数输入110之间的一个整数，与随机产生的110之间一个随机数进行比较，如果二者相等，

12、则数字猜对了。,28,3.3 猜数字游戏,【实验步骤】（1）打开EditPlus编辑器，编写客户端脚本程序代码。（2）产生110之间的一个随机数x。（3）用户使用VBScript输入函数输入110之间的一个整数y。（4）使用VBScript条件语句和循环语句比较x和y，如果二者相等，则数字猜对了，并使用VBScript输出函数输出相应字符串，保存文件。（5）调试程序并打开浏览器运行猜数字游戏程序。,29,4ASP内置对象上机实验,4.1学生信息调查表的制作【实验目的】（1）掌握ASP控件的使用方法。（2）掌握Response和Request对象及其方法的使用。【实验内容】根据教材中的实例编写一

13、个学生信息调查表应用程序。程序输入详细的学生信息，并能进行验证(如学号等)。,30,4.1学生信息调查表的制作,【实验步骤】（1）打开EditPlus编辑器，输入相应代码。（2）设置表单。（3）编写表单数据处理语句，将程序保存。（4）调试程序并打开浏览器运行学生信息调查表程序。,31,【实验目的】（1）掌握Response对象和Request对象的使用方法。（2）掌握Cookies的使用方法。【实验内容】编写程序，使用Response和Request对象实现对Cookies的输出和读取，并根据Cookies的内容统计当前用户访问本网站的次数。,4.2使用Cookies统计用户访问网站次数,32

14、,使用Cookies统计用户访问网站次数,【实验步骤】（1）打开EditPlus编辑器，输入相应代码。（2）设置需要写入的数据。（3）编写使用Response和Request对象处理Cookies的代码，保存文件。（4）调试程序并打开浏览器运行统计用户访问网站次数程序。,33,4.3聊天室程序的改进,【实验目的】（1）掌握Session对象和Application对象的使用。（2）掌握Global.asa文件的功能和使用方法。【实验内容】对5.8节的聊天室程序进行改进，要求使聊天者可以设置自己使用的字体颜色。,34,聊天室程序的改进,【实验步骤】（1）打开EditPlus编辑器，将要修改的程序

15、写入文件。（2）在Global.asa文件中添加存储颜色的数据结构语句。（3）在chatform.asp文件中添加设置颜色的语句。（4）在chatopinions.asp文件中添加设置文字输出颜色的语句。（5）调试程序并打开浏览器运行改进的聊天室程序。,35,5ASP内置组件上机实验,5.1用户登录和注册页面的制作【实验目的】（1）掌握Connection对象的使用方法。（2）掌握Command对象的使用方法。（3）掌握Recordset对象的使用方法。,36,5.1用户登录和注册页面的制作,【实验内容】编写一个会员登录页面Login.asp，若密码校验正确则将页面导航到Trade.asp页面

16、；若密码错误，则输出密码错误的提示信息“您输入的密码有误”；若数据表中无该用户，则提示用户注册。用户单击会员登录页面中的【马上注册】按钮时，将页面导航到用户注册页面（Register.htm），实现将注册数据写入到UserData 数据表中，注册成功后，输出“注册成功！单击此处登录”的提示信息，并将“单击此处登录”设置为超链接，单击后，链接到会员登录页面（Login.asp）。,37,5.1用户登录和注册页面的制作,【实验步骤】（1）建立Access数据库MyStore.mdb。（2）编写一个会员登录页面，按照实验内容的要求完成密码校验工作。用户单击会员登录页面中的【马上注册】按钮时，将页面导

17、航到用户注册页面（Register.htm），将会员登录页面保存为Login.asp文件。（3）编写用户注册页面，注册成功后，单击“单击此处登录”链接到会员登录页面（Login.asp），将用户注册页面保存为Register.htm文件。,38,5.2简单E-shop的制作,【实验目的】（1）掌握Connection对象的使用方法。（2）掌握Command对象的使用方法。（3）掌握Recordset对象的使用方法。【实验内容】编写上一个实验的Trade.asp页面，用分页显示的方式显示表9-1的字段中的全部数据，每页显示10条记录，要求用宽度为1的表格输出，表格的cellspacing和cel

18、lpadding值均设置为0，bordercolordark颜色设置为“#FFFFFF”，bordercolorlight颜色设置为“#339999”。设计各种条件，对表9-1中的数据进行删除、添加、修改的操作。,39,5.2简单E-shop的制作,【实验步骤】（1）按实验内容的要求用分页显示的方式浏览显示表9-1的字段中的全部数据，将页面保存为Trade.asp文件。（2）设计各种条件，对表9-1中的数据进行删除、添加、修改的操作，并将操作结果分别显示在页面上。,40,5.3 访客留言簿的制作,【实验目的】（1）掌握Connection对象的使用方法。（2）掌握Command对象的使用方法。

19、（3）掌握Recordset对象的使用方法。【实验内容】在教材第6章中应用案例“在线留言簿的制作”基础上改进相应程序，使留言簿采用分页显示的方式，每页仅显示5条留言内容，且每条留言具有不同的背景颜色。在浏览器中浏览此页面时，默认显示的是最新张贴的5条留言内容，来访者若要查看已经存在的其他留言内容，只需单击网页左上方代表页码数字的超链接，即可迅速显示出指定页码的留言内容。,41,5.3 访客留言簿的制作,【实验步骤】（1）建立数据库GuestBook.mdb，包含一个GuestBook数据表，用于存放留言者的姓名、留言内容和张贴时间等信息。（2）设计留言簿页面，用于读取GuestBook数据表中

20、的留言内容，并将这些内容以分页方式显示在浏览器窗口中。,42,5.4文件和文件夹的管理,【实验目的】（1）理解并体会在网页中使用ASP组件的好处。（2）掌握File Access组件的使用方法。【实验内容】编写ASP程序，对文件和文件夹进行管理。【实验步骤】（1）创建文件夹“test”，将其保存在C盘根目录下。在该文件夹下创建一个“Happy.txt”文本文件，并在此文件中写入一行文字“祝大家天天快乐！”。（2）读取“Happy.txt”文件，将文件中的文字内容在网页上显示出来。（3）将(1)中创建的“test”文件夹复制到D盘根目录下，再将原C盘根目录下的“test”文件夹删除。,43,5.

21、5广告显示页面的制作,【实验目的】（1）理解并体会在网页中使用ASP组件的好处。（2）掌握Ad Rotator组件的使用方法。【实验内容】创建一个显示广告的页面。将3副不同的网站标志图片复制到C盘根目录下，在地址栏中输入主页面网址，用户每刷新一次网页，浏览器将显示不同的网站标志。当单击网站标志图片时，浏览器会自动跳转到相关的网站。,44,广告显示页面的制作,【实验步骤】（1）将如图9-4所示的3副图片复制至C:Inetpubwwwroot文件夹中。这3副图片分别为baidu.gif、google.gif、sohu.gif，若图片尺寸不同，会被“旋转调度文件”中所设置的尺寸限制，使图片变形。（2

22、）创建一个名为adrot.txt的文件，它是包含了图9-4中3副图片的全部信息的广告旋转调度文件。同时将adrot.txt文件保存至C:Inetpubwwwroot文件夹中。（3）创建一个名为adrot.asp的文件。它从adrot.txt文件中获取广告，将adrot.asp文件也保存至C:Inetpubwwwroot文件夹中。（4）启动IE浏览器后，在地址栏中输入http:/localhost/adrot.asp并按Enter键，用户每刷新一次网页，浏览器将显示不同的网站标志。（5）单击网页中的网站标志图片，浏览器会自动跳转到相关的网站。,45,网站标志图片效果,46,5.6使用PageCo

23、unter组件统计网页访问次数,【实验目的】（1）理解并体会在网页中使用ASP组件的好处。（2）掌握PageCounter组件的使用方法。【实验内容】创建一个统计网页访问次数的页面。页面上设置一个复选框、一行文字“是否要重置此网页的计数器？”及一个【提交】按钮。单击浏览器中的【刷新】或网页上的【提交】按钮时，网页中显示的“本网页的单击数”之值即会自动增加。若选中网页中的复选框后再单击【提交】按钮，即可使计数器重新设置为0。,47,5.6使用PageCounter组件统计网页访问次数,【实验步骤】（1）创建统计网页访问次数的页面。页面上设置一个【提交】按钮，单击浏览器中的【刷新】或网页上的【提交

24、】按钮时，网页中显示的“本网页的单击数”之值即会自动增加。（2）在(1)中的页面上设置一个复选框、一行文字“是否要重置此网页的计数器？”。若选中网页中的复选框后再单击【提交】按钮，即可使计数器重新设置为0。,48,6 Web应用程序开发实例上机实验,6.1 在成绩查询系统中添加新功能【实验目的】（1）掌握成绩查询系统的设计开发过程。（2）掌握基本的ASP程序的编写方法。（3）学会在已有ASP文件中添加新功能的方法。【实验内容】在IIS中建立站点achieve，调试成功后，按照教材第8章的内容，建立学生成绩查询系统。然后在查询页面，修改代码，添加查询平均成绩的功能。,49,6.1 在成绩查询系统

25、中添加新功能,【实验步骤】（1）在Windows XP操作系统上，打开IIS，并配置Web站点，站点名为“achieve”，主目录为C:/achieve。测试站点是否配置成功。（2）按照教材的内容和步骤，建立数据库achieve.mdb，并设置表achieve，然后输入测试数据。（3）按照教材建立学生成绩查询系统的3个页面文件，并测试运行，观察输出结果。（4）打开search.asp文件，修改相关的代码，使查询后的页面能显示各科的平均成绩。注意在编写代码时，平均成绩要显示在记录的最后一行。（5）调试并观察输出结果。,50,6.2 在BBS论坛中优化数据库的连接程序,【实验目的】（1）掌握BBS

26、论坛的设计开发过程。（2）掌握基本的ASP程序的编写方法。（3）掌握ASP访问数据库的方法。【实验内容】在IIS中建立站点BBS，调试成功后，按照教材第8章的内容，建立BBS论坛。然后建立conn.asp文件，实现对数据库的链接。修改BBS论坛各个ASP程序文件，实现对数据库的操作都通过conn.asp来实现。,51,在BBS论坛中优化数据库的连接程序,【实验步骤】（1）在Windows XP操作系统上，打开IIS，并配置Web站点，站点名为“BBS”，主目录为C:/BBS。测试站点是否配置成功。（2）按照教材的内容和步骤，建立数据库bbs.mdb，并设置表author和bbs，然后输入测试数

27、据。（3）按照教材建立BBS论坛的各个页面文件，并测试观察结果。（4）建立conn.asp文件，用来连链数据库。（5）修改register.asp，bbs.asp，detail.asp，dispbbs.asp中与对数据库操作有关的部分，即不再在各个相关页面进行重复的数据库链接操作，而只是引入conn.asp文件，然后直接连接数据库即可。（6）调试并观察输出结果。（7）比较本实验中的方法同教材中提供的方法的差异及优点。,52,6.3 在新闻发布系统中完善密码控制功能,【实验目的】（1）掌握新闻发布系统的设计开发过程。（2）掌握基本的ASP程序的编写方法。（3）掌握ASP系统通过数据库控制密码访问

28、的方法。【实验内容】在IIS中建立站点news，调试成功后，按照教材的内容，建立新闻发布系统。在数据库中建立表author，输入设定的用户名和密码。在login_article.asp文件中添加输入用户名/密码验证功能，以改变原系统密码修改不方便的缺点。,53,在新闻发布系统中完善密码控制功能,【实验步骤】（1）在Windows XP操作系统上，打开IIS，并配置Web站点，站点名为“news”，主目录为C:/news。测试站点是否配置成功。（2）按照教材的内容和步骤，建立数据库news.mdb，并设置表articles，然后输入测试数据。（3）按照教材建立新闻发布系统的各个页面文件，并测试观察结果。（4）在数据库中建立表author，结构如表9-2所示，输入测试用的用户名和密码值。修改login_article.asp文件，添加页面程序代码，使程序满足如果输入的用户名和密码在author表中存在，则通过验证继续执行下面的程序，否则提示输入用户名或密码失败。（5）调试并观察输出结果。,54,6.3 在新闻发布系统中完善密码控制功能,