預約訂單
預約是對某項事情提前做出安排。客戶使用預約可以減少排隊時間，避免時間浪費，企業在收到客戶預約之後，可以提前做好準備，提高服務速度
頁面布局
主要兩個部分，一個是使用者填寫表單，另一個是資訊确認頁面
使用者填寫表單的頁面是第一個Web頁面，該Web頁面上可以放置公司的Logo或者宣傳圖檔以及頁面功能介紹.代碼如下
<div class="banner">
<div id="wrapper">
<div id="scroller" style="float:none">
<ul id="thelist"><img src="img/logo.png" alt="預約口腔醫生" style="width:100%">
</ul>
</div>
</div>
<div class="clr"></div>
</div>
<div class="cardexplain">
<ul class="round">
<li>
<h2>預約口腔醫生</h2>
<div class="text">
九江市XX口腔竭誠為您服務<br/>
聯系電話：0731-1234567</div>
</li>
</ul>
最後需要使用者填寫表單，并将表單資訊通過POST送出給submit.php檔案，代碼如下：
<form method="post" action="submit.php" id="form" onsubmit="return tgSubmit()">
<ul class="round">
<li class="title mb"><span class="none">請填寫以下資訊</span></li>
<li class="nob">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>姓名</th>
<td><input type="text" class="px" placeholder="請輸入姓名" id="name" name="name" value="">
</td>
</tr>
</tbody>
</table>
</li>
<li class="nob">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>性别</th>
<td><select style="line-height:35px;" id="sex" name="sex" class="dropdown-select"><option value="" selected="">請選擇性别</option><option value="男">男</option><option value="女">女</option></select>
</td>
</tr>
</tbody>
</table>
</li>
<li class="nob">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>年齡</th>
<td><input type="text" class="px" placeholder="請輸入年齡" id="age" name="age" value="">
</td>
</tr>
</tbody>
</table>
</li>
<li class="nob">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>手機</th>
<td><input type="text" class="px" placeholder="請輸入手機" id="mobile" name="mobile" value="">
</td>
</tr>
</tbody>
</table>
</li>
<li class="nob">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>預約日期</th>
<td>
<select style="line-height:35px;" id="bookdate" name="bookdate" class="dropdown-select">
<option value="" selected="">請選擇預約日期</option>
<?php
for ($i = ; $i <= ; $i++) {
$offset = strtotime("+".($i-)." day");
$bDate = date("m月d日",$offset);
$optionString .= '<option value="'.$bDate.'">'.$bDate.'</option>';
}
echo $optionString;
?>
</select>
</td>
</tr>
</tbody>
</table>
</li>
<li class="nob">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>預約專家</th>
<td><select style="line-height:35px;" id="bookexpert" name="bookexpert" class="dropdown-select"><option value="" selected="">請選擇預約專家</option><option value="陳豔">陳豔</option><option value="楊廣勝">楊廣勝</option><option value="周平">周平</option></select>
</td>
</tr>
</tbody>
</table>
</li>
</ul>
<div class="footReturn" style="text-align:center">
<input type="hidden" name="openid" value="<?php echo $openid;?>">
<input type="submit" style="margin:0 auto 20px auto;width:90%" class="submit" value="送出資訊">
</div>
</form>
注釋：
預約日期：由PHP程式生成未來的6天的日期，在送出的表單資訊中還将使用者的資訊id隐藏起來，一起送出
在這些表選項還需要使用JavaScript來驗證使用者是否輸入正确，并在錯誤輸入時顯示提示語，相應代碼如下：
<script>
function showTip(tipTxt) {
var div = document.createElement('div');
div.innerHTML = '<div class="deploy_ctype_tip"><p>' + tipTxt + '</p></div>';
var tipNode = div.firstChild;
$("#wrap").after(tipNode);
setTimeout(function () {
$(tipNode).remove();
}, );
}
function tgSubmit(){
var name=$("#name").val();
if($.trim(name) == ""){
showTip('請輸入姓名')
return false;
}
var sex=$("#sex").val();
var age=$("#age").val();
var patrn = /^[0-9]{1,2}$/;
if (!patrn.exec($.trim(age))) {
showTip('請輸入年齡')
return false;
}
var mobile=$("#mobile").val();
if($.trim(mobile) == ""){
showTip('請正确填寫手機号碼')
return false;
}
var patrn = /^13[0-9]{9}$|^15[0-9]{9}$|^18[0-9]{9}$/;
if (!patrn.exec($.trim(mobile))) {
showTip('請正确填寫手機号碼')
return false;
}
var bookdate=$("#bookdate").val();
if($.trim(bookdate) == ""){
showTip('請輸入預約日期')
return false;
}
var bookexpert=$("#bookexpert").val();
if($.trim(bookexpert) == ""){
showTip('請輸入預約專家')
return false;
}
return true;
}
</script>
整體order.php使用者填寫表單代碼如下：
<?php
$openid = $_GET["openid"];
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>預約口腔醫生</title>
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link href="css/order.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body id="wrap" style="">
<style>
.deploy_ctype_tip{z-index:;width:%;text-align:center;position:fixed;top:%;margin-top:-px;left:;}.deploy_ctype_tip p{display:inline-block;padding:px px;border:solid #d6d482 px;background:#f5f4c5;font-size:px;color:#8f772f;line-height:px;border-radius:px;}
</style>
<div class="banner">
<div id="wrapper">
<div id="scroller" style="float:none">
<ul id="thelist"><img src="img/logo.png" alt="預約口腔醫生" style="width:100%">
</ul>
</div>
</div>
<div class="clr"></div>
</div>
<div class="cardexplain">
<ul class="round">
<li>
<h2>預約口腔醫生</h2>
<div class="text">
長沙市XX口腔竭誠為您服務<br/>
聯系電話：0731-87654321</div>
</li>
</ul>
<form method="post" action="submit.php" id="form" onsubmit="return tgSubmit()">
<ul class="round">
<li class="title mb"><span class="none">請填寫以下資訊</span></li>
<li class="nob">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>姓名</th>
<td><input type="text" class="px" placeholder="請輸入姓名" id="name" name="name" value="">
</td>
</tr>
</tbody>
</table>
</li>
<li class="nob">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>性别</th>
<td><select style="line-height:35px;" id="sex" name="sex" class="dropdown-select"><option value="" selected="">請選擇性别</option><option value="男">男</option><option value="女">女</option></select>
</td>
</tr>
</tbody>
</table>
</li>
<li class="nob">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>年齡</th>
<td><input type="text" class="px" placeholder="請輸入年齡" id="age" name="age" value="">
</td>
</tr>
</tbody>
</table>
</li>
<li class="nob">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>手機</th>
<td><input type="text" class="px" placeholder="請輸入手機" id="mobile" name="mobile" value="">
</td>
</tr>
</tbody>
</table>
</li>
<li class="nob">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>預約日期</th>
<td>
<select style="line-height:35px;" id="bookdate" name="bookdate" class="dropdown-select">
<option value="" selected="">請選擇預約日期</option>
<?php
for ($i = ; $i <= ; $i++) {
$offset = strtotime("+".($i-)." day");
$bDate = date("m月d日",$offset);
$optionString .= '<option value="'.$bDate.'">'.$bDate.'</option>';
}
echo $optionString;
?>
</select>
</td>
</tr>
</tbody>
</table>
</li>
<li class="nob">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>預約專家</th>
<td><select style="line-height:35px;" id="bookexpert" name="bookexpert" class="dropdown-select"><option value="" selected="">請選擇預約專家</option><option value="陳豔">陳豔</option><option value="楊廣勝">楊廣勝</option><option value="周平">周平</option></select>
</td>
</tr>
</tbody>
</table>
</li>
</ul>
<div class="footReturn" style="text-align:center">
<input type="hidden" name="openid" value="<?php echo $openid;?>">
<input type="submit" style="margin:0 auto 20px auto;width:90%" class="submit" value="送出資訊">
</div>
</form>
<script>
function showTip(tipTxt) {
var div = document.createElement('div');
div.innerHTML = '<div class="deploy_ctype_tip"><p>' + tipTxt + '</p></div>';
var tipNode = div.firstChild;
$("#wrap").after(tipNode);
setTimeout(function () {
$(tipNode).remove();
}, );
}
function tgSubmit(){
var name=$("#name").val();
if($.trim(name) == ""){
showTip('請輸入姓名')
return false;
}
var sex=$("#sex").val();
var age=$("#age").val();
var patrn = /^[0-9]{1,2}$/;
if (!patrn.exec($.trim(age))) {
showTip('請輸入年齡')
return false;
}
var mobile=$("#mobile").val();
if($.trim(mobile) == ""){
showTip('請正确填寫手機号碼')
return false;
}
var patrn = /^13[0-9]{9}$|^15[0-9]{9}$|^18[0-9]{9}$/;
if (!patrn.exec($.trim(mobile))) {
showTip('請正确填寫手機号碼')
return false;
}
var bookdate=$("#bookdate").val();
if($.trim(bookdate) == ""){
showTip('請輸入預約日期')
return false;
}
var bookexpert=$("#bookexpert").val();
if($.trim(bookexpert) == ""){
showTip('請輸入預約專家')
return false;
}
return true;
}
</script>
</div>
</body>
</html>
開發實作：
當使用者單擊“送出資訊”按鈕後，這些表單資訊就被POST送出到submit.php中了。
使用 POST變量可以擷取這些變量的值，與 P O S T 變 量 可 以 獲 取 這 些 變 量 的 值 ， 與 _GET變量不同的是，它們不會顯示在URL中，代碼如下：
$openid = $_POST["openid"];
$name = $_POST["name"];
$sex = $_POST["sex"];
$age = $_POST["age"];
$mobile = $_POST["mobile"];
$bookdate = $_POST["bookdate"];
$bookexpert = $_POST["bookexpert"];
我們通過PHPMailer将訂單的内容發送到郵件中，PHPMailer是PHP語言下的一個功能全面的電子郵件類。
使用PHPMailer發送訂單的代碼如下所示：
$result = sendMail();
function sendMail()
{
global $openid;
global $name;
global $sex;
global $age;
global $mobile;
global $bookdate;
global $bookexpert;
$Subject = "微信訂單";
$receiver = "[email protected]";
$content = "姓名：".$name."\n".
"性别：".$sex."\n".
"年齡：".$age."\n".
"手機：".$mobile."\n".
"預約日期：".$bookdate."\n".
"預約專家：".$bookexpert."\n".
"微信ID：".$openid;
require_once('phpmailer/class.phpmailer.php');
$mail = new PHPMailer();
$mail->IsSMTP();
$mail->CharSet = "utf-8";
$mail->Host = "smtp.163.com";
$mail->SMTPAuth = true;
$mail->Username = "[email protected]";
$mail->Password = "yourpassword";
$mail->From = "[email protected]";
$mail->FromName = "微信訂單";
$mail->AddAddress($receiver, "");
$mail->Subject = $Subject;
$mail->Body = $content;
if(!$mail->Send()){
return '送出失敗！'.$mail->ErrorInfo;
}else{
return '送出成功';
}
}
在上述代碼中，需要配置SMTP伺服器，啟用SMTP認證，并且配置賬号，密碼，收件人郵箱，郵件标題及内容，最後使用
send()
函數發送郵件。
郵件發送結果和其他訂單資訊一起頁面中顯示出來，實作代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>預約口腔醫生</title>
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link href="css/order.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body id="wrap" style="">
<div class="banner">
<div id="wrapper">
<div id="scroller" style="float:none">
<ul id="thelist">
<li style="float:none">
<img src="img/logo.png" alt="" style="width:100%">
</li>
</ul>
</div>
</div>
<div class="clr"></div>
</div>
<div class="cardexplain">
<ul class="round roundyellow" id="success" >
<li style="height:40px;line-height:40px; font-size:16px; text-align:center"><?php echo $result;?></li>
</ul>
<ul class="round">
<li class="title mb"><span class="none">您送出的資訊</span></li>
<li class="nob" style="height:30px;line-height:30px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>姓名</th>
<td><?php echo $name;?></td>
</tr>
</tbody>
</table>
</li>
<li class="nob" style="height:30px;line-height:30px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>性别</th>
<td><?php echo $sex;?></td>
</tr>
</tbody>
</table>
</li>
<li class="nob" style="height:30px;line-height:30px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>年齡</th>
<td><?php echo $age;?></td>
</tr>
</tbody>
</table>
</li>
<li class="nob" style="height:30px;line-height:30px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>手機</th>
<td><?php echo $mobile;?></td>
</tr>
</tbody>
</table>
</li>
<li class="nob" style="height:30px;line-height:30px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>預約日期</th>
<td><?php echo $bookdate;?></td>
</tr>
</tbody>
</table>
</li>
<li class="nob" style="height:30px;line-height:30px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>預約專家</th>
<td><?php echo $bookexpert;?></td>
</tr>
</tbody>
</table>
</li>
</ul>
</div>
</body>
</html>
整體submit.php資訊确認頁面代碼如下：
<?php
$openid = $_POST["openid"];
$name = $_POST["name"];
$sex = $_POST["sex"];
$age = $_POST["age"];
$mobile = $_POST["mobile"];
$bookdate = $_POST["bookdate"];
$bookexpert = $_POST["bookexpert"];
/*
$result = sendMail();
function sendMail()
{
global $openid;
global $name;
global $sex;
global $age;
global $mobile;
global $bookdate;
global $bookexpert;
$Subject = "微信訂單";
$receiver = "[email protected]";
$content = "姓名：".$name."\n".
"性别：".$sex."\n".
"年齡：".$age."\n".
"手機：".$mobile."\n".
"預約日期：".$bookdate."\n".
"預約專家：".$bookexpert."\n".
"微信ID：".$openid;
require_once('phpmailer/class.phpmailer.php');
$mail = new PHPMailer();
$mail->IsSMTP();
$mail->CharSet = "utf-8";
$mail->Host = "18897923095.163.com";
$mail->SMTPAuth = true;
$mail->Username = "[email protected]";
$mail->Password = "liang101295";
$mail->From = "[email protected]";
$mail->FromName = "微信訂單";
$mail->AddAddress($receiver, "");
$mail->Subject = $Subject;
$mail->Body = $content;
if(!$mail->Send()){
return '送出失敗！'.$mail->ErrorInfo;
}else{
return '送出成功';
}
}
*/
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>預約口腔醫生</title>
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link href="css/order.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body id="wrap" style="">
<div class="banner">
<div id="wrapper">
<div id="scroller" style="float:none">
<ul id="thelist">
<li style="float:none">
<img src="img/logo.png" alt="" style="width:100%">
</li>
</ul>
</div>
</div>
<div class="clr"></div>
</div>
<div class="cardexplain">
<ul class="round roundyellow" id="success" >
<li style="height:40px;line-height:40px; font-size:16px; text-align:center"><?php echo $result;?></li>
</ul>
<ul class="round">
<li class="title mb"><span class="none">您送出的資訊</span></li>
<li class="nob" style="height:30px;line-height:30px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>姓名</th>
<td><?php echo $name;?></td>
</tr>
</tbody>
</table>
</li>
<li class="nob" style="height:30px;line-height:30px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>性别</th>
<td><?php echo $sex;?></td>
</tr>
</tbody>
</table>
</li>
<li class="nob" style="height:30px;line-height:30px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>年齡</th>
<td><?php echo $age;?></td>
</tr>
</tbody>
</table>
</li>
<li class="nob" style="height:30px;line-height:30px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>手機</th>
<td><?php echo $mobile;?></td>
</tr>
</tbody>
</table>
</li>
<li class="nob" style="height:30px;line-height:30px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>預約日期</th>
<td><?php echo $bookdate;?></td>
</tr>
</tbody>
</table>
</li>
<li class="nob" style="height:30px;line-height:30px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
<tbody>
<tr>
<th>預約專家</th>
<td><?php echo $bookexpert;?></td>
</tr>
</tbody>
</table>
</li>
</ul>
</div>
</body>
</html>
index.php整體代碼如下：
<?php
/*
CopyRight 2018 All Rights Reserved
*/
define("TOKEN", "weixin");
$wechatObj = new wechatCallbackapiTest();
if (!isset($_GET['echostr'])) {
$wechatObj->responseMsg();
}else{
$wechatObj->valid();
}
class wechatCallbackapiTest
{
public function valid()
{
$echoStr = $_GET["echostr"];
if($this->checkSignature()){
echo $echoStr;
exit;
}
}
private function checkSignature()
{
$signature = $_GET["signature"];
$timestamp = $_GET["timestamp"];
$nonce = $_GET["nonce"];
$token = TOKEN;
$tmpArr = array($token, $timestamp, $nonce);
sort($tmpArr);
$tmpStr = implode($tmpArr);
$tmpStr = sha1($tmpStr);
if($tmpStr == $signature){
return true;
}else{
return false;
}
}
public function responseMsg()
{
$postStr = $GLOBALS["HTTP_RAW_POST_DATA"];
if (!empty($postStr)){
$this->logger("R ".$postStr);
$postObj = simplexml_load_string($postStr, 'SimpleXMLElement', LIBXML_NOCDATA);
$RX_TYPE = trim($postObj->MsgType);
switch ($RX_TYPE)
{
case "event":
$result = $this->receiveEvent($postObj);
break;
case "text":
$result = $this->receiveText($postObj);
break;
}
$this->logger("T ".$result);
echo $result;
}else {
echo "";
exit;
}
}
private function receiveEvent($object)
{
$content = "";
switch ($object->Event)
{
case "subscribe":
$content = "歡迎關注 德強1012 ";
break;
case "unsubscribe":
$content = "取消關注";
break;
}
$result = $this->transmitText($object, $content);
return $result;
}
private function receiveText($object)
{
$keyword = trim($object->Content);
$category = substr($keyword,,);
$code = trim(substr($keyword,,strlen($keyword)));
switch ($category)
{
case "會員":
$content[] = array("Title" =>"會員卡",
"Description" =>"點選圖檔領取會員卡",
"PicUrl" =>"http://pic2.ooopic.com/01/38/77/75bOOOPICea.jpg",
"Url" =>"http://1.dq095.applinzi.com/91_membercard/member.php?openid=".$object->FromUserName);
break;
case "預約":
$content[] = array("Title" =>"預約口腔醫生",
"Description" =>"點選圖檔開始預約",
"PicUrl" =>"http://pic4.nipic.com/20091021/3320206_171831027464_2.jpg",
"Url" =>"http://1.dq095.applinzi.com/92_order/order.php?openid=".$object->FromUserName);
break;
default:
$content = "";
break;
}
if(is_array($content)){
$result = $this->transmitNews($object, $content);
}else{
$result = $this->transmitText($object, $content);
}
return $result;
}
private function transmitText($object, $content)
{
$textTpl = "<xml>
<ToUserName><![CDATA[%s]]></ToUserName>
<FromUserName><![CDATA[%s]]></FromUserName>
<CreateTime>%s</CreateTime>
<MsgType><![CDATA[text]]></MsgType>
<Content><![CDATA[%s]]></Content>
</xml>";
$result = sprintf($textTpl, $object->FromUserName, $object->ToUserName, time(), $content);
return $result;
}
private function transmitNews($object, $arr_item)
{
if(!is_array($arr_item))
return;
$itemTpl = " <item>
<Title><![CDATA[%s]]></Title>
<Description><![CDATA[%s]]></Description>
<PicUrl><![CDATA[%s]]></PicUrl>
<Url><![CDATA[%s]]></Url>
</item>
";
$item_str = "";
foreach ($arr_item as $item)
$item_str .= sprintf($itemTpl, $item['Title'], $item['Description'], $item['PicUrl'], $item['Url']);
$newsTpl = "<xml>
<ToUserName><![CDATA[%s]]></ToUserName>
<FromUserName><![CDATA[%s]]></FromUserName>
<CreateTime>%s</CreateTime>
<MsgType><![CDATA[news]]></MsgType>
<Content><![CDATA[]]></Content>
<ArticleCount>%s</ArticleCount>
<Articles>
$item_str</Articles>
</xml>";
$result = sprintf($newsTpl, $object->FromUserName, $object->ToUserName, time(), count($arr_item));
return $result;
}
private function logger($log_content)
{
}
}
?>