JSP动态网站设计案例教程（第2版）

JSP动态网站设计案例教程

(第2版)网上花店任务1.项目开发环境的搭建2.系统需求分析、业务流程分析3.页面设计+数据库设计4.前台功能：用户登录、公告栏、

鲜花推荐、个人信息中心、

购物车、查找、用户留言等5.后台功能：鲜花入库、编辑、高级查找

购物车管理、留言管理等项目技能要求：搭建JSP开发环境和虚拟目录的设置。Web站点的建立，测试JSTL是否正常工作。理解JSP页面运行机制。前台设计（HTML，CSS+DIV）数据库基本SQL语句JSP2.0中自定义标记……

项目闯关第一关

搭建JSP开发环境名词解释Web技术Web是一种典型的分布式应用结构，是一种基于超链接的超文本系统，可以提供多种多样的媒体信息，常被称作超媒体环境信息网。Web主要功能信息交互Web技术客户端技术和服务器端技术名词解释客户端技术HTML语言、JavaApplets、脚本程序、CSS、DHTML、插件技术以及VRML技术服务器端技术CGI、PHP、ASP、ASP.NETServlet和JSP技术名词解释WWWWWW俗称“万维网”，可以让Web用户通过浏览器访问、浏览Web服务器上的页面。三要素：统一资源定位：资源访问方式：超链接：名词解释网站网站由众多不同内容的网页文档构成，这些网页通过超链接联系在一起。常见网站搜狐网易新浪名词解释HomePageHomePage称为首页或主页，通常为用户访问网站时首先看到的网页。规范：HomePage通常以index或default命名后缀为htm、html、asp、jsp和php等名词解释网页网页是网站的基本信息单位，是WWW的基本文档。网页通常由文字、图片、动画、声音等多种媒体信息以及链接组成，通过超链接实现与其他网页或网站的关联和跳转。基本知识网页分类可交互性角度：静态网页和动态网页静态网页只有HTML标记，没诸如JSP、ASP等程序代码，无需经过服务器的编译动态网页不仅含有HTML标记还有诸如ASP、PHP、JSP等程序代码…..基本原理网页工作原理静态网页的工作原理动态页面的工作原理JSP历史简介JSP：JavaServerPages纯Java平台的技术，主要用来产生动态网页JSP网页在传统的静态HTML页面中中加入Java程序片段和JSP标记JSP网页以“.jsp”后缀为扩展名JSP历史简介JSP与ASP、ASP+的比较1．平台和服务器的弹性2．语法结构3．开放的开发环境4．语法的延展性JSTL简介JSP标准标记库JSPStandardTagLibrary，简称JSTL由JCP(JavaCommunityProcess)制定的JSP标准标记库规范给JavaWeb开发人员提供一个标准通用的标记函数库。学好标记库就是重中之重JSTL简介JSP标准标记库（1）核心标记库（2）118N格式标记库（3）函数标记库（4）SQL标记库（5）XML标记库学完：期末能讲出这几个库的功能即可JSTL简介JSP标准标记库（1）核心标记库（2）118N格式标记库（3）函数标记库（4）SQL标记库（5）XML标记库学完：期末能讲出这几个库的功能即可JSP2.0的特点EL表达式EL表达式有${}和#{}两种语法格式在本教程中EL表达式统一采用${}运行环境的变化在Web程序描述文件web.xml中需要遵循xmlschema格式JSP2.0的特点表达式语言EL的引入SimpleTag的引入定义实现简单标记的接口，仅仅需要一个简单的doTag()方法JSPfragment的应用基本特点是提供动态属性，使得JSP处理其标记体时是可以被改变的其本质是一段可以重复使用的JSP实战技能【案例1】开发环境的配置[示范]网址可能存在变动，需掌握方法即可机房软件已经安装好，需要学生检查软件配置是否正确。实战技能【案例1】开发环境的配置[示范]课外作业☆下载和安装JDK。☆下载和安装Tomcat应用服务器。☆下载JSTL，进行安装和配置。技能1：下载和安装JDKJDK（JavaSEDevelopmentKit）Sun提供的Java开发工具和运行环境。从Sun公司网站免费下载。下载网址为：http://java.sun.com/javase/downloads/index.jsp学生必须网上自行下载[教师示范安装]如果只使用Tomcat而不进行Java程序的开发可以选择只安装JRE，不安装JDK。技能2：下载和安装Tomcat运行JSP的条件：必须有一个支持JSP的Web服务器软件，通常称为JSP容器。目前可用的Web服务器软件：有Apache的Tomcat、Sun的Glassfish、IBM的WebSphere和BEA的WebLogic等，其中WebSphere和WebLogic需要修改相应的配置文件，对于初学者存在一定的困难。技能2：JSP容器:-TomcatApache的Tomcat：目前使用最为广泛免费提供给开发人员使用。下载网址为：。学生必须网上自行下载[教师示范安装]并讲解参数的设置技能3：测试Tomcat在JDK和Tomcat成功安装后，测试Tomcat是否正常工作。测试步骤如下。（1）启动Tomcat服务。（2）在浏览器中输入如下网址： http://localhost:8080/，或:8080/回车打开“Tomcat默认首页”，正常页面显示为：技能测试：Tomcat默认首页技能4:下载和配置JSTL标记库目前，Tomcat6.0Web服务器中：不自动包含对JSTL的支持在使用JSTL之前需要自行下载JSTL。ApacheJakarta项目作为JSTL标准的实现，其JSTL实现的具体下载网址为：http:///dist/jakarta/taglibs/standard/。在Oracle的JSTL页面：/products/jsp/jstl/既提供JSTL规范文档，也提供相关实现的下载。JSTL下载内容学生需要自行下载教师展示下载内容jakartataglibs目录结构

