【Web技术】网站留言系统开发,及留言信息实时发送至指定邮箱

【Web技术】网站留言系统开发,及留言信息实时发送至指定邮箱

【Web技术】网站留言系统开发,及留言信息实时发送至指定邮箱

关键字:HTML PHP JavaScript CSS

0 简述

企业等各个行业,都会通过网站来展示公司信息、产品等信息,以达到吸引客户的目的。

而留言板,是大部分网站通常会设置的模块。一般情况下,留言板的基本功能分为以下几个类型:

  • 用户留言信息保存到数据库,管理员登录后台查阅;
  • 客服实时在线,客户留言实时回复;
  • 用户留言信息发送至客服邮箱
  • 其他

相比较于前三种情况,第一种需要登录才能查阅留言信息,有可能耽误重要客户的信息,第二种最好,不过费用也较高。所以权衡利弊,对于一般的企业,第三种,或者第一种和第三种结合的效果会较好。

下面就讲述利用PHP的Mailer构造简易表单发送至指定邮箱的留言系统。

1 背景及需求分析

假设某图书资料销售公司需要开发一套顾客留言系统,以便用户及时反馈书籍使用过程,遇到的各种与图书有关的问题,如题目答案错误、缺页漏印等。

其中要求用户必须反馈的信息有:

  • 反馈的图书资料名称
  • 该图书出现的问题

为了便于统计,规定姓名(或昵称)、QQ、手机三项信息必须填写一项。

大致效果图如下:

1551351482823

2 可行性研究

本系统就是一个简单的留言系统。具体如下:

  • 技术方面:采用Web技术,使用HTML、JS、PHP等编程语言;
  • 经济方面:系统很小,基本上没多大的花费;
  • 操作方面:界面操作简单,交互性要好。

3 基础知识

3.1 前端HTML网页设计技术

首先使用HTML的<form>、<table>等标签,构造表格,以及使用<input>标签来设置文本等输入框,从而构建整个项目的界面。

具体用到的基本知识如下:

  1. <form>标签

    表单使用<form>和</form>来定义,其属性有:name、method、action、target等。

    基本语法:

    			
  2. 表格

    表格是由<table>、<tr>、<td>或<th>标记来定义的,分别表示表格、表格行、单元格。

    基本语法:

    			

    表格属性(<table>属性):

    属性 用途 属性 用途
    width 表格宽度 cellpadding 边距
    height 表格高度 cellspacing 间距
    align 表格水平对齐方式 bgcolor 表格背景颜色
    border 表格边框厚度 background 表格背景图像

    表格行属性(<tr>属性):

    属性 用途
    align 单元格水平对齐方式
    valign 单元格中内容的垂直对齐方式
    bgcolor 背景颜色

    <td>、 <tr>属性:

    属性 用途 属性 用途
    align 水平对齐方式 valign 垂直对齐方式
    background 背景图像 bgcolor 背景颜色
    colspan 跨列数目 rowspan 跨行数目
    height 高度 width 宽度
  3. <input>标记及其属性

    <input>标记主要有六个属性:type,name,size,value,maxlength,check。

    基本语法:

    			

    其中,name和type是必选的两个属性:

    • name:属性的值是响应程序(由form标记中的action属性指定)中的变量名;
    • type:主要有9种类型,如下
    1. 文本域,格式如下:

      					

      size与maxlength属性用来定义此区域显示的尺寸大小与输入的最大字符数。

    2. 密码域,格式如下:

      					

      当用户输入密码时,区域内将会显示“*”号代替用户输入的内容。

    3. 单选按钮,格式如下:

      					

      checked属性用来设置该单选按钮默认状态是否被选中。当有多个互斥的单选按钮时,设置相同的name值。

    4. 复选框,格式如下:

      					

      checked属性用来设置该复选框默认状态是否被选中,当有多个复选框时,可设置相同的name值,也可以设置不同的name值。

    5. 提交按钮,格式如下:

      					

      将表单内容提交给服务器的按钮。

    6. 取消按钮,格式如下:

      					

      将表单内容全部清楚,重新填写的按钮。

    7. 图像按钮,格式如下:

      					

      使用图像代替submit按钮,图像的源文件名由src属性指定。

    8. 文件域,格式如下:

      					

      上传文件。

    9. 隐藏域,格式如下:

      					

      用户不能在其中输入信息,用来预设某些要传递的信息。

  4. 下拉列表框:<select>、<option>

    在表单中,通过<select>和<option>标记可设计一个下拉式的列表或带有滚动条的列表,用户可以在列表中选中一个或多个选项。

    基本语法:

    			
  5. 多行文本框<textarea>标记

    基本语法:

    			

    其中: rows设置输入域的行数,

    cols设置输入域的列数,

    wrap设置是否自动换行。

