WEB程序设计实验指导书.doc

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

1、WEB程序设计实验指导目 录实验1 WEB程序运行环境配置实验2 页面设计与HTML的使用实验3 层叠样式表CSS的应用实验4 客户端脚本语言的使用实验5 WEB编程语言语法基础实验6 内置对象的应用实验7 数据库编程技术实验8 JavaBean的应用实验9 JSP和Servlet实验10 JSP和XML实验1 WEB程序运行环境配置一、实验目的1、 掌握JSP程序运行环境的配置过程；2、 理解JSP程序的运行原理。二、实验内容1、 JSP程序运行环境配置。本实验采用Windows2000 Server+JDK+Tomcat。2、 修改WEB服务端口和网站的根路径。三、实验要求1、 掌握JSP

2、程序运行环境配置的基本要求。四、实验环境硬件环境：PC微机软件环境：Windows XP或者Windows2000操作系统 五、实验步骤1、 进入网址 ，下载windows版本的JDK程序j2sdk-1_4_2_03-windows-i586-p.exe 。2、 安装下载的JDK程序。注意其安装路径，这里假定安装路径为C: j2sdk1.4.2。3、 接下来需要配置一些环境变量。右键单击“我的电脑”，在弹出菜单中选择“属性”，进入“高级”中的“环境变量”；新建一个系统变量JAVA_HOME，其值设为 C:j2sdk1.4.2 ；又新建一个系统变量CLASSPATH，其值设为 .;% JAVA_

3、 HOME % lib ；修改系统变量PATH的值，在原值基础上加上%JAVA_HOME% bin; 。4、 接下来简单地测试一下JDK的安装与环境变量设置是否正确。先编写一个简单的Java程序存放在C:下，然后运行cmd命令，进入系统的命令行方式，在命令行C: 下，用java和javac两个命令编译和运行所编写的Java程序，如果成功运行，说明整个Java运行环境配置正确。附：简单的Java程序Hello.javaimport java.io.*;public class Hello public static void main (String args) System.out.print

4、ln(Hello World); 5、 进入网址http:/jakarta.apache.org/tomcat/index.html，下载其最新的Tomcat程序jakarta-tomcat-5.0.16.exe。6、 安装下载的Tomcat V5.0.16程序。选择一个安装路径，这里假定安装路径为C:Tomcat5.0，其他设置可用安装程序的默认设置。7、 安装完后启动tomcat。启动成功后，任务栏的托盘处可见一含有绿色三角标记的Apache Tomcat图标。8、 在浏览器地址栏输入 http:/localhost:8080，如果看见图1-1的界面，说明JSP运行环境配置成功。9、 准备

5、修改服务端口和网站的根路径。在实际应用中，一般需要更改这两个基本配置，修改这两个配置均在Tomcat安装目录下的conf子目录下的server.xml文件中。修改前请备份好server.xml文件。10、 修改服务端口。用记事本或其他文本编辑器打开server.xml文件，定位到93行，将94行的“8080”修改为需要的端口号，如“8090”。重新启动Tomcat，在浏览器地址栏输入 http:/localhost:8090，可见类似图1-1的界面，说明端口修改成功。图 1-1 Tomcat的欢迎界面11、 修改网站的根路径。首先在C盘创建站点目录jsproot，并在其下创建ROOT子目录，在

6、ROOT目录之下创建WEB-INF子目录，注意，JSP对目录是区分大小写的。12、 然后打开server.xml，找到第215行的根目录的配置信息，其中appBase属性设置了当前的网站目录对应服务器物理路径地址，如图1-2所示。图 1-2 根路径的配置信息13、 将215行的appBase修改成所需的网站根路径，如“C:jsproot”，修改完后如图1-3所示。图 1-3 修改后的根路径信息14、 接下来创建一个1.jsp程序，存放在C:jsprootROOT目录下，其代码如下：15、 重新启动Tomcat服务器，在浏览器中输入http:/localhost:8090，将看到如图1-4所示界