Lib目录内容lib目录必须包含JSTL实现库jstl.jar和standard.jartld目录tld目录必须包含所有标记库描述文件项目假定Web根目录Web应用存放在“E:\qlyx-flower”目录下。使用JSTL前提，将lib目录和tld目录复制到Web应用程序目录下新创建的WEB-INF子目录其中，WEB-INF必须大写。测试JSTL配置WEB-INF目录和web.xml文件之后，就可以在该Web应用的JSP页面中使用JSTL标记。JSTL的测试由教师示范

数据库软件SQLServer2005鉴于高校通常采用：数据库软件MicrosoftSQLServer2005简要介绍SQL2005的安装、配置等建议：若有基础，也可以安装MySQL数据库若基础薄弱，还可以使用ACCESS数据库请您指教

闯关第二关第2关动手体验

第一个JSP2.1程序过关要求1.对运行环境进行测试2.设置虚拟目录3.使用Dreamweaver进行站点建立4.简单JSP应用构造5.掌握JSP应用程序开发具体过程6.理解工作原理，页面运行机制学生注意本章理论必须理解本章技术必须掌握便于一致性将AdobeDreamweaverCS4简称为DWCS4程序代码统一使用显示行号的方法进行标识和讲解。教学内容2.1【案例2】经典“HelloWorld”程序2.2【案例3】虚拟目录的设置2.3【案例4】建立Dreamweaver站点2.4【案例5】测试JSTL是否正常工作2.5【案例6】JSP页面运行机制【案例2】经典“HelloWorld”程序任务解读输出“HelloWorld”欢迎致辞的JSP页面，包含如下功能。☆包含有欢迎致辞“HelloWorld”。☆简单的中文输出。☆简单的算术运算。上机实操[师生动手]1、创建HelloWorld.jsp页面记住一定要输入JSP文件的扩展名“.jsp”

2．放置HelloWorld.jsp页面本教程假定Tomcat应用程序安装目录如下。C:\ProgramFiles\ApacheSoftwareFoundation\Tomcat6.0，将HelloWorld.jsp页面复制到“..\Tomcat6.0\webapps\ROOT”目录下，上机实操[师生动手]3．访问HelloWorld.jsp页面读者在保证Tomcat应用程序启动的情况下，打开任意浏览器，在Web浏览器地址栏中输入“http://localhost:8080/HelloWorld.jsp”