3.2 JavaScript脚本语言

当用户输入一定的信息后,需要对输入的数据进行验证,以及响应响应按钮的点击事件,从而达到一系列的动作。

具体用到的基本知识如下:

  1. 数据类型

    JavaScript有主要数据类型有:int、float、string(字符串)、boolean、null(空类型)。

  2. 变量

    (1)变量声明,格式如下:

    			

    (2)数组的声明:数组的声明有三种方式

    			
  3. 运算符

    在JavaScript中提供了算术运算符、关系运算符、逻辑运算符、字符串运算符、位操作运算符、赋值运算符和条件运算符等运算符。这些运算符与Java语言中的支持的算符运算符及其功能相同。

  4. 控制语句

    JavaScript中的控制语句有:分支语句(if、switch),循环语句(while 、do-while、for),这些语句的语法规则和使用与Java语言中的要求一样。

  5. 函数定义

    在JavaScript中,函数声明有两种方法:

    1. 变量式声明

    			

    2. 函数表达式

    			

    在JavaScript定义函数,有两种实现方式:

    1. 在Web页面中直接嵌入JavaScript

    使用

    			

    封装代码,必须放在

    			

    之间。

    2. 链接外部JavaScript文件

    			
  6. JavaScript的事件
    事件 事件处理函数名 何时触发
    blur onBlur 元素或窗口本身失去焦点时触发
    change onChange 当表单元素获取焦点,且内容值发生改变时触发
    click onClick 单击鼠标左键时触发
    focus onFocus 任何元素或窗口本身获得焦点时触发
    keydown onKeydown 键盘键被按下时触发,如果一直按着某键,则会不断触发
    load onLoad 页面载入后,在window对象上触发;所有框架都载入后,在框架集上触发; 标记指定的对象完全载入后,在其上触发
    select onSelect 选中文本时触发
    submit onSubmit 单击提交按钮时,在
    上触发
    unload onUnload 页面完全卸载后,在window对象上触发; 或者所有框架都卸载后,在框架集上触发
  7. 在HTML中引用(指定)事件处理函数

    在HTML中指定事件处理程序,需要在HTML标记中添加相应的事件处理程序的属性,并在其中指定作为属性值的代码或是函数名称。

    使用格式:

    			
  8. JavaScript的对象

    JavaScript中设有内置对象,常用的内置对象:

    String,

    Date

    浏览器的文档对象:window 、navigator、screen、history、location、 documen等对象。

    1. window对象
      方 法 描 述
      alert() 弹出一个警告对话框
      confirm() 显示一个确认对话框,单击“确认”按钮时返回true,否则返回false
      prompt() 弹出一个提示对话框,并要求输入一个简单的字符串
      setTimeout(timer) 在经过指定的时间后执行代码
      clearTimeout() 取消对指定代码的延迟执行
      setInterval() 周期执行指定的代码
      clearInterval() 停止周期性地执行代码
    2. location对象

      Location对象实现网页页面的跳转。在HTML中使用标记<a></a>来实现页面的跳转,在JavaScript中,利用location对象实现页面的自动跳转。

      使用格式:

      					

      例如跳转到搜狐网页:

      					
    3. history对象

      history对象可以访问浏览器窗口的浏览历史,通过go、back、forward等方法控制浏览器的前进和后退。

      属性、方法 含义
      Length属性 浏览历史记录的总数
      go(index)方法 从浏览历史中加载URL,index参数是加载URL的相对路径,index为负数时,表示当前地址之前的浏览记录,index正数时,表示当前地址之后的浏览记录
      forward()方法 从浏览历史中加载下一个URL,相当于history.go(1)
      back()方法 从浏览历史中加载上一个URL, 相当于history.go(-1)
    4. document对象

      每个HTML文档被加载后都会在内存中初始化一个document对象,该对象存放整个网页HTML内容,从该对象中,可获取页面表单的各种信息。

      (1)获取表单域对象

      获得表单域对象的主要方法:通过表单访问、直接访问。 假设有表单:

      					

      则获取输入域对象:

      ① 通过表单访问

      					

      ② 直接访问

      					
      (2)获取表单域的值

      由于表单域类型不同,其获取表单域值的方法也不同,常用的方法有(若表单域对象为fObj):

      ① 获取文本域、文本框、密码框的值
      					
      ② 获取复选框的值

      例如:对于如下的一组复选框:

      					

      利用JavaScript取值的方法:

      					
      ③ 获取单选按钮的值

      例如:对于如下的一组单选按钮:

      					

      利用JavaScript取值的方法如下:

      					
      ④ 获取列表框的值

      对于单选列表框,用如下方法取出值:

      					

      对于多选列表,取值需要循环:

      					