7、面。图 1-4 更改根路径信息后的目录浏览16、 在浏览器中输入http:/localhost:8090/1.jsp，将看到如图1-5所示界面。图 1-5 程序运行结果17、 为以后的实验能顺利进行，恢复备份的server.xml。六、实验报告要求1、需要提供安装过程中设置的数据，如安装路径等。2、安装后修改数据后运行的若干截图。七、思考题1、输入http:/localhost:8080时所看见的页面是哪个程序？输入http:/localhost:8090地址时，访问的又是哪个物理地址的页面？2、除了目前这种运行环境可以满足JSP程序运行需求，还有什么其它的运行环境？简要地介绍一二。实验2 页

8、面设计与HTML的使用一、实验目的1、 掌握页面设计的基本技巧；2、 掌握使用HTML语言制作静态页面的技术；3、 了解网站的基本建立过程；4、 掌握使用Frontpage或者Dreamweaver制作网页的基本技术。二、实验内容1、简易静态网站页面设计与制作。围绕某一主题设计站点页面，并使用HTML制作。2、框架网页制作（可选）。创建一个目录页面和一个目录型框架页面，该目录框架能够装载上面制作的所有页面。三、实验要求1、 了解站点风格的概念；2、 理解主页、栏目页、导航条、目录框架等术语；3、 熟悉HTML的常用标记使用以及框架网页的制作；4、 掌握使用Frontpage或者Dreamwea

9、ver制作网页的基本技术；5、 实验前应该先选定所要创建网站的主题（如：个人网站、自我推荐网站、班级网站、某种专题网站等）和风格；6、 围绕主题和风格，设计站点的主页、栏目及其内容，并且设计出主页和栏目页面的布局；7、 准备好网页制作时所需的资料以及图片等素材。四、实验环境硬件环境：PC微机软件环境：Windows 操作系统、文本编辑器（UltraEdit、EditPlus、Notepad等）或者Frontpage或者Dreamweaver 五、实验步骤1、 选定简易网站的主题和风格，围绕主题和风格，设计好站点主页和栏目页面的布局，准备所需资料和素材。2、 创建目录XXX_yy作为该站点目录（

10、其中XXX为学号，yy为站点主题名字），并在其中创建一个images子目录，且将准备好的图片等素材拷贝到images里。注意，所有目录、页面、素材等名称均不要用中文命名，可采用英文单词或者拼音的命名方式。3、 在XXX_yy站点目录下，按照事先的设计，制作出站点主页index.htm（注：主页中必须有站点的导航条），以及若干个栏目页面（至少两个子栏目），要求所制作的页面，综合起来后必须使用到标题、表格、列表、图片、段落、超链接这些HTML的常用标记。4、 浏览index.htm，点击导航条中的超链接，观察结果。5、 在XXX_yy站点目录下，制作一个目录页面catalog.htm （注：把导航

11、条置于目录页面中）。6、 接下来再制作一个目录型的框架页面main.htm，该框架页面可采用上下结构，也可采用左右结构， 并且该框架页面必须能够装载目录页面、主页和所有的栏目页面。7、 浏览main.htm，点击目录页面中的超链接，观察结果。六、实验报告要求1、 描述站点主题、风格以及栏目设计思想。2、 主页面index.htm、框架页面main.htm（可选）的源码清单。3、 页面浏览的若干截图。七、思考题1、 理解站点风格对页面设计有没有帮助？为什么？2、 制作页面时，按照设计对页面进行布局可以采用什么方法？实验3 层叠样式表CSS的应用一、实验目的1、 掌握页面加载CSS的三种方式；2、

12、 掌握CSS美化页面的技巧；3、 了解运用CSS统一站点风格的技巧；4、 掌握使用Frontpage或者Dreamweaver制作以及应用CSS的技术。二、实验内容1、页面加载CSS的三种方式。通过制作一个网页，其中用到三种CSS的加载方式，来掌握页面应用CSS的技术。2、应用CSS美化网页统一站点风格。制作两种风格的样式表，一种应用到站点主页，一种应用到站点栏目页面。三、实验要求1、 实验前简单设计出网站页面的色彩风格，要求主页使用一种风格，其它子栏目使用另一种风格，并围绕所设定的风格，准备所需的素材；2、 理解外部样式表、嵌入式样式表以及内联式样式的概念；3、 本实验建立在实验二的基础上，