提示：教师示范+强化学生实践的过程考核[案例2]之技能点必备技能：★使用记事本编写简单的JSP页面。★学习正确访问JSP页面的方法。★学习和掌握标记符号${…}的运用。【案例2】之知识点1．JSP页面的创建2．JSP基本规范扩展名.jsp空白可以使得代码易于阅读注释两个作用：为代码作注释和去掉代码段。JSP页面有三种不同的注释方法：HTML格式注释、JSP代码注释和Java语言代码注释。【案例2】之知识点3．EL表达式${…}EL表达式${…}使用标记符号${…}区别于普通的HTML内容JSP容器Tomcat会自动计算标记内表达式的值。4．基本工作原理执行“查看”→“源文件”命令可以看到浏览器实际接收的HTML数据

第2关通关

第一个JSP2.1程序第3关布阵

虚拟目录【案例3】虚拟目录质疑【案例2】中考虑安全性了吗？【案例3】虚拟目录比如假定Tomcat应用程序安装在C盘但是C盘空间紧张【案例3】虚拟目录比如校园机房电脑设置硬盘保护卡网站设置保存在C盘一旦出现故障或计算机重新启动，学生的实验成果将付诸东流。【案例3】虚拟目录比如众所周知：Tomcat中默认存储在webapps\ROOT目录信息发在webapps\ROOT目录数据信息被黑客剽窃的风险数据被修改、感染病毒甚至被删除等安全隐患第3关预防安全隐患

唯有虚拟目录[案例3]任务解读对象：编好的HelloWorld.jsp页面任务：存放于“e:\xxtchenzs”目录目标：Helloworld.jsp页面仍能正常访问[案例3]实验结果观察【表象】对比图2-1-1和图2-2-2[教材]发现：程序名字相同：HelloWorld.jsp程序内容相同：内容一致揭示【奥秘】本质区别：图2-1-1浏览器URL中的地址为“http://localhost:8080/HelloWorld.jsp”，图2-2-2浏览器URL的地址为http://localhost:8080/jsp2.1/chp1/HelloWorld.jsp设计过程[强调实践，教师示范]1．创建物理目录“E:\xxtchenzs”2．测试页面运行效果未进行前期设置，会出错，让学生体验3．设置虚拟目录初学，建议学生拷贝，保持同步性[案例3]之技能识别物理目录和虚拟目录掌握虚拟目录的设置方法。熟悉server.xml中虚拟目录设置的含义。[案例3]之知识点1.JSP基本语法严格区分大小写2.虚拟目录的设置搞清楚什么是虚拟路径记得重新启动Tomcat才能生效第3关必杀技

虚拟目录搞定？！第4关宫殿选址

站点构建

任务解读任务：建立一个Web站点，包含有HTML页面、JSP页面、图片、声音和视频等，站点名：qlyxflower工具：DWCS4目标：站点策划、部署开发环境设计过程[教师示范，学生实践]1．创建物理目录“E:\flower”2．虚拟目录的设置“conf/server.xml”配置文件，拷贝语句3．Dreamweaver站点设置

设计过程[教师示范，学生实践]DWCS4站点设置在站点设置（2）故意输入”JSP2.0”,很显然与拷贝的虚拟目录设置语句中的“JSP2.1”不符合加上纠错发现的原因，常见错误须警惕。纠错：P33页的第7行中为：JSP2.1。

【案例4】之技能熟练使用DWCS4进行站点创建。强化对文件分类管理的能力。强化Web站点结构策划的能力。【案例4】之知识点1．HTTP网络传输协议HTTP是网络传输协议，指明浏览器和Web服务器之间传输数据遵循的是标准通信协议是超文本传输协议（HypertextTransferProtocol，HTTP）2．物理目录、虚拟目录、站点在案例中设置过程，分别识别这3个概念3．浏览站点根目录的URL4．远程服务器第4关入门技能

站点构建搞定？！第5关必备技能

测试JSTL是否工作【案例5】任务解读任务：学习使用使用JSTL标记库目标：启动测试编写测试小程序使用JSTL标记的JSP程序Test.jsp[教师示范，学生实践]1．创建并配置物理目录2．配置虚拟目录3．创建站点qlyxflower4．创建和运行Test.jsp

示范过程中讲解“技能”【见下页总结】【案例】之技能1．DWCS4代码视窗2．Page指令3．taglib指令要使用JSTL标记库中的标记，必须在JSP页面的开始使用Taglib指令指定使用的标记库4．JSTL标记<c:out>5．JSTL标记<c:set>6．EL表达式（ExpressionLanguage）第5关必备技能

