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

1、WEB程序设计实验指导书WEB程序设计实验指导南昌大学计算机科学与技术系2009年7月前 言WEB程序设计是计算机专业的一门指导性选修课，主要介绍WEB程序设计的方法和技术。使学生掌握页面设计与制作、WEB编程以及建立动态网站所需的多项技术。WEB程序设计是一门实践性非常强的课程。该实验指导从大纲出发，并结合当前WEB程序设计技术的发展形势，依据循序渐进、由浅入深的规律，指导学生进行实践和操作。通过实践操作环节，让学生巩固并掌握本课程所讲述的程序设计方法和技术，并最终达到能够独立编写WEB程序的能力。通过上机实验，并在实验后完成实验报告，又能进一步加深和拓宽所学知识。本实验指导书指导学生的实践

2、环境为Windows2000，所选的WEB程序开发语言为JSP。本书所提供的参考程序均在以上环境通过调试运行。目 录实验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+J

3、DK+Tomcat。2、 修改WEB服务端口和网站的根路径。三、实验要求1、 掌握JSP程序运行环境配置的基本要求。四、实验环境硬件环境：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:j

4、2sdk1.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 sta

5、tic void main (String args) System.out.println(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:/lo

6、calhost: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、

7、 修改网站的根路径。首先在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、 重新启动Tomca

8、t服务器，在浏览器中输入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、除了目前这

9、种运行环境可以满足JSP程序运行需求，还有什么其它的运行环境？简要地介绍一二。实验2 页面设计与HTML的使用一、实验目的1、 掌握页面设计的基本技巧；2、 掌握使用HTML语言制作静态页面的技术；3、 了解网站的基本建立过程；4、 掌握使用Frontpage或者Dreamweaver制作网页的基本技术。二、实验内容1、简易静态网站页面设计与制作。围绕某一主题设计站点页面，并使用HTML制作。2、框架网页制作（可选）。创建一个目录页面和一个目录型框架页面，该目录框架能够装载上面制作的所有页面。三、实验要求1、 了解站点风格的概念；2、 理解主页、栏目页、导航条、目录框架等术语；3、 熟悉HTM

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

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

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

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

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

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

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

17、样式应用于各个栏目页面。9、 浏览主页、栏目页面，观察结果。六、实验报告要求1、 描述站点色彩风格的设计思想。2、 style.css，css3.htm，cata.css，index.htm中的嵌入式样式表的源码清单。3、 应用样式表后页面浏览的若干截图。七、思考题1、如何统一站点的风格？2、如果外部样式表和嵌入式样式表对某一元素都有样式定义，那么该元素该应用哪种样式？实验4 客户端脚本语言的使用一、实验目的1、 掌握客户端脚本编程的方法；2、 熟悉JavaScript脚本语言的语法；3、 理解事件、浏览器对象层次和DOM模型。二、实验内容1、 验证表单的有效性。制作一个表单，在表单数据提交给

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

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

20、星期五 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、 根据提供的代码

21、调试程序。理解JSP各种元素的使用。三、实验要求1、理解JSP程序的运行机制；2、重点掌握以下JSP元素： HTML注释、隐藏注释、Java注释 page指令、include指令 动作、动作、动作 声明、表达式、Scriptlet四、实验环境硬件环境：PC微机软件环境：Windows 操作系统、JDK1.3+Tomcat、文本编辑器（Notepad、editplus等）或者Frontpage或者Dreamweaver 五、实验步骤1、 在Tomcat安装目录下的webapps子目录下，创建一个jsp子目录，并在jsp子目录下创建一个WEB-INF子目录（注意大小写）。2、 进入jsp子目录，编

22、写一个简单的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、程序运行后的若干截图。七、思考题

23、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

24、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、 制作简易购物

25、车。要求有两个购物页面，可以查看购物车，选购的物品自行定义。三、实验要求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 用户二聊天界面

26、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、实验前需要安装好数据库程序，