前一篇介紹過聯絡我們的的前台程式，這篇會介紹如何取得前台聯絡表單所留言的內容，使用的網頁使用framework有jquery及easyui，利用datagrid來顯示所有的資料列，而重要的留言內容則顯示於iframe裡，如此可排除大部份的html tag產生的問題。
這程式目前缺少了幾個功能，並不影響使用，不過如果有需求的人倒可以自己加入使用：
- 前台留言後自動發mail給某位管理者
- 後台可回覆留言給使用者，寄送mail或電話聯絡後寫下聯絡事項
最主要是JavaMail的使用，及資料寫入資料庫的應用。
因為是後台，所以還需要一個登入畫面，再登入成功後可以顯示後台menus，利用easyui的layout排列north為資訊狀態，center為datagrid顯示聯絡資料列表，而east為留言的內容。
而網頁使用Ajax傳送get或post參數給後端，而後端程式回傳json格式如下：
- total：總筆數，grid顯示分頁toolbar使用的，會計算總頁數等…
- success：成功執行則回傳true，否則則回傳false
- msg：回傳的訊息，可於回傳success為false時，帶上錯誤訊息顯示給使用者知道
- rows：為一個陣列資料，每一筆資料都是一個json格式
程式碼如下：
index.jsp登入後台
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登入</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
height:100%;
border:none
}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
$(function(){
$(document).ready(function() {
// bind form using 'ajaxForm'
$('#myform').ajaxForm({
beforeSubmit: function(formData, jqForm, options){
var account = $("#account").val();
if(account==""){
alert("帳號不可為空白!");return false;}
var password = $("#password").val();
if(password==""){
alert("密碼不可為空白!");return false;}
$("#submit").attr("readonly",true);
}, // pre-submit callback
success: function(responseText, statusText, xhr, $form){
var json = jQuery.parseJSON(responseText);
if (json.success == false)
{
alert(json.msg);
}else
top.location.replace("./menus.jsp");
}, // post-submit callback
error:function(jqXHR, textStatus, errorThrown){
alert("伺服器端錯誤!");
},
complete:function(jqXHR, textStatus)
{
$("#submit").attr("readonly",false);
}
});
});
});
</script>
</head>
<body>
<table width="100%" height="100%">
<tr valign="middle" ><td align="center">
<form action="login.jsp" method="post" id="myform">
<table>
<tr><td style="width:80px">帳號</td><td><input id="account" type="text" name="account" /></td></tr>
<tr><td style="width:80px">密碼</td><td><input id="password" type="password" name="password" /></td></tr>
<tr><td colspan="2"><button type="submit" id="submit">登入</button></td></tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
login.jsp登入程式
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%><%
java.sql.Connection con = null;
java.sql.PreparedStatement pst = null;
net.sf.json.JSONObject json = new net.sf.json.JSONObject();
json.put("success",false);
json.put("msg","異常狀態");
json.put("code","");
try
{
String account = com.yslifes.util.StringUtils.nvl(request.getParameter("account"),"");
String password = com.yslifes.util.StringUtils.nvl(request.getParameter("password"),"");
if(account.equals("admin") && password.equals("admin"))
{
session.setAttribute( "user", "admin" );
json.put("success",true);
json.put("code","menus.jsp");
json.put("msg","登入成功!");
}else
{
json.put("success",false);
json.put("msg","帳號或密碼錯誤!");
}
}catch(Exception e)
{
json.put("msg",e.getMessage());
e.printStackTrace();
}finally
{
com.yslifes.db.DBClose.close(con);
}
out.print(json.toString());
%>
menus.jsp後台主要頁面,使用easyui排版
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>系統選單</title>
<link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/themes/icon.css">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/locale/easyui-lang-zh_TW.js"></script>
<script type="text/javascript">
$(function(){
$("#result-grid").datagrid({
url: "List.jsp",
rownumbers: true,
pagination: true, //分頁控件
singleSelect: true,
loadMsg: '載入中',
border: true,
pageList: [10,20,30,40,50],
pageSize : 20,
columns: [[{
field: 'id',
hidden:true
},{
field: 'kind_name',
title: '類型',
width: 80
},{
field: 'title',
title: '標題',
width: 120
}, {
field: 'content',
hidden:true
}, {
field: 'user_name',
title: '留言者',
width:120
}, {
field: 'user_email',
title: '信箱',
width: 120
}, {
field: 'user_tel',
title: '電話',
width: 90
}, {
field: 'postdate',
title: '時間',
width: 100
}]],
onClickRow: function(rowIndex, rowData) {
$("#content").contents().find('html body').html(rowData.content);
}
});
});
</script>
</head>
<body class="easyui-layout">
<div region="north" style="height:23px;background-color:gray">
blog.yslifes.com
</div>
<div region="center">
<table id="result-grid" fit="true"></table>
</div>
<div region="east" style="width:300px" title="留言內容">
<iframe frameborder="0" style="border:0px;width:100%;height:100%" id="content" >
</iframe>
</div>
</body>
</html>
List.jsp回傳的所有資料json格式
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%><%
java.sql.Connection con = null;
java.sql.PreparedStatement pst = null;
java.sql.ResultSet rs = null;
net.sf.json.JSONObject json = new net.sf.json.JSONObject();
json.put("success",false);
json.put("msg","異常狀態");
json.put("rows",new net.sf.json.JSONArray());
json.put("total",0);
try
{
int NowPage = com.yslifes.util.StringUtils.intNvl(request.getParameter("page"),1);
int PageRows = com.yslifes.util.StringUtils.intNvl(request.getParameter("rows"),20);
con = com.yslifes.db.DBPool.getConnection();
String sqlcount = "select count(*) as totrec "+
" from contact ";
pst = con.prepareStatement(sqlcount);
rs = pst.executeQuery();
rs.next();
int total = rs.getInt("totrec");
if(total>0)
{
json.put("total",total);
String sql = "select id,kind,title,user_name,user_email,user_tel,content,postdate "+
" from contact "+
"order by id desc limit "+((NowPage-1)*PageRows)+", "+ ((NowPage)*PageRows);
pst = con.prepareStatement(sql);
rs = pst.executeQuery();
while(rs.next())
{
net.sf.json.JSONObject ob = new net.sf.json.JSONObject();
ob.put("id",rs.getInt("id"));
ob.put("kind_name",rs.getString("kind").equals("1")?"關於產品":rs.getString("kind").equals("2")?"網站問題":"其它");
ob.put("title",rs.getString("title"));
ob.put("content",rs.getString("content"));
ob.put("user_name",rs.getString("user_name"));
ob.put("user_email",rs.getString("user_email"));
ob.put("user_tel",rs.getString("user_tel"));
ob.put("postdate",rs.getString("postdate"));
json.getJSONArray("rows").add(ob);
}
json.put("msg","");
}else
{
json.put("msg","查無資料!");
}
json.put("success",true);
}catch(java.sql.SQLException e)
{
json.put("msg",e.getMessage());
e.printStackTrace();
}finally
{
com.yslifes.db.DBClose.close(con);
}
out.print(json.toString());
%>
資料表可以參考上一篇
程式下載：