直至JSTL正常工作第6关拜师

深入原理【案例6】JSP页面运行机制如何编写一个简单的JSP程序。☆了解用户访问JSP页面时，服务器端的处理过程☆了解应用服务器Tomcat的目录结构及其作用。☆了解JSP页面执行流程。重在讲授1．Tomcat的目录结构2．Tomcat目录的作用3．Tomcat的work目录4．JSP页面执行流程需要理解、掌握、能阐述[教师示范+测验学生]1．Tomcat默认Web服务目录2．Tomcat中创建Web目录3．Tomcat中修改服务端口号4．Tomcat中修改默认的Web服务目录5．JSP容器6．转换阶段（TP）和执行阶段（EP）7．Web组件及其关系【案例6】之技能★熟悉Tomcat的目录结构★熟悉Tomcat的目录作用★了解JSP页面的执行流程★找到JSP页面转译和编译后的Servlet源码第6关拜师

开始学艺！请您指教第7关清凉奕霞网上花店的

分析与设计

第7关分析研究对象

假如你是购买鲜花的用户

你期望系统能提供什么功能

第7关分析研究对象

假如你是经营鲜花的商户

你期望系统应具备什么功能

系统可行性好想法，技术是否可以实现功能完备，经济是否满足系统开发准备：见表3-1-1系统基本功能教师引导学生讨论教师补充系统使用模式C/SB/S系统业务流程业务流程概念业务流程图中的符号网站业务流程引导学生讨论，然后画出业务流程图系统需求分析不同的使用人员网络购买鲜花的用户花店工作人员花店后台管理员网店部署及使用感兴趣自主学习第7关花店的分析与设计

码农多年后

蜕变为系统分析师

第8关“清凉奕霞网上花店”

之系统设计

系统设计原则实用性先进性合理性规范性经济性可维护性系统功能设计界面设计百花齐放百家争鸣为了教学进度大家全部按照教材的界面设计在自主项目，大家自定义客户端界面设计logo公司Banner首页花语精品推荐新品上市鲜花查询我的订单购物车客户留言公告栏畅销鲜花栏目默认页为畅销推荐商品，若用户为登录用户，则显示购物车用户登录鲜花搜索新品鲜花栏目默认页为新品推荐商品，若用户为登录用户，则显示购物车网站信息、联系方式、客户服务后台界面设计logo公司banner鲜花管理用户管理订单管理职工管理留言管理.默认显示鲜花管理页面，根据管理员选择菜单相应改变网站信息、联系方式、客户服务数据库设计提问+考核“数据库”课程哪些数据表？业务流程图提示：数据表仍可增加系统体验教师演示即可

第8关系统设计

掌握本关技能

毕业设计论文不发愁

请您指教第9关清凉奕霞网上花店

首页设计

需要技能会用DWCS4不会也没有关系，只要你认真跟老师做就OK会基本HTML会基本CSSJavaScript不会也没有关系现学现用即可客户端首页效果效果如图4-1-1教师在第8关展示过鉴于DIV+CSS可能存在难度采用表格布局方式实现客户端首页效果效果如图4-1-1教师在第8关展示过鉴于DIV+CSS可能存在难度采用表格布局方式实现客户端首页设计教师示范视频效果最佳素材采用教程提供素材，统一教学教师指导开发目录下子目录及作用客户端首页设计前期准备创建物理目录配置虚拟目录创建站点qlyxflower创建首页如何使用DWCS4实现代码部分可参考源代码客户端首页美化样式表写代码导入到页面运行+调试第9关首页设计

冲关成功

掌握表格布局技术

第10关清凉奕霞网上花店

管理员登陆页面页面效果页面设计教师示范建议清空初始页面所有代码然后是代码首行然后是HTML基本结构然后代码不断的加入第10关管理员登陆页面

本关技能

代码从无到有第11关后台管理页面

页面设计教师示范建议清空初始页面所有代码然后是代码首行然后是HTML基本结构然后代码不断的加入第11关后台管理页面

技能强化请您指教第12关清凉奕霞网上花店

