Web程序设计课程实验教学大纲.docx
- 文档编号:6517305
- 上传时间:2023-01-07
- 格式:DOCX
- 页数:20
- 大小:29.46KB
Web程序设计课程实验教学大纲.docx
《Web程序设计课程实验教学大纲.docx》由会员分享,可在线阅读,更多相关《Web程序设计课程实验教学大纲.docx(20页珍藏版)》请在冰豆网上搜索。
Web程序设计课程实验教学大纲
《Web程序设计》实验教学大纲
一、课程基本情况
课程代码:
10411
课程名称(中/英文):
Web程序设计/WebProgramming
课程类别:
专业核心课程
学分:
3.0
总学时:
48
理论学时:
32
实验/实践学时:
16
适用专业:
数据科学与大数据技术
适用对象:
本科
先修课程:
Java程序设计、数据结构、计算机网络与通信
教学环境:
多媒体教室、黑板、粉笔
开课学院:
计算机与信息工程学院
二、课程简介
《Web程序设计》是数据科学与大数据科学专业的一门专业基础课程,主要介绍Web程序设计的基本原理和技术、JSP程序设计基础和JSP程序开发工具使用等Web程序设计有关方法和技术。
通过课程学习,使学生掌握开发JSP程序的基础知识和方法,具备B/S架构软件设计、开发和维护的能力,能够开发中小型Web应用程序。
为了响应思政课程进课堂的要求,通过设计《中国近现代史纲要》课程网站,采取分模块在实验中实现的方式进行,使学生不仅掌握Web程序设计技术,提高Web程序设计能力,而且可以增强学生自身的个人素质和爱国情怀和政治素质,使其具有较强爱国主义情怀和社会责任感,具有较强信息安全意识。
三、实验项目及学时安排
序号
实验/实践项目名称
实验学时
实验
类型
每组
人数
实验要求
对应的课程教学目标
1
静态网页设计
2
设计性
1
必做
1,2
2
简单JSP网页设计
2
设计性
1
必做
1,2,3
3
内置对象应用
2
设计性
1
必做
2,3,6
4
JSP访问数据库
2
设计性
1
必做
2,3,6
5
Javabean的使用
2
设计性
1
必做
2,3,6
6
Servlet的使用
2
设计性
1
必做
2,3,6
7
过滤器的使用
2
设计性
1
必做
2,3,6
8
EL与JSTL的使用
2
设计性
1
必做
2,3,6
合计
16
四、实验内容
实验一静态网页设计实验
实验目的:
掌握HTML网页的编写方法,进一步加深理解Web的工作原理,为即将学习JSP技术打下基础。
实验设备:
PC机一台并安装配置好JDK、Eclipse、Tomcat、MySql、SqlYog等Web程序设计所需要的开发环境和软件;能够上网查阅资料和文献。
实验主要内容及步骤:
实验1.1第一个HTML文件
实验内容:
编写第一个HTML网页,网页内容显示“HelloWeb程序设计”,并有背景图片。
实验步骤:
(1)编写“HelloWeb程序设计”网页;
(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《中国近现代史纲要》课程网站页面布局与配色设计
实验内容:
查阅资料和需求采集,完成《中国近现代史纲要》课程网站的结构设计、相关页面布局、配色和美化等。
实验步骤:
(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.2JSP程序段
实验内容:
编写两个JSP页面JSP文件分别为inputName.jsp和visitperson.jsp。
inputName.jsp的具体要求:
该页面有一个表单,用户通过该表单输入自己的姓名并提交给visitperson.jsp页面。
visitperson.jsp页面的具体要求:
该页面有名字为person、类型是StringBuffer以及名字是count,类型为int的成员变量。
页面包含publicvoidjudge()方法。
该方法负责创建person对象,当count的值是0时,judge()方法创建person对象。
页面包含publicvoidaddPerson(Stringp)方法,该方法将参数p指定的字符串尾加到操作成员变量person,同时将count作自增运算。
visitperson.jsp页面在JSP程序段中获取inputName.jsp页面提交的姓名,然后调用judge()创建person对象、调用addPerson方法将用户的姓名追加到成员变量person.
如果inputName.jsp页面没有提交姓名,或姓名含有的字符个数大于10,就使用 forward>标记将用户请求转到inputName.jsp页面。 通过JSP表达式输出person和count的值。 实验步骤: (1)分别编写如下inputName.jsp和visiperson.jsp代码。 (2)在地址栏输入访问URL地址,观察浏览器显示效果,如图4-1所示。 (3)拓展实验: 修改程序,将访问者显示方式改为表格形式显示。 实验2.3JSP指令标记 实验内容: 编写三个JSP页面: first.jsp、second.jsp和third.jsp。 另外,要求用“记事本”编写一个文本文件hello.txt。 hello.txt的每行有若干个英文单词,单词之间用空格分隔,每行之间用“ first.jsp的具体要求: first.jsp使用page指令设置contentType属性的值是“plain"。 使用include指令静态插人hello.txt文件。 second.jsp的具体要求: second.jsp使用page指令设置contentType属性的信: "application/mspowerpoint",使用include指令静态插人hello.txt文件。 third.jsp的具体要求: third.jsp使用page指令设置contentType属性的值是“application/msword”,使用include指令静态插入hello.txt文件 本实验的目的是让学生掌握怎样在JSP页面中使用include指令在JSP页面中静态插入一个文件的内容,体会page指令contentType属性值的作用。 实验步骤: (1)编写文本文件helolo.txt和三个JSP页面: first.jsp、second.jsp和third.jsp。 (2)在地址栏输入URL,观察浏览器显示效果。 体会Page指令contentTye属性的作用。 实验2.4JSP表格实验 实验内容: 使用JSP程序段动态生成表格。 表格数据来自数组或集合类容器。 为从数据库获取数据做准备。 集合类是容器类的数据结构,包括List、Map、Set List: 按对象进人的顺序保存对象,不做排序或编辑操作。 其中的值允许重复,因为其为有序的数据结构。 Map: 是基于“键”的成对数据结构,键值必须具有唯一性(键不能相同,否则值会被替换)。 Set: 对每个对象只接受一次,并使用自己内部的排序方法。 其中的值不允许重复,它是无序的数据结构。 List和Set是由Clletion接口派生的两个接口。 实验步骤: (1)编写实体类Student.java,Student.java (2)编写Jsp表格程序,表格中的数据分別来自数狙和List容器。 (3)在地址栏输人URL,观察浏览器显示效果。 (4)编写下列程序,该程序从Map集合类容器获取数据,填人表格中,观察运行效果。 tablemap.jsp参考代码如下: (5)拓展实验: 将班级部分同学存入数组和集合类容器,再以表格的形式输出数组和集合类中的同学信息。 实验2.5JSP动作标记 实验内容: 编写4个JSP页面: one.jsp,two.jsp、three.jsp和error.Jsp。 one,jsp、two.jsp和three.jsp页面都含有一个导航条,以便让用户方便地单击超链接访问这3个页面,要求这3个页面通过使用include动作标记动态加载导航条文件head.txt。 本实验的目的是,让学生掌握在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程序设计所需要的开发环境和软件;能够上网查阅资料和文献。 实验主要内容及步骤: 实验3.1request对象的使用方法 实验内容: 编写JSP程序,显示从request对象获取客户端提交的数据或参数。 实验步骤: (1)编写程序 (2)在地址栏输人URL,观察浏览器显示效果。 (3)编写用户表单JSP程序,显示用户表单参数传递结果。 说明: 在表单中,method取值post或get,其主要区别体现在数据发送方式和接收方式上: get方式在通过URL提交数据时,提交信息会显示在地址栏中。 一般说来,应尽量避免使用get方式提交表单,因为这样有可能会导致安全问题。 例如,在登录表单中用get方式,用户输人的用户名和密码将在地址栏中暴露无遗。 在开发Web程序时,一定会接触到表单信息的提交以及接收,因此不可避免地会使用request对象以及使用post提交表单。 实验3.2session对象的使用方法 实验内容: 模拟一个简单的用户登录动作,在这个实验程序中不对提交的登录信息做具体的验证,只要用户名和密码都不为空就可以登录。 登录时,将用户信息保存在session对象中,这样处理只是为了方便说明session的使用方法,在具体的开发中必须要对登录信息进行数据库验证。 实验步骤: (1)编写3个JSP程序login.jsp.loginCheck.jsp、main.jsp,程序功能分别是进行用户登录、登录信息处理和登录后的工作页面中获取保存在session中的用户信息。 (2)在地址栏输人URL,观察浏览器显示效果,体会session的作用和用法。 实验3.3application对象的使用方法 实验内容: 编写JSP程序,利用application对象实现网站访问计数。 实验步骤: (1)编写visitcount.jsp程序; (2)运行程序,使用application对象统计站点访问量。 实验3.4JSP中文乱码解决方案 实验内容: 编写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)分析网站中需要传值的页面; (2)使用request、response、Session等内置对象完成页面间的传值。 实验四JSP访问数据库实验 实验目的: 理解JDBC的工作原理,掌握使用JDBC链接数据库的基本步骤。 实验设备: PC机一台并安装配置好JDK、Eclipse、Tomcat、MySql、SqlYog等Web程序设计所需要的开发环境和软件;能够上网查阅资料和文献。 实验主要内容及步骤: 实验4.1查询记录 实验内容: 编写JSP程序,使用JDBC访问数据库,查询数据库中表的记录。 实验目的是让学生掌握使用JDBC查询数据库中表的记录。 将访问MySQL数据库的JDBC驱动JAR包复制到WEB-INF->lib中。 JSP文件中使用JDBC访问数据库的编程要点: (1)添加page指令: <%@pageimport="java.sql.*"%> (2)加载MySql驱动: Class.forName("com.mysql.Jdbc.Driver"); (3)创建连接对象: StringconStr="jdbc: mysql: //localhost: 3306/student? useUnicode=true&characterEncoding=utf-8"; Connectioncon=DriverManager.getConnection(conStr,"root","123456"); (4)创建Statement语句对象: Statementstmt=con.createStatement(); (5)向数据库发送关于查询记录的SQL语句,返回查询结果,即ResultSet对象: ResultSetrs=stmt.executeQuery(查询stuinfo表的SQL语句): 实验步骤: (1)编写4个JSP页面: searchStu.jsp、byNumber.jsp.byName.jspallStu.jsp页面。 searchStu.jsp的具体要求: searchStu.jsp提供两个表单。 其中一个表单允许用户输人要查询的学生的学号,即输人stuinfo表中xh字段的查询条件,然后将查询条件提交给要byXh.jsp,另一个表单允许用户输人要查询的学生的姓名,即输人stuinfo表中name字段的查询条件,然后将查询条件提交给要byName.jsp. byXh.jsp的具体要求: byXh.jsp首先获得searchStu.jsp提交的关于xh字段的查询条件然后使用JDBC查询。 byName.jsp的具体要求: byName.jsp首先获得searchStu.jsp提交的关于name字段的查询条件,然后使用JDBC查询。 (2)运行程序,观察效果。 searchStu.jsp和byXh.jsp效果 实验4.2添加记录 实验内容: 编写ISP程序,使用JDBC访问数据库更新数据库中表的记录。 本实验的目的是让学生掌握使用JDBC更新数据库中表的记录。 使用JDBC更新数据库中表的记录的SQL语句如下: intn=stat.executeUpdate(更新记录的SQL语句); 实验步骤: (1)编写3个JSP页面: showInfo.jsp.insertInfo,jsp和inertExec.jsp页面。 showInfo.jsp的具体要求: 从数据库中查出全部学生,每行添加“修改”和“删除”超链接。 表格末尾添加“新增学生”的超链接。 insertInfo.jsp的具体要求: insertInfo.jsp提供一个表单,该表单允许用户输人欲新增学生的学号、姓名、性别、电话等信息,并提交到inertExec.jsp页面。 inertExec.jsp的具体要求: inertExec.jsp首先获得insertInfo.jsp页面提交的关于xh、name、sex、tele字段,然后使用JDBC更新记录的字段值。 (2)运行showInfo.jsp程序。 (3)运行insertInfo.jsp程序。 实验4.3更新记录 实验内容: 编写JSP程序.使用JDBC访问数据库,更新数据库中表的记录。 本实验的目的是让学生掌握使用JDBC更新数据库中表的记录。 使用JDBC更新数据库中表的记录的SQL语句如下: intn=stmt.executeUpdate(updateSql); 本实验继续完成实验5.1中showInfo.jsp页面的“修改"功能。 实验步骤: (1)编写updateInfo.jsp。 具体要求: 从updateInfo.jsp页面读出原有信息,提供一个修改表单,该表单显示当前学生的原始信息,允许对该学生的姓名、出生日期和E-mail进行修改,再将表单提交到newResult.jsp页面。 (2)运行程序,巩固JDBC工作原理。 实验4.4删除记录 实验内容: 编写JSP程序使用JDBC访问数据库,更新数据库中表的记录。 本实验的目的是让学生掌握使用JDBC删除数据库中表的记录。 使用JDBC更新数据库中表的记录的SQL语句如下: intn=stmtexecuteUpdate(deleteSql);//deleteSq1 本实验继续完成实验5.1中showInfo.jsp页而的“删除”功能。 实验步骤: (1)编写程序deleteStu.jsp. deleteStu.jsp的具体要求: showInfo.jsp页面的“删除"接受请求传递过来的学号(xh)参数.根据接收到的学号使用JDBC删除数据库表中相应学号的记录,该JSP文件对用户透明,无界面可见。 运行程序,加深理解和掌握JDBC访问数据库技术。 实验4.5《中国近现代史纲要》课程网站中JSP访问数据库 实验内容: 把《中国近现代史纲要》课程网站中的模拟数据修改为访问数据库。 实验步骤: (1)设计《中国近现代史纲要》课程网站的数据库及相关数据表; (2)使用JDBC操作数据库,完成添加、删除、修改和查询操作; (3)运行调试程序。 实验五Javabean的使用实验 实验目的: 掌握JavaBean的工作原理,熟悉JavaBean的设计要点,能够在JSP程序设计中灵活使用JavaBean技术。 实验设备: PC机一台并安装配置好JDK、Eclipse、Tomcat、MySql、SqlYog等Web程序设计所需要的开发环境和软件;能够上网查阅资料和文献。 实验主要内容及步骤: 实验5.1使用JavaBean自动获取表单参数 实验内容: 编写JSP程序,使用JavaBean自动获取表单参数,验证当表单参数名称与JavaBean属性名称不一致时自动获取表单参数。 目的是让学生掌握使用JavaBean自动获取表单参数,为实际项目开发打下基础。 需要设计的程序: 设计一个JavaBean类Student.java; 设计表单页面imput.jsp,传递参数: 设计接收表单参数的页面receive.isp,使用JavaBean自动获取表单传来的参数。 实验步骤: (1)编写一个JavaBean文件(Student.java)和两个JSP文件(mput.jsp和receive.jsp)文件。 Student,java的具体要求: 该JavaBean包含学号、姓名属性以及相应的getter和setter方法。 input.jsp的具体要求: input.jsp提供用户填写学号和姓名参数,将表单信息提交到receive,jsp进行处理。 receive.jsp的具体要求: receive.jsp首先使用JavaBean自动获得input.jsp提交的xh和name字段,然后显示获取的参数。 (2)运行程序显示设计效果。 实验5.2有效范围为request的bean 实验内容: 编写JSP程序,使用有效范围是request的JavaBean显示汽车的基本信息。 目的是让学生掌握使用有效范围是request的bean。 JSP页面使用useBean标记调用一个有效范围是request的JavaBean的语法如下:
”分隔。
useBean>或
该bean的有效范围是当前请求("request"),当本次请求生命周期结束后,JSP引擎取消分配给该客户的bean。
实验步骤:
(1)编写一个名字为Car.java的Javabea。
Car.java的具体要求:
含有汽车号码、名称和生产日期的属性,并提供相应的getXxx()和s
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web 程序设计 课程 实验教学 大纲
![提示](https://static.bdocx.com/images/bang_tan.gif)