13、必须事先将实验二制作的站点页面准备妥当。四、实验环境硬件环境：PC微机软件环境：Windows 操作系统、文本编辑器（Notepad、editplus等）或者Frontpage或者Dreamweaver 五、实验步骤1、 进入XXX_yy站点目录，创建test子目录。2、 在test子目录下，新建一个页面css3.htm，在该页面中插入一个3行1列的表格，其中表格的第一行输入文字“应用外部样式”，第二行输入文字“应用嵌入式样式”，第三行输入文字“应用内联式样式”。3、 在test子目录下，新建一个外部样式表文件style.css，该样式表中定义一个名为firststyle的类选择符，其样式为字

14、体黑体、24磅、色彩#CC0000、段落格式居中、背景色#ECECEC。将css3.htm页面中表格第一行单元格应用style.css外部样式表中的样式firststyle。4、 接下来在css3.htm页面中加入嵌入式样式表，该样式表中定义一个名为secondstyle的类选择符，其样式可以参照firststyle来自行设计，但注意不能一样。将css3.htm页面中表格第二行的单元格应用嵌入式样式表中的样式secondstyle ；5、 最后，对于css3.htm页面中表格第三行的单元格应用内联式样式，其样式参照前面自行设计，但注意不能一样。图 3-1 css3.htm参考效果图6、 在XX

15、X_yy站点目录下，将准备好的素材拷贝到images子目录。7、 打开站点主页index.htm，在页面中加入嵌入式样式表，样式表中定义的内容必须包括网页的背景色、背景图片（可选）和前景色，表格单元格的各种样式定义，超链接不同状态时的样式，其它样式（如滚动条）依据自己喜好选择，所定义的样式则依据所设计的主页风格，最后根据需要修改部分页面代码，使得页面能够应用这些样式。8、 新建一个外部样式表文件cata.css，该样式表将依据所设计的栏目页面风格来定义样式，样式表所要定义的内容参照上一条中的规定，并最终将该样式应用于各个栏目页面。9、 浏览主页、栏目页面，观察结果。六、实验报告要求1、 描述站

16、点色彩风格的设计思想。2、 style.css，css3.htm，cata.css，index.htm中的嵌入式样式表的源码清单。3、 应用样式表后页面浏览的若干截图。七、思考题1、如何统一站点的风格？2、如果外部样式表和嵌入式样式表对某一元素都有样式定义，那么该元素该应用哪种样式？实验4 客户端脚本语言的使用一、实验目的1、 掌握客户端脚本编程的方法；2、 熟悉JavaScript脚本语言的语法；3、 理解事件、浏览器对象层次和DOM模型。二、实验内容1、 验证表单的有效性。制作一个表单，在表单数据提交给服务器之前，由客户端脚本程序来验证用户数据输入的有效性。2、 给主页添加系统当前日期时间

17、显示（可选）。显示的时间可以按秒跳动。三、实验要求1、 熟悉JavaScript脚本语言语法；2、 理解事件、浏览器对象层次和DOM模型。四、实验环境硬件环境：PC微机软件环境：Windows 操作系统、文本编辑器（Notepad、editplus等）或者Frontpage或者Dreamweaver 五、实验步骤1、 进入XXX_yy目录下的test子目录，创建一个form.htm网页，在该网页中制作一个用户注册表单，表单内容包括用户名、密码、确认密码、电子邮件地址等表单项。2、 在该网页中编写JavaScript脚本程序。该脚本在用户提交表单时运行，用来验证以下内容：用户提交的用户名、密码和

18、电子邮件地址表单项不得为空，用户名长度不能小于6个字符以及大于20个字符，密码和确认密码必须相同，电子邮件地址中应该包含字符。如果出现不满足上述条件的错误，则弹出对话框告知错误信息，否则跳转到表单提交成功的页面。3、 创建表单提交成功的页面success.htm。4、 浏览form.htm页面，往表单输入正确数据以及有错误的数据，观察不同的运行结果。5、 进入XXX_yy目录下，打开index.htm网页，设计在网页的适当位置显示系统当前日期时间。日期星期和时间要求以指定格式显示，如“ 2005年9月2日 星期五 02:30:06 ”。根据上述设定和要求在页面中编写JavaScript脚本程序