3.3 PHP基本技术

PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。其功能除了基本界面展示之外,大部分是用来进行底层数据处理。

  1. 基础PHP语法

    PHP 脚本可放置于文档中的任何位置。

    PHP 脚本以 <?php 开头,以 ?> 结尾:

    			
  2. PHP 变量规则

    变量以 $ 符号开头,其后是变量的名称 变量名称必须以字母或下划线开头 变量名称不能以数字开头 变量名称只能包含字母数字字符和下划线(A-z、0-9 以及 _) 变量名称对大小写敏感($y 与 $Y 是两个不同的变量) 注:PHP 变量名称对大小写敏感!

    			
  3. echo 语句

    echo 是一个语言结构,有无括号均可使用:echo 或 echo()。

    显示字符串:

    			

    显示变量:

    			

    PHP字符串是以“.”,即小数点连接。

  4. 字符编码转换

    由于一般网页的编码是UTF-8格式,而邮件不支持这种格式的编码(会收到乱码),所以需要进行编码转换。

    实例如下:

    			

     

4 系统编码实现

4.1 前端展示代码

该部分主要展示整个页面前端显示的表单的实现代码。主要采用HTML语言编码。

详细代码如下:

	

 

4.2 输入验证

本部分对用户输入的表单信息进行校验,主要采用JavaScript编程语言实现。

详细代码如下所示:

	

 

4.3 邮件发送

这部分实现的功能是将用户在前端输入的表单信息,并且通过输入验证的程序后,将文本信息汇总,通过PHPMailer发送至指定的邮箱。

该部分主要使用PHP语言实现,其中结合部分HTML。

详细代码如下所示:

	

 

5 效果展示

首先请看运行效果展示。

5.1  主页展示

留言系统主页如下图所示。

1551428417508

5.2 填写不规范展示

如果不按规定来填写,启动输入验证程序,校验弹窗

  1. 未输入任何信息,就点击提交按钮,效果如下:

    1551428535968

  2. 未选择反馈资料,点击提交按钮,效果如下:

    1551428577921

  3. 未输入反馈信息,点击提交按钮,提示如下:

    1551428628266

5.3 提交成功展示

  1. 信息输入完毕,点击提交按钮,提交成功,提示如下:

    1551428689560

  2. 然后邮箱收到留言信息,如下图所示:

    1551428775032

1551428829959

6 后记

本系统编写起来难度不大,且适用范围很广,实用性高。

 

 

 

相关推荐

发表评论

路人甲
看不清楚?点图切换

网友评论(0)