## 【Web技术】网站留言系统开发，及留言信息实时发送至指定邮箱
关键字：HTML PHP JavaScript CSS
@[toc]
### 0 简述
企业等各个行业，都会通过网站来展示公司信息、产品等信息，以达到吸引客户的目的。
而留言板，是大部分网站通常会设置的模块。一般情况下，留言板的基本功能分为以下几个类型：
- 用户留言信息保存到数据库，管理员登录后台查阅；
- 客服实时在线，客户留言实时回复；
- 用户留言信息发送至客服邮箱
- 其他
相比较于前三种情况，第一种需要登录才能查阅留言信息，有可能耽误重要客户的信息，第二种最好，不过费用也较高。所以权衡利弊，对于一般的企业，第三种，或者第一种和第三种结合的效果会较好。
下面就讲述利用PHP的Mailer构造简易表单发送至指定邮箱的留言系统。
### 1 背景及需求分析
假设某图书资料销售公司需要开发一套顾客留言系统，以便用户及时反馈书籍使用过程，遇到的各种与图书有关的问题，如题目答案错误、缺页漏印等。
其中要求用户必须反馈的信息有：
- 反馈的图书资料名称
- 该图书出现的问题
为了便于统计，规定姓名（或昵称）、QQ、手机三项信息必须填写一项。
大致效果图如下：
### 2 可行性研究
本系统就是一个简单的留言系统。具体如下：
- 技术方面：采用Web技术，使用HTML、JS、PHP等编程语言；
- 经济方面：系统很小，基本上没多大的花费；
- 操作方面：界面操作简单，交互性要好。
### 3 基础知识
#### 3.1 前端HTML网页设计技术
首先使用HTML的＜form>、＜table>等标签，构造表格，以及使用＜input>标签来设置文本等输入框，从而构建整个项目的界面。
具体用到的基本知识如下：
1. ##### ＜form＞标签
表单使用＜form>和＜/form>来定义，其属性有：name、method、action、target等。
**基本语法：**
```html
<form name="表单名称" method="提交方法" action="处理程序">
……
……
</form>
```
2. ##### 表格
表格是由＜table>、＜tr>、＜td>或＜th>标记来定义的，分别表示表格、表格行、单元格。
**基本语法：**
```html
<table>
<caption>表格标题</caption>
<tr><th>列名一</th><th>列名二</th>…...</tr>
<tr><td>数据一</td><td>数据二</td>…...</tr>
……
</table>
```
表格属性（＜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。
**基本语法：**
```html
<input name="输入域名称" type="域类型" value="输入域的值">
```
其中，name和type是必选的两个属性：
- name：属性的值是响应程序（由form标记中的action属性指定）中的变量名;
- type：主要有9种类型，如下
1. **文本域**，格式如下：
```html
<input type="text" name="文本字段名称" maxlength=" " size=" " value=" ">
```
size与maxlength属性用来定义此区域显示的尺寸大小与输入的最大字符数。
2. **密码域**，格式如下：
```html
<input type="password" name="密码字段名称" size=" " maxlength=" " value=" " >
```
当用户输入密码时，区域内将会显示“*”号代替用户输入的内容。
3. **单选按钮**，格式如下：
```html
<input type="radio" name=" " value=" " checked />
```
checked属性用来设置该单选按钮默认状态是否被选中。当有多个互斥的单选按钮时，设置相同的name值。
4. **复选框**，格式如下：
```html
<input type="checkbox" name=" " value=" " checked />
```
checked属性用来设置该复选框默认状态是否被选中，当有多个复选框时，可设置相同的name值，也可以设置不同的name值。
5. **提交按钮**，格式如下：
```html
<input type="submit" name=" " value=" "/>
```
将表单内容提交给服务器的按钮。
6. **取消按钮**，格式如下：
```php+HTML
<input type="reset" name=" " value=" "/>
```
将表单内容全部清楚，重新填写的按钮。
7. **图像按钮**，格式如下：
```html
<input type="image" src="图片"/>
```
使用图像代替submit按钮，图像的源文件名由src属性指定。
8. **文件域**，格式如下：
```html
<input type="file" name=" " size=" " maxlength=" ">
```
上传文件。
9. **隐藏域**，格式如下：
```html
<input type="hidden" name=" " value=" " />
```
用户不能在其中输入信息，用来预设某些要传递的信息。
4. ##### 下拉列表框：＜select＞、＜option＞
在表单中，通过＜select>和＜option>标记可设计一个下拉式的列表或带有滚动条的列表，用户可以在列表中选中一个或多个选项。
基本语法：
```html
<select name="" size="" multiple>
<option value="" selected>…</option>
<option value="">…</option>
……
</select>
```
5. ##### 多行文本框＜textarea＞标记
基本语法：
```html
<textarea name="" rows="" cols="" wrap="off|virtual|physical">
初始值
</textarea>
```
其中： rows设置输入域的行数，
cols设置输入域的列数，
wrap设置是否自动换行。
#### 3.2 JavaScript脚本语言
当用户输入一定的信息后，需要对输入的数据进行验证，以及响应响应按钮的点击事件，从而达到一系列的动作。
具体用到的基本知识如下：
1. ##### 数据类型
JavaScript有主要数据类型有：int、float、string（字符串）、boolean、null(空类型)。
2. ##### 变量
（1）变量声明，格式如下：
```javascript
var 变量名[=值]; (变量声明可以省略)
```
（2）数组的声明：数组的声明有三种方式
```javascript
var array1=new Array(); //array1是一个默认长度的数组
var array2=new Array(10); //array2是长度为10的数组
var array3=new Array("aa",12,true); //array1是一个长度为3的数组，且元素类型不同
```
3. ##### 运算符
在JavaScript中提供了算术运算符、关系运算符、逻辑运算符、字符串运算符、位操作运算符、赋值运算符和条件运算符等运算符。这些运算符与Java语言中的支持的算符运算符及其功能相同。
4. ##### 控制语句
JavaScript中的控制语句有：分支语句（if、switch），循环语句（while 、do-while、for），这些语句的语法规则和使用与Java语言中的要求一样。
5. ##### 函数定义
在JavaScript中，函数声明有两种方法：
1. 变量式声明
```javascript
var f = function () { /* function body */ };
```
2. 函数表达式
```javascript
function f() { /* function body*/ }
```
在JavaScript定义函数，有两种实现方式：
1. 在Web页面中直接嵌入JavaScript
使用
```javascript
<script language="javascript">
…………
</script>
```
封装代码，必须放在
```html
<head>
…………
</head>
```
之间。
2. 链接外部JavaScript文件
```javascript
<script language="javascript" scr="url"></script>
```
6. ##### JavaScript的事件
| 事件 | 事件处理函数名 | 何时触发 |
| ------- | -------------- | ------------------------------------------------------------ |
| blur | onBlur | 元素或窗口本身失去焦点时触发 |
| change | onChange | 当表单元素获取焦点，且内容值发生改变时触发 |
| click | onClick | 单击鼠标左键时触发 |
| focus | onFocus | 任何元素或窗口本身获得焦点时触发 |
| keydown | onKeydown | 键盘键被按下时触发，如果一直按着某键，则会不断触发 |
| load | onLoad | 页面载入后，在window对象上触发；所有框架都载入后，在框架集上触发； <object>标记指定的对象完全载入后，在其上触发 |
| select | onSelect | 选中文本时触发 |
| submit | onSubmit | 单击提交按钮时，在<form>上触发 |
| unload | onUnload | 页面完全卸载后，在window对象上触发； 或者所有框架都卸载后，在框架集上触发 |
7. ##### 在HTML中引用（指定）事件处理函数
在HTML中指定事件处理程序，需要在HTML标记中添加相应的事件处理程序的属性，并在其中指定作为属性值的代码或是函数名称。
使用格式：
```javascript
<标签 各有关属性及其属性值 on事件名称="函数名称(参数)">
//例如：
<input type="Button" value="警告对话框" onclick="test()">
```
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对象实现页面的自动跳转。
使用格式：
```javascript
window.location.href="网页路径";
```
例如跳转到搜狐网页：
```javascript
window.location.href="http://www.sohu.com";
```
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）获取表单域对象
获得表单域对象的主要方法：通过表单访问、直接访问。
假设有表单：
```html
<form action="" name= "form1" >
<input type="text" name= "t1" value="" >
</form>
```
则获取输入域对象：
① 通过表单访问
```javascript
var fObj=document.form1.t1;
var fObj=document.form1.elements[“t1”]
var fObj=document.forms[0].t1;
```
② 直接访问
```javascript
var fObj=document.getElementsByName("t1")[0];
var fObj=document.getElementById("t1");
var fObj=document.all("t1").value
```
##### （2）获取表单域的值
由于表单域类型不同，其获取表单域值的方法也不同，常用的方法有(若表单域对象为fObj)：
##### ① 获取文本域、文本框、密码框的值
```javascript
var v=fObj.value;
```
##### ② 获取复选框的值
例如：对于如下的一组复选框：
```javascript
<input type="checkbox" name="c1" value="1"/>
<input type="checkbox" name="c1" value="2"/>
```
利用JavaScript取值的方法：
```javascript
var fObj=document.form1.c1; //form1为表单的名字
var s="";
for(var i=0;i<fObj.length;++i){
if(fObj[i].checked==true) s=s+fObj[i].value;
}
```
##### ③ 获取单选按钮的值
例如：对于如下的一组单选按钮：
```javascript
<input type="radio" name="p" checked/>加
<input type="radio" name="p"/>减
```
利用JavaScript取值的方法如下：
```javascript
var fObj=document.form1.p; //form1为表单的名字
for(var i=0;i<fObj.length;++i)
if(fObj[i].checked) break;
switch(i){
case 0:……; break;
case 1: ……; break;
case 2: ……; break;
case 3: ……;
```
##### ④ 获取列表框的值
对于单选列表框，用如下方法取出值：
```javascript
var index=fObj.selectedIndex; //fObj为列表对象，取出所选项的索引，索引从0开始
var val=fObj.options[index].value; // 取出所选项目的值
```
对于多选列表，取值需要循环：
```javascript
var fObj=document.form1.s1; //form1为表单的名字
var s="";
for(var i=0;i<fObj.options.length;++i){
if(fObj[i].options[i].selected==true)
s=s+fObj.options[i].value;
}
```
#### 3.3 PHP基本技术
PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。其功能除了基本界面展示之外，大部分是用来进行底层数据处理。
1. 基础PHP语法
PHP 脚本可放置于文档中的任何位置。
PHP 脚本以 *<?php* 开头，以 *?>* 结尾：
```php
<?php
// 此处是 PHP 代码
?>
```
2. PHP 变量规则
变量以 $ 符号开头，其后是变量的名称
变量名称必须以字母或下划线开头
变量名称不能以数字开头
变量名称只能包含字母数字字符和下划线（A-z、0-9 以及 _）
变量名称对大小写敏感（$y 与 $Y 是两个不同的变量）
注：PHP 变量名称对大小写敏感！
```php
<?php
$txt="Hello world!";
$x=5;
$y=10.5;
?>
```
3. echo 语句
echo 是一个语言结构，有无括号均可使用：echo 或 echo()。
显示字符串：
```php
<?php
echo "<h2>PHP is fun!</h2>";
echo "Hello world!<br>";
echo "I'm about to learn PHP!<br>";
echo "This", " string", " was", " made", " with multiple parameters.";
?>
```
显示变量：
```php
<?php
$txt1="Learn PHP";
$txt2="cxh";
$cars=array("Volvo","BMW","SAAB");
echo $txt1;
echo "<br>";
echo "Study PHP at $txt2";
echo "My car is a {$cars[0]}";
?>
```
PHP字符串是以“.”，即小数点连接。
4. 字符编码转换
由于一般网页的编码是UTF-8格式，而邮件不支持这种格式的编码（会收到乱码），所以需要进行编码转换。
实例如下：
```php
$phone2 = iconv('UTF-8','GB2312',$phoneltemp); //UTF-8编码转换成GB2312
$succeed2 = iconv('GB2312','UTF-8',$succeed); //与上一句相反
```
### ４ 系统编码实现
#### 4.1 前端展示代码
该部分主要展示整个页面前端显示的表单的实现代码。主要采用HTML语言编码。
详细代码如下：
```html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>某某留言系统</title>
<script language="javascript" src="judgement.js"></script>
<style>
.error {color: #FF0000; text-align: left;}
</style>
<--保证手机端显示正常-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no">
</head>
<--设置背景色和背景图片-->
<body background="logo.png" style="background-color:blanchedalmond;">
<div align="center"> <h2>某某留言系统</h2> </div>
<form action="send.php" method="post">
<table border="0" align="center" width="0" cellpadding="10" cellspacing="0">
<tr>
<td align="right" nowrap="nowrap">姓名昵称：</td>
<td><input type="text" name="name" id="name" style="width:90%" placeholder="前三项请必填一项及以上"></td>
</tr>
<tr>
<td align="right">ＱＱ号码：</td>
<td><input type="email" name="email" id="email" style="width:90%" placeholder="前三项请必填一项及以上"></td>
</tr>
<tr>
<td align="right">手机号码：</td>
<td><input type="text" name="phone" id="phone" style="width:90%" placeholder="前三项请必填一项及以上"></td>
</tr>
<tr>
<td align="right">反馈资料：</td>
<td><select name="bookSelect" id="bookSelect" size="1" style="width:90%">
<option>请选择反馈书籍</option>
<option>高等数学A</option>
<option>高等数学B</option>
<option>线性代数</option>
<option>概率论</option>
<option>大学物理A</option>
<option>大学物理B</option>
<option>复变函数</option>
<option>电路分析</option>
<option>电路原理</option>
<option>物理化学</option>
<option>电子与电工B</option>
<option>电子与电工C</option>
<option>理论力学</option>
<option>材料力学</option>
<option>工程力学</option>
<option>无机化学</option>
<option>有机化学C</option>
<option>金属工艺学</option>
<option>其他</option>
</select>
<a class="error"> *</a>
</td>
</tr>
<tr>
<td align="right">反馈信息：</td>
<td> <textarea name="comments" id="comments" rows="8" style="width: 90%" placeholder="如：第2套题的第8题正确答案应该是A、第18页的第5题答案解析有误、第20页的第18道大题的第二问答案错误，正确答案应该是5等等。"></textarea><a class="error"> *</a></td>
</tr>
<tr>
<td colspan="3" align="center" height="40">
<input type="button" name="button" value=" 提交 " onclick="validate()"/>
</td>
</tr>
</table>
</form>
</body>
</html>
```
#### 4.2 输入验证
本部分对用户输入的表单信息进行校验，主要采用JavaScript编程语言实现。
详细代码如下所示：
```javascript
// JavaScript Document
function validate(){
var name=document.forms[0].name.value;
var email=document.forms[0].email.value;
var phone = document.forms[0].phone.value;
var index=bookSelect.selectedIndex;
var message=document.forms[0].comments.value;
//var reg2= /\w+([-+.']\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)*/;
if(name.length<=0 && email.length<=0 && phone.length<=0)
alert("姓名或昵称、QQ、手机请至少填一项！");
//else if(!reg2.test(email) && email.length>0 )
// alert("邮件格式不正确！");
else if(index==0)
alert("请选择反馈资料！");
else if(message.length<=0)
alert("请输入反馈信息！");
else
document.forms[0].submit();
}
```
#### 4.3 邮件发送
这部分实现的功能是将用户在前端输入的表单信息，并且通过输入验证的程序后，将文本信息汇总，通过PHPMailer发送至指定的邮箱。
该部分主要使用PHP语言实现，其中结合部分HTML。
详细代码如下所示：
```php
<?php
require 'PHPMailerAutoload.php'; //这里需要使用第三方的邮件发送包
$mail = new PHPMailer();
$mail->Encoding = "base64";
$mail->isSMTP(); // 使用SMTP服务
$mail->CharSet = "GB2312"; //应该使用"UTF-8"编码，但邮件收到乱码，所以使用GB2312;
$mail->Host = "smtp.163.com"; // 发送方的SMTP服务器地址
$mail->SMTPAuth = true; // 是否使用身份验证
$mail->Username = "****@163.com"; // 发送方的163邮箱用户名
$mail->Password = "yourpassword"; // 发送方的邮箱授权码
$mail->SMTPSecure = "ssl"; // 使用ssl协议方式
$mail->Port = 465; // 163邮箱的ssl协议方式端口号是465/994
//$mail->isHTML(true);
$mail->setFrom("****@163.com","邮件主题"); // 设置发件人信息
$mail->addAddress("收件人1@qq.com",""); // 设置收件人信息，可设置多个，复制粘贴此行修改邮箱地址即可
$mail->addAddress("收件人2@**.com",""); // 设置收件人信息，可设置多个，复制粘贴此行修改邮箱地址即可
$mail->addAddress("**@**.com",""); // 设置收件人信息，可设置多个，复制粘贴此行修改邮箱地址即可
$mail->addReplyTo("***@163.com","Reply"); // 设置回复人信息，指的是收件人收到邮件后，如果要回复，回复邮件将发送到的邮箱地址
//$mail->addCC("evolraelc9@163.com"); // 设置邮件抄送人，可以只写地址，上述的设置也可以只写地址
//$mail->addBCC("bbbb@163.com"); // 设置秘密抄送人
//$mail->addAttachment("bug0.jpg"); // 添加附件
//下面是将前面表单中填写的数据进行转码。
$nametemp = $_POST['name'];
$name2 = iconv('UTF-8','GB2312',$nametemp);
$emailtemp = $_POST['email'];
$email2 = iconv('UTF-8','GB2312',$emailtemp);
$phoneltemp = $_POST['phone'];
$phone2 = iconv('UTF-8','GB2312',$phoneltemp);
$bookSelecttemp = $_POST['bookSelect'];
$bookSelect2 = iconv('UTF-8','GB2312',$bookSelecttemp);
$commentstemp = $_POST['comments'];
$comments2 = iconv('UTF-8','GB2312',$commentstemp);
//下面是将数据汇总发送至邮箱
$mail->Subject = "网页收到新留言啦~~"; // 邮件标题
$mail->Body = " 用户姓名：".$name2."
QQ号码：".$email2."
手机号码：".$phone2."
反馈资料：".$bookSelect2."
反馈信息：".$comments2; // 邮件正文
//定义成功或出错弹窗显示的文本信息
$falied = "信息发送失败，请联系网站管理员！";
$falied2 = iconv('GB2312','UTF-8',$falied);
$succeed = "信息发送成功，我们已经收到您的反馈信息。本页面将关闭，请返回。感谢支持！";
$succeed2 = iconv('GB2312','UTF-8',$succeed);
//发送邮件
//如果没成功，弹窗显示错误信息
if(!$mail->send()){
echo "<script language=javascript>alert('$falied2');window.opener=null;window.top.open('','_self','');window.close(this);</script>";
//echo "Mailer Error: ".$mail->ErrorInfo; // 输出错误信息
}
//反之成功，显示发送成功文本信息，并将网页关闭，防止用户多次点击提交
else{
echo "<script language=javascript>alert('$succeed2');window.opener=null;window.top.open('','_self','');window.close(this);</script>";
}
?>
```
### 5 效果展示
首先请看运行效果展示。
#### 5.1 主页展示
留言系统主页如下图所示。
#### 5.2 填写不规范展示
如果不按规定来填写，启动输入验证程序，校验弹窗
1. 未输入任何信息，就点击提交按钮，效果如下：
2. 未选择反馈资料，点击提交按钮，效果如下：
3. 未输入反馈信息，点击提交按钮，提示如下：
#### 5.3 提交成功展示
1. 信息输入完毕，点击提交按钮，提交成功，提示如下：
2. 然后邮箱收到留言信息，如下图所示：
### 6 后记
本系统编写起来难度不大，且适用范围很广，实用性高。
### 7 参考资料
[1] Java Web应用开发技术与案例教程. 张继军 编著. 机械工业出版社
[2] CSDN其他博客
发表评论