鲜花显示

需要技能会SQLServer忘记也没关系语句可随时查会JSP2.0技术不会也没关系现学现用即可SQLServer安装实验室安装好自己电脑-练去创建数据库名称：qlyxflowerSQLServer安装实验室安装好自己电脑-练去创建数据库名称：qlyxflower创建数据表教师示范1-2个即可提示：图5-1-17有误其余的学生按照教程自行创建一定要注意字段名称的大小写要不然排查错误很困难第12关鲜花显示

之数据表

基本技能之考核

第13关鲜花显示

之SQL语句

查询分析器-【教师示范】SQL-SelectSQL-INSERTINTOSQL-UPDATESQL-DELETE 提示此处代码保存拷贝自己的东东更有成就第13关鲜花显示

之SQL语句

SQL技能之考核

第14关鲜花显示

数据准备-【教师示范】数据准备数据表名-flowerproduct输入数据可以随意，但flowerid最好班级统一数量最好在10条左右，目的为后续分页做准备页面设计-【教师示范】模块开发conn.jsp学生经常错误，可拷贝给学生Maincss.ccc在原有基础上修改即可top.jsp和bottom.jsp拷贝页面设计-【教师示范】教学建议项目开发属于迭代螺旋式上升教学（1）每次将原有文件夹另存别名（2）新建文件夹并拷贝原有内容此举优势便于排查错误页面设计-【教师示范】后台首页adminindex.jsp添加代码77-137行教学建议师生DW设置同样大小的字体保证行数一致，便于多媒体教学便于排查错误页面设计-【教师示范】本关特殊采用独立功能的鲜花显示：simpledisplay.jsp不在原来首页中直接完成教学建议先保证单独鲜花显示成功再嵌套近原来的页面中页面设计-【教师示范】本关特殊本关技能非常重要必须保证人人掌握本关可以多做几遍不仅要掌握而且要熟练还需要理解第14关鲜花显示

Select重要技能之应用

你，必须会

你，必须会

你，必须会

第15关鲜花显示

之有序显示

页面设计-【教师示范】本关超级简单maxRows属性重点复习SELECT子句尝试引导使用COUNT(*)统计鲜花条目总数第15关鲜花显示

Select重要技能之应用

你，必须会

你，必须会

你，必须会

请您指教第6章清凉奕霞网上花店

鲜花管理

需要技能会SQLServer忘记也没关系语句可随时查会JSP2.0技术不会也没关系现学现用即可第16关清凉奕霞鲜花显示之分页浏览

数据准备每页显示多少条通常建议10条左右不同的机构要求不同数据量不够的同学请补充至少需要三页的量代码增加分页初始化必须理解具体含义分页导航代码本关技能很重要第16关鲜花显示

之分页显示

重要技能

你，一定要会

你，一定要会

你，一定要会

第17关鲜花管理

之鲜花入库

页面设计-【教师示范】代码超级简单所见即所得拖拽控件即可检验为了检验所添加信息是否成功显示时按照添加时间降序排列页面设计-【教师示范】Session语句根据进度安排可以暂时不予讲解待讲完用户登录后再增加即可页面设计-【教师示范】知识点理解有一定难度使用遵从规范即可知识点需要理解

第17关鲜花管理

之鲜花入库

本关技能

属于关键技能

第18关鲜花管理

之鲜花删除

数据准备-【教师示范】增加待删除记录为了数据显示一致增加一条待删除鲜花记录，随意便于教学将多表链接暂时取消即：鲜花类别直接显示数字即可页面设计-【教师示范】删除增加超链接删除页面flowerdel.jsp设计如图6-3-4特点主要增加了对异常的处理第18关鲜花管理

鲜花删除之应用

简单，能会

第19关鲜花管理

之鲜花编辑

页面设计-【教师示范】本关有难度首先要读取本行记录对读取的内容进行修改再保存至数据库页面设计-【教师示范】操作步骤给“修改”增加超链接对读取的内容进行修改再保存至数据库讲解Session 简要的安全性防范第19关鲜花管理

鲜花信息编辑之应用

你，必须会

你，必须会

你，必须会

请您指教第7章清凉奕霞网上花店

前台管理

