云上运维及应用实践教程（第2版）教案22 项目七 任务1留言板前台页面及数据库设计；23 实验八 制作简单的留言板；24 实验九 制作网站计数器.doc

教案序号：.

课题

项目七任务1留言板前台页面及数据库设计

任务2留言板后台ASP页面制作

授课形式

√理论□理实一体□实训(验)□其它：

学时安排

本单元总学时：2（其中：理论2学时、实践学时）

教学内容及目标

掌握站点留言添加、显示、删除功能的制作，掌握功能模块前台页面、后台页面的制作

掌握实现站点留言添加、显示、删除功能的ASP代码的编写。

教学重点及难点

重点、难点：留言功能的ASP代码。

授课对象

学情分析

学生接触网站建设的相关内容时间不长，虽然有网页制作的基础，但基础较差，需要在讲授过程中，教师进行巡回指导或同学间小组讨论。

教学媒介

机房

授课

地点

5405

教学过程及设计：

一、课前回顾：网站新闻搜索功能制作代码？

二、新课内容：项目七任务1留言板前台页面及数据库设计

任务1留言板前台页面及数据库设计

一、任务引出

留言板是常见的一种网络交流方式，借助留言板可让用户直接在网站上留言。从技术层面上来看，留言板的实现实质就是对网站后台数据库的“读”与“写”的操作处理：当用户在线签写留言后，留言将被“写”入数据库中；当浏览留言内容时，留言内容将从数据库中“读”出来。

在本任务，将为“诸暨市吉尔特机械有限公司”网站完成留言系统的制作。

二、任务预览

打开并运行站点主页文件“index.asp”，单击网站右上方的【客户咨询】按钮，弹出网站客户留言的页面，如图7-2所示。用户填写好留言信息之后，点击【发表】按钮，留言发表成功之后会弹出发表成功的提示信息。管理员可以通过后台登录界面登录网站，查看留言情况，如图7-3所示，同时可以需要删除客户留言。

网站留言界面

网站留言管理界面

三、实践操作

1、设计数据库表

启动Access，打开“webdata.mdb”数据库，然后在数据库中创建数据表“gbook”。

“gbook”数据表由“id”、“name”、“content”、“addtime”、“email”和“phone”六个字段构成，其属性和说明参见表7-1。

表7-1“gbook”数据表的属性

字段名称

数据类型

备注说明

id

自动编号

留言编号，主键

name

文本

留言主题（必填）

content

文本

留言内容（必填）

addtime

日期/时间

留言发布时间

email

文本

留言人email（必填）

phone

数字

留言人电话号码

为了记录留言发表的具体时间，在“addtime”字段的“默认值”框中输入“Now()”，用于获取当前的留言时间。

2、制作留言发表页面

在Dreamweaver环境下，选择【文件】→【新建命令】，创建ASPVBScript页面，并将网页保存为“gbook.asp”。具体的制作效果。

留言发表页面

选中“昵称”字段所对应的文本框，将其命名为“username”，注意不能超过16个字符；选中“E-mail”字段所对应的文本框，命名为“email”；选中“联系电话”字段所对应的文本框，将其命名为“phone”；选中“留言”字段所对应的文本域，将其命名为“content”，注意最大留言不能超过2000个字符；选中“验证码”字段所对应的文本框，将其命名为“validate”；“验证码”旁边的为图像对象，其源文件设置如图7-5所示。

验证码图标属性设置

【注意】由于在前面已经对“addtime”字段设置默认值，在此就不用进行数据插入。

添加表单，使表单的开始标签与结束标签包围整个留言信息添加功能模块。同时选中表单“form”，将表单的“action”属性设置为“gbook_save.asp”，“method”属性设置为“post”，具体如下图7-6所示。

表单动作定义界面

3、留言信息保存处理页面制作

以“gbook.asp”为模板，进行相应的修改处理，并另存为“gbook_save.asp”，该页面具体的制作效果如图所示。

“gbook_save.asp”网页制作效果

“gbook_save.asp”是留言信息保存页面，该功能实现的后台ASP代码如下。

①首先必须调用连接数据库页面以及无组件文件上传功能代码：

!--#includefile=conn.asp--‘调用连接数据库的页面

②判断验证码输入是否正确：

%判断验证码输入是否正确

validate=replace(request.form(validate),,)

ifvalidatecstr(Session(GetCode))then%

scriptlanguage=javascript

window.alert(请输入正