[JAVA]聯絡我們表單程式後台

前一篇介紹過聯絡我們的的前台程式,這篇會介紹如何取得前台聯絡表單所留言的內容,使用的網頁使用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());

    %>

資料表可以參考上一篇

程式下載:

WebHD

發表迴響