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

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

《WEB程序设计实验指导书.docx》由会员分享，可在线阅读，更多相关《WEB程序设计实验指导书.docx（38页珍藏版）》请在冰豆网上搜索。

WEB程序设计实验指导书

WEB程序设计

实验指导

2009年7月

前言

WEB程序设计是计算机专业的一门指导性选修课，主要介绍WEB程序设计的方法和技术。

使学生掌握页面设计与制作、WEB编程以及建立动态网站所需的多项技术。

WEB程序设计是一门实践性非常强的课程。

该实验指导从大纲出发，并结合当前WEB程序设计技术的发展形势，依据循序渐进、由浅入深的规律，指导学生进行实践和操作。

通过实践操作环节，让学生巩固并掌握本课程所讲述的程序设计方法和技术，并最终达到能够独立编写WEB程序的能力。

通过上机实验，并在实验后完成实验报告，又能进一步加深和拓宽所学知识。

本实验指导书指导学生的实践环境为Windows2000，所选的WEB程序开发语言为JSP。

本书所提供的参考程序均在以上环境通过调试运行。

实验1WEB程序运行环境配置

实验2页面设计与HTML的使用

实验3层叠样式表CSS的应用

实验4客户端脚本语言的使用

实验5WEB编程语言语法基础

实验6内置对象的应用

实验7数据库编程技术

实验8JavaBean的应用

实验9JSP和Servlet

实验10JSP和XML

实验1WEB程序运行环境配置

一、实验目的

1、掌握JSP程序运行环境的配置过程；

2、理解JSP程序的运行原理。

二、实验内容

1、JSP程序运行环境配置。

本实验采用Windows+JDK+Tomcat。

2、修改WEB服务端口和网站的根路径。

三、实验要求

1、掌握JSP程序运行环境配置的基本要求。

四、实验环境

硬件环境：

PC微机

软件环境：

Windows操作系统

五、实验步骤

1、进入网址:

，下载windows版本的JDK程序jdk-8u20-windows-i586.exe（64位操作系统下载jdk-8u20-windows-x64.exe）。

2、安装下载的JDK程序。

注意其安装路径，这里假定安装路径为C:

\jdk1.8.0_20。

3、接下来需要配置一些环境变量。

右键单击“我的电脑”，在弹出菜单中选择“属性”，进入“高级”中的“环境变量”；新建一个系统变量JAVA_HOME，其值设为

C:

\jdk1.8.0_20，又新建一个系统变量CLASSPATH，其值设为

.;%JAVA_HOME%\lib；修改系统变量PATH的值，在原值基础上加上%JAVA_HOME%\bin;。

4、接下来简单地测试一下JDK的安装与环境变量设置是否正确。

先编写一个简单的Java程序存放在C:

\下，然后运行cmd命令，进入系统的命令行方式，在命令行C:

\>下，用java和javac两个命令编译和运行所编写的Java程序，如果成功运行，说明整个Java运行环境配置正确。

附：

简单的Java程序Hello.java

importjava.io.*;

publicclassHello{

publicstaticvoidmain（Stringargs[]）{

System.out.println（"HelloWorld"）;

}

}

在cmd命令行下输入：

javacHello.java编译程序

在cmd命令行下输入：

javaHello运行程序

一切正常情况下输下HelloWorld

5、进入网址：

http:

//tomcat.apache.org/download-80.cgi，

下载其最新的Tomcat程序：

32-bitWindowszip（32位非安装版）

64-bitWindowszip（64位非安装版）

32-bit/64-bitWindowsServiceInstaller（32/64位安装版）

6、安装下载的32-bit/64-bitWindowsServiceInstaller程序（非安装版可跳过安装步骤）。

选择一个安装路径，这里假定安装路径为C:

\Tomcat5.0，其他设置可用安装程序的默认设置。

7、安装完后启动tomcat。

启动成功后，任务栏的托盘处可见一含有绿色三角标记的ApacheTomcat图标。

（非安装版解压缩后直接运行bin目录下startup.bat文件即可，关闭运行shutdown.bat）

8、在浏览器地址栏输入http:

//localhost:

8080，如果看见图1-1的界面，说明JSP运行环境配置成功。

9、准备修改服务端口和网站的根路径。

在实际应用中，一般需要更改这两个基本配置，修改这两个配置均在Tomcat安装目录下的conf子目录下的server.xml文件中。

修改前请备份好server.xml文件。

10、修改服务端口。

用记事本或其他文本编辑器打开server.xml文件，定位到：

，将=“8080”修改为需要的端口号，如“8090”。

重新启动Tomcat，在浏览器地址栏输入http:

//localhost:

8090，可见类似图1-1的界面，说明端口修改成功。

图1-1Tomcat的欢迎界面

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:

\jsproot\ROOT目录下，其代码如下：

<%

out.print（“Hello,JSPWorld!

”）;

%>

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-1css3.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网页，设计在网页的适当位置显示系统当前日期时间。

日期星期和时间要求以指定格式显示，如“2005年9月2日星期五02:

30:

06”。

根据上述设定和要求在页面中编写JavaScript脚本程序以及修改页面。

注意时间是按秒跳动的。

6、浏览index.htm页面，观察结果。

六、实验报告要求

1、form.htm源码，index.htm主页中显示时间的脚本源码清单（可选）。

2、页面浏览的若干截图。

七、思考题

1、客户端脚本程序的运行机制是怎样的？

2、网页嵌入脚本语言的方式有哪三种？

并举例说明。

实验5WEB编程语言语法基础

一、实验目的

1、理解JSP程序的运行机制；

2、掌握JSP注释、JSP指令、JSP动作和JSP脚本元素等基本语法。

二、实验内容

1、显示服务器端和客户端时间。

2、根据提供的代码调试程序。

理解JSP各种元素的使用。

三、实验要求

1、理解JSP程序的运行机制；

2、重点掌握以下JSP元素：

●HTML注释、隐藏注释、Java注释

●page指令、include指令

●

include>动作、

forward>动作、

param>动作

●声明、表达式、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、请解释<%@pageinclude%>、<%@include%>、

include>三者之间的本质区别。

2、观察成功登陆后，welcome.jsp页面中是否有乱码，如果有，试着用多种方法解决这个问题，并解释出现乱码的原因以及解决乱码问题的道理。

附：

程序源代码

===程序（login.jsp）===

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">

<%@pagelanguage="java"contentType="text/html;charset=gb2312"%>

<%@pageinfo="一个简单的登陆程序"%>

<%--登陆界面--%>

用户登录