《Web程序设计》实验教学大纲
一、课程基本情况
课程代码：10411
课程名称（中/英文）：Web程序设计/Web Programming
课程类别：专业核心课程
学分：3.0
总学时：48
理论学时：32
实验/实践学时：16
适用专业：数据科学与大数据技术
适用对象：本科
先修课程：Java程序设计、数据结构、计算机网络与通信
教学环境：多媒体教室、黑板、粉笔
开课学院：计算机与信息工程学院
二、课程简介
《Web程序设计》是数据科学与大数据科学专业的一门专业基础课程，主要介绍Web程序设计的基本原理和技术、JSP程序设计基础和JSP程序开发工具使用等Web程序设计有关方法和技术。通过课程学习，使学生掌握开发JSP程序的基础知识和方法，具备B/S架构软件设计、开发和维护的能力，能够开发中小型Web应用程序。
为了响应思政课程进课堂的要求，通过设计《中国近现代史纲要》课程网站，采取分模块在实验中实现的方式进行，使学生不仅掌握Web程序设计技术，提高Web程序设计能力，而且可以增强学生自身的个人素质和爱国情怀和政治素质，使其具有较强爱国主义情怀和社会责任感，具有较强信息安全意识。
三、实验项目及学时安排
四、实验内容
实验一静态网页设计实验
实验目的：掌握HTML网页的编写方法，进一步加深理解Web的工作原理，为即将学习JSP
技术打下基础。
实验设备：PC机一台并安装配置好JDK、Eclipse、Tomcat、MySql、SqlYog等Web程序设计所需要的开发环境和软件；能够上网查阅资料和文献。
实验主要内容及步骤：
实验1.1 第一个HTML文件
实验内容：编写第一个HTML网页，网页内容显示“Hello Web程序设计”，并有背景图片。
实验步骤：
（1）编写“Hello Web程序设计”网页；
（2）为网页背景添加一副美丽的风景画。
实验1.2 使用CSS控制表格设计出课程表
实验内容：编写一个网页，内容为本学期本班的课程表，并使用CSS设计课程表的显示样式实验步骤：
（1）编写一个网页，内容为课程表表格；
（2）使用CSS美化课程表表格；
（3）使用CSS控制表格，表格行背景颜随鼠标移动而改变。
实验1.3 使用DIV+CSS布局设计个人主页
实验内容：设计个人主页，使用DIV+CSS的方式进行页面布局。
实验步骤：
（1）构思个人主页的版面布局；
（2）使用DIV+CSS技术设计出构思好的个人主页。
实验1.4 设计简单的综合考评系统登录页面
实验内容：设计简单的综合考评系统登录页面，包括用户名、密码、登录按钮等内容。
实验步骤：
（1）构思综合考评系统登录页面的版面布局；
（2）编码实现综合考评系统登录页面。
实验1.5 使用Javascript进行前端验证
实验内容：设计简单的用户注册页面，其中包括“请输入密码”和“请再次输入密码”两个文本框，使用Javascript对“请输入密码”和“请再次输入密码”两个文本框的内容进行验证，如果两个文本框的内容不一样则显示“两次输入的密码不一致！”对话框。
实验步骤：
（1）设计简单的用户注册页面，其中包括“请输入密码”和“请再次输入密码”两个文本框；
（2）使用Javascript对“请输入密码”和“请再次输入密码”两个文本框的内容进行验证，如果两个文本框的内容不一样则显示“两次输入的密码不一致！”对话框。
实验1.6 《中国近现代史纲要》课程网站页面布局与配设计
jsp中文全称实验内容：查阅资料和需求采集，完成《中国近现代史纲要》课程网站的结构设计、相关页面布局、配和美化等。
实验步骤：
（1）设计好《中国近现代史纲要》课程网站的网站结构和页面布局；
（2）对《中国近现代史纲要》课程网站的页面进行配设计和美化。
实验二简单JSP网页设计实验
实验目的：掌握在JSP页面中使用JSP标签；掌握JSP变量和方法的声明、JSP表达式、JSP 程序段的使用方法。
实验设备：PC机一台并安装配置好JDK、Eclipse、Tomcat、MySql、SqlYog等Web程序设计所需要的开发环境和软件；能够上网查阅资料和文献。
实验主要内容及步骤：
实验2.1 第一个JSP动态网页
实验内容：编写第一个JSP动态网页，根据当前时间输出相应的问候语，并在Tomcat上发布网站。
实验步骤：
（1）使用Eclipse开发环境新建一个动态网站；
（2）新建一个JSP页面，根据当前时间输出相应的问候语；
（3）在Tomcat上发布该网站。
实验2.2 JSP程序段
实验内容：
编写两个JSP页面JSP文件分别为inputName.jsp和visitperson.jsp。
inputName. jsp的具体要求：该页面有一个表单，用户通过该表单输入自己的姓名并提交给visitperson.jsp页面。
visitperson.jsp页面的具体要求：该页面有名字为person、类型是StringBuffer以及名字是count，类型为int的成员变量。页面包含public void judge()方法。该方法负责创建person对象，当count 的值是0时，judge()方法创建person对象。页面包含public void addPerson(String p)方法，该方法将参数p指定的字符串尾加到操作成员变量person，同时将count作自增运算。
visitperson. jsp页面在JSP程序段中获取inputName. jsp页面提交的姓名，然后调用judge()创建person对象、调用addPerson方法将用户的姓名追加到成员变量person.
如果inputName.jsp页面没有提交姓名，或姓名含有的字符个数大于10，就使用<jsp:forward>标记将用户请求转到inputName.jsp页面。
通过JSP表达式输出person和count的值。
实验步骤：
（1）分别编写如下inputName.jsp和visiperson.jsp代码。
（2）在地址栏输入访问URL地址，观察浏览器显示效果，如图4-1所示。
（3）拓展实验：
修改程序，将访问者显示方式改为表格形式显示。vbs代码语句未结束
实验2.3 JSP指令标记
实验内容：
编写三个JSP页面: first.jsp、second.jsp和third.jsp。另外，要求用“记事本”编写一个文本文件。hello. txt的每行有若干个英文单词，单词之间用空格分隔，每行之间用“<br>”分隔。
first. jsp的具体要求: first. jsp使用page指令设置contentType属性的值是“plain"。使用include 指令静态插人hello. txt文件。
second.jsp的具体要求: second.jsp使用page指令设置contentType属性的信:"application/ mspowerpoi
nt"，使用include指令静态插人文件。
third.jsp的具体要求: third.jsp 使用page 指令设置contentType 属性的值是
“application/msword”，使用include指令静态插入文件
本实验的目的是让学生掌握怎样在JSP页面中使用include指令在JSP页面中静态插入一个文件的内容，体会page指令contentType属性值的作用。
实验步骤：
（1）编写文本文件和三个JSP页面：first.jsp、second.jsp和third.jsp。
（2）在地址栏输入URL，观察浏览器显示效果。体会Page指令contentTye属性的作用。
实验2.4 JSP表格实验
实验内容：
使用JSP程序段动态生成表格。表格数据来自数组或集合类容器。为从数据库获取数据做准备。
集合类是容器类的数据结构，包括List、Map、Set
List：按对象进人的顺序保存对象，不做排序或编辑操作。其中的值允许重复，因为其为有序的数据结构。
Map：是基于“键”的成对数据结构，键值必须具有唯一性(键不能相同，否则值会被替换)。
Set：对每个对象只接受一次，并使用自己内部的排序方法。其中的值不允许重复，它是无序的数据结构。
List和Set是由Clletion接口派生的两个接口。
replace有被动语态吗实验步骤：
（1）编写实体类Student. java,Student. java
（2）编写Jsp表格程序，表格中的数据分別来自数狙和List容器。
（3）在地址栏输人URL，观察浏览器显示效果。
（4）编写下列程序，该程序从Map集合类容器获取数据，填人表格中，观察运行效果。tablemap.jsp参考代码如下:
（5）拓展实验：
将班级部分同学存入数组和集合类容器，再以表格的形式输出数组和集合类中的同学信息。
实验2.5 JSP动作标记
实验内容：
编写4个JSP页面: one. jsp, two. jsp、three. jsp和error. Jsp。one, jsp、two. jsp和three.jsp页面都含有一个导航条，以便让用户方便地单击超链接访问这3个页面，要求这3个页面通过使用include动作标记动态加载导航条文件。本实验的目的是，让学生掌握在JSP页面中使用include 标记动态加载文件；使用forward实现页面的转向。
实验步骤：
（1）编写导航条文件head. txt
（2）编写JSP页面文件one. jsp,two. jsp, three. jsp和error, jsp。
one.jsp页面有一个表单，用户使用该表单可以输人一个1~100之间的整数.并提交给页面：如果输人的
整数在50~ 100之间(不包括50)就转向three. jsp，如果在1~50之间就转向two.jsp；如果输人不符合要求就转向error.jsp。要求forward标记在实现页面转向时，使用param子标记将整数传递到转向的two.jsp或three,jsp页面，将有关输入错误传递到转向的error, jsp页面two.jsp和three.jsp能输出one.jsp传递过来的值，并显示一幅图片，该图片的宽和高刚好是one.jsp页面传递过来的值。error页面能显示有关错误信息和一幅图片。
（3）运行程序，观察效果。
实验三内置对象应用实验
实验目的：掌握request、response、session、application等常用内置对象的使用方法；能够解决中文乱码问题。
实验设备：PC机一台并安装配置好JDK、Eclipse、Tomcat、MySql、SqlYog等Web程序设计所需要的开发环境和软件；能够上网查阅资料和文献。
实验主要内容及步骤：
vbse实训总结和心得
视频素材app下载实验3.1 request对象的使用方法
实验内容：
编写JSP程序，显示从request对象获取客户端提交的数据或参数。
实验步骤：
（1）编写程序
（2）在地址栏输人URL，观察浏览器显示效果。
（3）编写用户表单JSP程序，显示用户表单参数传递结果。
说明：在表单中,method取值post或get，其主要区别体现在数据发送方式和接收方式上:get 方式在通过URL提交数据时，提交信息会显示在地址栏中。一般说来，应尽量避免使用get方式提交表单，因为这样有可能会导致安全问题。例如，在登录表单中用get方式，用户输人的用户名和密码将在地址栏中暴露无遗。在开发Web程序时，一定会接触到表单信息的提交以及接收，因此不可避免地会使用request对象以及使用post提交表单。
实验3.2 session对象的使用方法
实验内容：
模拟一个简单的用户登录动作，在这个实验程序中不对提交的登录信息做具体的验证，只要用户名和密码都不为空就可以登录。登录时，将用户信息保存在session对象中，这样处理只是为了方便说明session的使用方法，在具体的开发中必须要对登录信息进行数据库验证。
实验步骤：
（1）编写3个JSP程序login. jsp.loginCheck. jsp、main. jsp，程序功能分别是进行用户登录、登录信息处理和登录后的工作页面中获取保存在session中的用户信息。
（2）在地址栏输人URL，观察浏览器显示效果，体会session的作用和用法。
实验3.3 application对象的使用方法
实验内容：
编写JSP程序，利用application对象实现网站访问计数。
数据库第五版课后题答案实验步骤：
（1）编写visitcount. jsp程序；
（2）运行程序，使用application对象统计站点访问量。
实验3.4 JSP中文乱码解决方案
实验内容：
编写JSP程序，解决JSP中文乱码问题，主要解决URL传递参数乱码和表单参数中文乱码。
实验步骤：
（1）解决URL传递参数中文乱码问题。编写messy1.jsp程序。该程序说明了在使用get方法提交表单时传递的参数出现中文乱码时的解决办法。
（2）解决表单提交中文乱码问题。编写程序messy2. jsp，对于表单提交的参数，可以使用request. getParameter("参数名")的方法获取，但是当表单中出现中文数据的时候就会出现乱码。
解决办法：在body城前部增加语句< % request. setCharacterEncoding("utf-8"); %> ，即指定按UTF-8编码方式从request对象中获取参数。
实验3.5 《中国近现代史纲要》课程网站中内置对象的应用
实验内容：
《中国近现代史纲要》课程网站使用request、response、Session等内置对象完成页面间的传值。
实验步骤：
（1）分析网站中需要传值的页面；

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。