WEB程序设计试验参考指导书.doc

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程序运行环境配置。本试验采取Windows Server+JDK+Tomcat。2、 修改WEB服务端口和网站根路径。三、试验要求1、 掌握JSP程序运行环境配置基础要求。四、试验环境硬件环境：PC微机软件环境：Windows XP或Windows操作系统 五、试验步骤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_ 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.println(Hello World); 5、 进入网址，下载其最新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、 准备修改服务端口和网站根路径。在实际应用中，通常需要更改这两个基础配置，修改这两个配置均在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子目录，在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所表示界面。图 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 页面设计和HTML使用一、试验目标1、 掌握页面设计基础技巧；2、 掌握使用HTML语言制作静态页面技术；3、 了解网站基础建立过程；4、 掌握使用Frontpage或Dreamweaver制作网页基础技术。二、试验内容1、简易静态网站页面设计和制作。围绕某一专题设计站点页面，并使用HTML制作。2、框架网页制作（可选）。创建一个目录页面和一个目录型框架页面，该目录框架能够装载上面制作全部页面。三、试验要求1、 了解站点风格概念；2、 了解主页、栏目页、导航条、目录框架等术语；3、 熟悉HTML常见标识使用和框架网页制作；4、 掌握使用Frontpage或Dreamweaver制作网页基础技术；5、 试验前应该先选定所要创建网站专题（如：个人网站、自我推荐网站、班级网站、某种专题网站等）和风格；6、 围绕专题和风格，设计站点主页、栏目及其内容，而且设计出主页和栏目页面布局；7、 准备好网页制作时所需资料和图片等素材。四、试验环境硬件环境：PC微机软件环境：Windows 操作系统、文本编辑器（UltraEdit、EditPlus、Notepad等）或Frontpage或Dreamweaver 五、试验步骤1、 选定简易网站专题和风格，围绕专题和风格，设计好站点主页和栏目页面布局，准备所需资料和素材。2、 创建目录XXX_yy作为该站点目录（其中XXX为学号，yy为站点专题名字），并在其中创建一个images子目录，且将准备好图片等素材拷贝到images里。注意，全部目录、页面、素材等名称均不要用汉字命名，可采取英文单词或拼音命名方法。3、 在XXX_yy站点目录下，根据事先设计，制作出站点主页index.htm（注：主页中必需有站点导航条），和若干个栏目页面（最少两个子栏目），要求所制作页面，综合起来后必需使用到标题、表格、列表、图片、段落、超链接这些HTML常见标识。4、 浏览index.htm，点击导航条中超链接，观察结果。5、 在XXX_yy站点目录下，制作一个目录页面catalog.htm （注：把导航条置于目录页面中）。6、 接下来再制作一个目录型框架页面main.htm，该框架页面可采取上下结构，也可采取左右结构， 而且该框架页面必需能够装载目录页面、主页和全部栏目页面。7、 浏览main.htm，点击目录页面中超链接，观察结果。六、试验汇报要求1、 描述站点专题、风格和栏目设计思想。2、 主页面index.htm、框架页面main.htm（可选）源码清单。3、 页面浏览若干截图。七、思索题1、 了解站点风格对页面设计有没有帮助？为何？2、 制作页面时，根据设计对页面进行布局能够采取什么方法？试验3 层叠样式表CSS应用一、试验目标1、 掌握页面加载CSS三种方法；2、 掌握CSS美化页面技巧；3、 了解利用CSS统一站点风格技巧；4、 掌握使用Frontpage或Dreamweaver制作和应用CSS技术。二、试验内容1、页面加载CSS三种方法。经过制作一个网页，其中用到三种CSS加载方法，来掌握页面应用CSS技术。2、应用CSS美化网页统一站点风格。制作两种风格样式表，一个应用到站点主页，一个应用到站点栏目页面。三、试验要求1、 试验前简单设计出网站页面色彩风格，要求主页使用一个风格，其它子栏目使用另一个风格，并围绕所设定风格，准备所需素材；2、 了解外部样式表、嵌入式样式表和内联式样式概念；3、 本试验建立在试验二基础上，必需事先将试验二制作站点页面准备妥当。四、试验环境硬件环境：PC微机软件环境：Windows 操作系统、文本编辑器（Notepad、editplus等）或Frontpage或Dreamweaver 五、试验步骤1、 进入XXX_yy站点目录，创建test子目录。2、 在test子目录下，新建一个页面css3.htm，在该页面中插入一个3行1列表格，其中表格第一行输入文字“应用外部样式”，第二行输入文字“应用嵌入式样式”，第三行输入文字“应用内联式样式”。3、 在test子目录下，新建一个外部样式表文件style.css，该样式表中定义一个名为firststyle类选择符，其样式为字体黑体、24磅、色彩#CC0000、段落格式居中、背景色#ECECEC。将css3.htm页面中表格第一行单元格应用style.css外部样式表中样式firststyle。4、 接下来在css3.htm页面中加入嵌入式样式表，该样式表中定义一个名为secondstyle类选择符，其样式能够参考firststyle来自行设计，但注意不能一样。将css3.htm页面中表格第二行单元格应用嵌入式样式表中样式secondstyle ；5、 最终，对于css3.htm页面中表格第三行单元格应用内联式样式，其样式参考前面自行设计，但注意不能一样。图 3-1 css3.htm参考效果图6、 在XXX_yy站点目录下，将准备好素材拷贝到images子目录。7、 打开站点主页index.htm，在页面中加入嵌入式样式表，样式表中定义内容必需包含网页背景色、背景图片（可选）和前景色，表格单元格多种样式定义，超链接不一样状态时样式，其它样式（如滚动条）依据自己喜好选择，所定义样式则依据所设计主页风格，最终依据需要修改部分页面代码，使得页面能够应用这些样式。8、 新建一个外部样式表文件cata.css，该样式表将依据所设计栏目页面风格来定义样式，样式表所要定义内容参考上一条中要求，并最终将该样式应用于各个栏目页面。9、 浏览主页、栏目页面，观察结果。六、试验汇报要求1、 描述站点色彩风格设计思想。2、 style.css，css3.htm，cata.css，index.htm中嵌入式样式表源码清单。3、 应用样式表后页面浏览若干截图。七、思索题1、怎样统一站点风格？2、假如外部样式表和嵌入式样式表对某一元素全部有样式定义，那么该元素该应用哪种样式？试验4 用户端脚本语言使用一、试验目标1、 掌握用户端脚本编程方法；2、 熟悉JavaScript脚本语言语法；3、 了解事件、浏览器对象层次和DOM模型。二、试验内容1、 验证表单有效性。制作一个表单，在表单数据提交给服务器之前，由用户端脚本程序来验证用户数据输入有效性。2、 给主页添加系统目前日期时间显示（可选）。显示时间能够按秒跳动。三、试验要求1、 熟悉JavaScript脚本语言语法；2、 了解事件、浏览器对象层次和DOM模型。四、试验环境硬件环境：PC微机软件环境：Windows 操作系统、文本编辑器（Notepad、editplus等）或Frontpage或Dreamweaver 五、试验步骤1、 进入XXX_yy目录下test子目录，创建一个form.htm网页，在该网页中制作一个用户注册表单，表单内容包含用户名、密码、确定密码、电子邮件地址等表单项。2、 在该网页中编写JavaScript脚本程序。该脚本在用户提交表单时运行，用来验证以下内容：用户提交用户名、密码和电子邮件地址表单项不得为空，用户名长度不能小于6个字符和大于20个字符，密码和确定密码必需相同，电子邮件地址中应该包含字符。假如出现不满足上述条件错误，则弹出对话框通知错误信息，不然跳转到表单提交成功页面。3、 创建表单提交成功页面success.htm。4、 浏览form.htm页面，往表单输入正确数据和有错误数据，观察不一样运行结果。5、 进入XXX_yy目录下，打开index.htm网页，设计在网页合适位置显示系统目前日期时间。日期星期和时间要求以指定格式显示，如“ 9月2日 星期五 02:30:06 ”。依据上述设定和要求在页面中编写JavaScript脚本程序和修改页面。注意时间是按秒跳动。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、关键掌握以下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，要求程序中既能显示服务器端时间，也能显示用户端时间。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页面中是否有乱码，假如有，试着用多个方法处理这个问题，并解释出现乱码原因和处理乱码问题道理。附：程序源代码=程序（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 value=/jsp:param name=user value=/ =程序（welcome.jsp）=恭喜你于时刻登陆成功!欢迎你,!=程序（footer.jsp）=WEB程序设计试验指导试验6 内置对象应用一、试验目标1、 掌握request、response、session、application、out等内置对象使用。二、试验内容1、 制作简易聊天室。能够实现简单聊天功效。2、 制作网页计数器。要求相同窗口内刷新页面访问次数并不增加，而且用图片来显示数字。（注：以上内容1、2中任选一题）3、 制作简易购物车。要求有两个购物页面，能够查看购物车，选购物品自行定义。三、试验要求1、 熟悉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程序，计数次数能够用图片来显示。效果参考图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、从数据库中读取数据，并在页面中显示。3、从数据库中读取数据，并在页面中分页显示。三、试验要求1、试验前需要安装好数据库程序，并熟悉数据库创建数据表方法；2、熟悉JDBC技术和使用JDBC连接多种数据库；3、熟悉JDBC常见接口和对象使用，包含Driver接口、DriverManager、Connection、Statement、ResultSet等类对象。四、试验环境硬件环境：PC微机软件环境：Windows 操作系统、JDK1.3+Tomcat、Access数据库、文本编辑器（Notepad、editplus等）或Frontpage或Dreamweaver 五、试验步骤1、 数据库编程首先需要设计表来存放数据，所以应该选定某一专题，再围绕该专题来设计数据库表字段。专题能够依据试验二所设计网站来选择，给网站增加一个子栏目或版块，它需要使用数据库编程技术，如站点调查、专题调查、留言本、同学通讯录、简历信息等；专题也能够独立选择，如用户注册、投票系统、留言本、通讯录、调查等等。（注：不许可选择书目管理这一专题）2、 进入jsp子目录，创建一个access数据库文件，其中创建一张数据表，表字段内容依据选定专题需存放数据来设计。如，下面选择专题是书目管理，则创建一个book数据库，表名info。表字段设计参见图7-1。图 7-1 info数据表设计视图3、 进入控制面板下管理工具，在数据源（ODBC）中创建该Access数据库数据源。4、 再进入jsp子目录下，编写程序。首先创建一个静态页面，其中是用于数据输入表单界面；然后编写将表单提交数据写入数据库JSP程序，写入数据库成功后显示“成功添加信息”字样。5、 运行上述程序，经过表单提交数据，看运行结果。6、 在jsp子目录下，编写一个JSP程序，该程序实现从上面所创建数据表中读取一条条统计数据，并将数据在页面中一行行显示出来功效。7、 运行上述程序，看运行结果。8、 深入修改上面显示数据程序，使得数据显示能够分页显示。9、 运行上述程序，看运行结果，并检验运行结果中上一页、下一页、首页、末页跳转功效，而且能够尝试改变部分分页参数，看不一样分页效果。六、试验汇报要求1、给出数据表设计图。2、写入数据库、读取数据库、分页实现关键源代码。3、运行程序若干截图。七、思索题1、JDBC驱动程序类型有哪多个？试验8 JavaBean应用一. 试验目标1、掌握JavaBean基础概念；2、熟悉JavaBean开发过程；3、掌握JSP应用JavaBean方法。二试验内容1、用JSP和JavaBean写数据到数据库。用JavaBean重写试验7中第一个试验内容，即使用试验7中所设计数据库，但本试验要求在JavaBean中实现往数据库添加数据功效，且为了简化JavaBean中处理及重用，能够把数据表信息也封装成一个值对象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子目录下WEB-INF，在该目录下创建一个classes子目录，在classes子目录下编写数据表信息JavaBean程序，然后利用JDK环境或是JCreator及其它开发工具编译该JavaBean程序，生成class文件。2、 仍在classes子目录下，编写用来实施数据库操作JavaBean程序，要求完成数据源驱动连接，和添加数据到数据表中功效，然后一样利用JDK环境或是JCreator及其它开发工具编译该JavaBean程序，生成class文件。3、 在jsp子目录下，编写JSP程序。首先创建一个JSP程序，是用于用户数据输入表单界面；然后编写将表单提交数据写入数据库JSP程序，写入数据库成功后显示“成功添加信息”字样，假如犯错，该程序将转到犯错页面处理程序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 String 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 setBookname(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() 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()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();catch(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常见类、接口使用方法。四、试验环境硬件环境：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程序稍作修改，利用试验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.servlet.http.*;import com.microsoft.jdbc.sqlserver.SQLServerDriver;import java.sql.*;import java.util.*;import java.io.*;public class ViewMessageServlet extends HttpServletprivate Connection con;/* *接收GET请求，实施数据库操作，保留结果到request中， *把视图派发到下一个页面 */public void doGet(HttpServletRequest request, HttpServletResponse resp