需要技能应用JSP2.0技术几乎前面闯关时学过主要是应用第20关清凉奕霞网上花店之用户登录

闯关技能SessionJavaScript脚本登陆-效果【教师演示】或成功登陆见图7-1-2（教程）用户个人信息中心或失败被拒提示失败见图7-1-3（教程）需要重新登陆设计过程【教师示范】设计页面Soeasy类似于管理员登陆页面编写源代码先JS脚本在添加判断代码成功页面+代码失败页面+代码总结提高【教师讲解】本关要点JS基础JS本代码的具体含义JS函数的调用查询语句的关键点Session强化提示：关键处需要教师当堂书板书板书：可采用Word，但需要当堂写第20关前台管理

之用户登录

基本技能

系统必备

你，这总得会吧

第21关前台管理

之公告栏

技能要求HTML跑马灯页面设计-【教师示范】输入数据数据表board公告栏页面declare.jsp编写源代码定位要准备代码增加-运行-在增加-在运行……技能总结-【教师讲解+示范】Maqueen语句再用简单的示例仔细讲解每个属性属性讲一个，板书一个页面设计-【教师示范】知识点理解有一定难度使用遵从规范即可知识点需要理解

第21关前台管理

之公告栏

本关技能

属于生存技能

第22关前台管理

之花语寓意

数据准备-【教师示范】鲜花及寓意学生自行搜素或直接用素材页面设计-【教师示范】页面设计florid.jsp源码编写引导学生如何定位最重要合理的SQL语句合理的ForEach技能总结-【教师讲解】图文混排技能任意B/S系统全有第22关前台管理

图文混排之应用

简单，必会

第23关前台管理

之前台注册

之个人信息中心

前台注册-【教师示范】本关简单就是添加入库页面设计简单，学生自主完成代码教师引导即可个人信息管理-【教师示范】页面效果见图7-1-2功能介绍修改密码与编辑功能类似维护个人信息与编辑功能类似查看历史订单直接从库中筛选显示即可查看购物车购物车为用户选定暂未支付内容给管理员留言—进入用户留言页面自主完成-【教师考核】学生闯关以来技能的简单考核学生掌握好的基础上至少需要90分钟教师酌情考量，也可分组完成所有任务第23关前台管理

注册与个人信息中心之应用

你，通关否？

你，有信心？

你，加油-码农？

第24关前台管理

之前台购物车

购物车-【教师提示】本关重中之重就是非常重要就是特别重要就是为了学这个的，ok购物车-【教师示范】展示功能学生直观体验即可，知道要完成的目标功能介绍从鲜花下添加入购物车购物车可对数量修改会显示总价格可以删除条目可以清空整个购物车引导完成-【教师示范】页面设计cartinfo.jsp提示教程代码是为了紧凑和展示有些代码故意放在同一行教学可调整，但建议教师和学生最好行号一致引导完成-【教师示范】本关任务繁重循序渐进一个个功能迭代增加第24关前台管理

购物车之应用

你，质变时刻

你，蜕变时刻

你，更有内涵

第25关前台管理

之前台订单

前台订单-【教师提示】关键一环离不开-生活中的物流多么关键就是基本的配送地址关键的信息有哪些？前台订单-【教师示范】展示功能图7-6-3可设计更简洁更优秀的订单功能介绍增设添加物流派送地信息增加页面引导完成-【教师提示】地址来由用户注册时用户每次购买鲜花时，都是添加一个地址数据库改进之处“下订单”后显示已有的物流地址某个地址被“选中”可以有“新增地址”就是本教程功能引导完成-【教师示范】本关任务繁重循序渐进一个个功能迭代增加创新完成-【师生同尝试努力】本关尝试看当当看亚马逊看京东看淘宝我们一起来实现，ok？第25关前台管理

前台订单之应用

你，有信心吗

你，有能力吗

你，有独立性吗

第26关前台管理

之查看历史订单

查看历史订单-【教师提示】重要一环多表链接就是查询嘛查看历史订单-【教师示范】展示功能图7-7-1主从表嘛设计没有难度独立完成-【教师引导】本关简单请独立完成若不会，请求救教师即可第26关前台管理

查看历史订单之应用

你，独立完成

这，生存