19、以及修改页面。注意时间是按秒跳动的。6、 浏览index.htm页面，观察结果。六、实验报告要求1、 form.htm源码，index.htm主页中显示时间的脚本源码清单（可选）。2、 页面浏览的若干截图。七、思考题1、客户端脚本程序的运行机制是怎样的？2、网页嵌入脚本语言的方式有哪三种？并举例说明。实验5 WEB编程语言语法基础一、实验目的1、 理解JSP程序的运行机制；2、 掌握JSP注释、JSP指令、JSP动作和JSP脚本元素等基本语法。二、实验内容1、 显示服务器端和客户端时间。2、 根据提供的代码调试程序。理解JSP各种元素的使用。三、实验要求1、理解JSP程序的运行机制；2、重点掌

20、握以下JSP元素：l HTML注释、隐藏注释、Java注释l page指令、include指令l 动作、动作、动作l 声明、表达式、Scriptlet四、实验环境硬件环境：PC微机软件环境：Windows 操作系统、JDK1.3+Tomcat、文本编辑器（Notepad、editplus等）或者Frontpage或者Dreamweaver 五、实验步骤1、 在Tomcat安装目录下的webapps子目录下，创建一个jsp子目录，并在jsp子目录下创建一个WEB-INF子目录（注意大小写）。2、 进入jsp子目录，编写一个简单的JSP程序cstime.jsp，要求程序中既能显示服务器端时间，也能

21、显示客户端时间。3、 在jsp子目录下，输入下面所附的login.jsp、login_check.jsp、footer.jsp、welcome.jsp 四个文件的源码，然后在浏览器地址栏中输入http:/localhost:8080/jsp/login.jsp，观察浏览页面的结果，并分析login.jsp和login_check.jsp两个程序。六、实验报告要求1、给出cstime.jsp程序代码清单。2、给出login.jsp和login_check.jsp两个程序的分析结果。3、程序运行后的若干截图。七、思考题1、请解释、三者之间的本质区别。2、观察成功登陆后，welcome.jsp页面中

22、是否有乱码，如果有，试着用多种方法解决这个问题，并解释出现乱码的原因以及解决乱码问题的道理。附：程序源代码=程序（login.jsp）= 一个简单的登陆程序 用户登录 Please input your name input type=text name=name value= Please input password =程序（login_check.jsp）= welcome.jsp /else forward-login.jsp if(password.equals(jspuser) % jsp:param name=user value=/jsp:param name=time val

23、ue=/jsp:param name=user value=/ =程序（welcome.jsp）=恭喜你于时刻登陆成功!欢迎你,!=程序（footer.jsp）=WEB程序设计实验指导实验6 内置对象的应用一、实验目的1、 掌握request、response、session、application、out等内置对象的使用。二、实验内容1、 制作简易聊天室。能够实现简单的聊天功能。2、 制作网页计数器。要求相同的窗口内刷新页面访问次数并不增加，并且用图片来显示数字。（注：以上内容1、2中任选一题）3、 制作简易购物车。要求有两个购物页面，可以查看购物车，选购的物品自行定义。三、实验要求1、 熟

24、悉request、response、session、application、out等内置对象；2、 选择制作网页计数器程序需准备数字图片；3、 理解购物车概念。四、实验环境硬件环境：PC微机软件环境：Windows 操作系统、JDK1.3+Tomcat、文本编辑器（Notepad、editplus等）或者Frontpage或者Dreamweaver 五、实验步骤1、 进入jsp子目录，编写简易聊天室的JSP程序，聊天室的需要实现的基本功能参照下图6-1、图6-2。图 6-1 用户一聊天界面图 6-2 用户二聊天界面2、 进入jsp子目录，按照实验内容编写一个网页计数器的JSP程序，计数次数可以

25、用图片来显示。效果参照图6-3。图 6-3 页面计数器3、 进入jsp子目录，按照实验内容编写一个简易购物车程序，需要实现的功能参考图6-4、图6-5、图6-6。图 6-4 购物页面一图 6-5 购物页面二图 6-6 查看购物车六、实验报告要求1、给出编写程序的源代码以及代码注释。2、程序运行后的若干截图，要求截图不能和实验指导书中一样。 七、思考题1、要在不同页面之间共享数据，可以使用什么方法？2、要在不同用户之间共享数据，可以使用什么方法？实验7 数据库编程技术一、实验目的1、掌握JDBC数据库编程技术；2、掌握JDBC常用接口使用。二、实验内容1、将表单提交的数据写入数据库。2、从数据库

26、中读取数据，并在页面中显示。3、从数据库中读取数据，并在页面中分页显示。三、实验要求1、实验前需要安装好数据库程序，并熟悉数据库创建数据表的方法；2、熟悉JDBC技术和使用JDBC连接各种数据库；3、熟悉JDBC常用接口和对象的使用，包括Driver接口、DriverManager、Connection、Statement、ResultSet等类对象。四、实验环境硬件环境：PC微机软件环境：Windows 操作系统、JDK1.3+Tomcat、Access数据库、文本编辑器（Notepad、editplus等）或者Frontpage或者Dreamweaver 五、实验步骤1、 数据库编程首先需

27、要设计表来存放数据，因而应该选定某一主题，再围绕该主题来设计数据库的表字段。主题可以根据实验二所设计的网站来选择，给网站增加一个子栏目或者版块，它需要使用数据库编程技术，如站点调查、专题调查、留言本、同学通讯录、简历信息等；主题也可以独立选择，如用户注册、投票系统、留言本、通讯录、调查等等。（注：不允许选用书目管理这一主题）2、 进入jsp子目录，创建一个access数据库文件，其中创建一张数据表，表字段内容根据选定主题需存储的数据来设计。如，下面选择的主题是书目管理，则创建一个book数据库，表名info。表字段设计参见图7-1。图 7-1 info数据表的设计视图3、 进入控制面板下的管理

28、工具，在数据源（ODBC）中创建该Access数据库的数据源。4、 再进入jsp子目录下，编写程序。首先创建一个静态页面，其中是用于数据输入的表单界面；然后编写将表单提交的数据写入数据库的JSP程序，写入数据库成功后显示“成功添加信息”的字样。5、 运行上述程序，通过表单提交数据，看运行结果。6、 在jsp子目录下，编写一个JSP程序，该程序实现从上面所创建的数据表中读取一条条记录数据，并将数据在页面中一行行显示出来的功能。7、 运行上述程序，看运行结果。8、 进一步修改上面显示数据的程序，使得数据的显示能够分页显示。9、 运行上述程序，看运行结果，并检查运行结果中上一页、下一页、首页、末页的

29、跳转功能，并且可以尝试改变一些分页参数，看不同的分页效果。六、实验报告要求1、给出数据表的设计图。2、写入数据库、读取数据库、分页实现的关键源代码。3、运行程序的若干截图。七、思考题1、JDBC驱动程序的类型有哪几种？实验8 JavaBean的应用一. 实验目的1、掌握JavaBean的基本概念；2、熟悉JavaBean的开发过程；3、掌握JSP应用JavaBean的方法。二实验内容1、用JSP和JavaBean写数据到数据库。用JavaBean重写实验7中第一个实验内容，即使用实验7中所设计的数据库，但本实验要求在JavaBean中实现往数据库添加数据的功能，且为了简化JavaBean中的处

30、理及重用，可以把数据表信息也封装成一个值对象的JavaBean。三. 实验要求1、掌握JavaBean的基本概念；2、熟悉JavaBean的开发过程；3、掌握jsp:useBean、jsp:setProperty、jsp:getProperty等动作元素的用法；4、掌握JDK或者Jcreater等开发工具编译java程序的方法。四、实验环境硬件环境：PC微机软件环境：Windows 操作系统、JDK1.3+Tomcat、Jcreator（可选）、Access数据库、文本编辑器（Notepad、editplus等）或者Frontpage或者Dreamweaver 五、实验步骤1、 进入jsp子目

31、录下的WEB-INF，在该目录下创建一个classes子目录，在classes子目录下编写数据表信息的JavaBean程序，然后运用JDK环境或是JCreator及其它开发工具编译该JavaBean程序，生成class文件。2、 仍在classes子目录下，编写用来执行数据库操作的JavaBean程序，要求完成数据源驱动连接，以及添加数据到数据表中的功能，然后同样运用JDK环境或是JCreator及其它开发工具编译该JavaBean程序，生成class文件。3、 在jsp子目录下，编写JSP程序。首先创建一个JSP程序，是用于用户数据输入的表单界面；然后编写将表单提交的数据写入数据库的JSP程

32、序，写入数据库成功后显示“成功添加信息”的字样，如果出错，该程序将转到出错页面处理程序error.jsp程序显示出错缘由。4、 运行程序，观察结果。六实验报告要求1、要求给出两个JavaBean程序代码，以及写数据的JSP程序代码。2、运行程序的若干截图。七思考题1、什么情况下使用JavaBean？附：书目信息参考程序=用于传值的书目信息的JavaBean程序（BookInfo.java）=package com.book;public class BookInfo /属性 private String bookid; private String bookname; private Stri

33、ng isbn; private String author; /getter方法 public String getBookid() return this.bookid; public String getBookname() return this.bookname; public String getIsbn() return this.isbn; public String getAuthor() return this.author; /setter方法 public void setBookid(String c) this.bookid=c; public void setBo

34、okname(String c) this.bookname=c; public void setIsbn(String c) this.isbn=c; public void setAuthor(String c) this.author=c; =添加书目信息到数据表的JavaBean程序（BookAccess.java）=package com.book;import java.sql.*;public class BookAccessprivate BookInfo bookInfo;private Connection con;/获得数据库连接。public BookAccess()

35、String CLASSFORNAME=sun.jdbc.odbc.JdbcOdbcDriver; String SERVANDDB=jdbc:odbc:book; try Class.forName(CLASSFORNAME);con = DriverManager.getConnection(SERVANDDB);catch(Exception e)e.printStackTrace();/设置待添加的书本信息。public void setBookInfo(BookInfo bookInfo)this.bookInfo=bookInfo; /添加数据public void bookAdd

36、()throws ExceptionString book=insert into info values(?,?,?,?);tryPreparedStatement pstmt=con.prepareStatement(book);pstmt.setString(1,bookInfo.getBookid();pstmt.setString(2,bookInfo.getBookname();pstmt.setString(3,bookInfo.getIsbn();pstmt.setString(4,bookInfo.getAuthor(); pstmt.executeUpdate();catc

37、h(Exception e)e.printStackTrace();throw e;=添加书目信息的JSP程序= 返回添加书目信息界面实验9 JSP和Servlet一、实验目的1、掌握Servlet技术的工作原理；2、熟悉Servlet常用类、接口的使用；3、理解JSP+JavaBean+Servlet的开发模式。二、实验内容1、Servlet实现分页技术。根据提供的留言本源程序代码，分析其代码，并参照代码编写实验7中从数据库中读取数据且分页显示的程序。三、实验要求1、掌握Servlet的工作原理，理解JSP和Servlet的关系；2、掌握Servlet的开发过程；3、熟悉Servlet常用类

38、、接口的用法。四、实验环境硬件环境：PC微机软件环境：Windows 操作系统、JDK1.3+Tomcat、Jcreator（可选）、Access数据库、文本编辑器（Notepad、editplus等）或者Frontpage或者Dreamweaver 五、实验步骤1、 分析留言本程序代码。2、 进入jsp下的WEB-INF下的classes子目录，编写获取数据表数据的servlet程序，并且编译成.class文件。3、 在WEB-INF下部署web.xml文件，进行Servlet的配置。4、 在jsp目录下编写显示数据的JSP页面程序。5、 结合实验8的程序，可以对实验8的程序稍作修改，利用实

39、验8的表单提交程序提交数据，数据添加成功后转至显示数据的JSP程序。6、 打开浏览器，输入正确地址，执行程序，观察结果。六实验报告要求1、编写的Servlet程序和JSP程序源码。2、部署web.xml时Servlet的配置数据。3、运行程序的若干截图。七思考题1、Servlet中系统能否自动解决中文显示问题？如若不能，该如何解决？2、在什么情况下使用Servlet来编程？附：留言本程序参考代码=用于获得留言板信息的Servlet(ViewMessageServlet.java)=package com.jspdev.ch9;import javax.servlet.*;import javax.