前陣子寫了個小工具，後來經過經理的審覈後給了我幾個改進的建議，第一是簡化界面，這個工具將來會用手機來進行管理，所以界面上要儘量簡化，省去不必要的組件，第二是使用jquery mobile來美化界面，第三是使用ajax post方式來提交數據，避免傳統的post方法重載整個頁面。
第一，我加上了檢測客戶端設備的頁面爲首頁,這樣就能在訪問首頁的時候根據設備來做重定向，
此代碼參考了csdn裏某大牛的文章，做了部分修改，原文出自這裏：鏈接
index.php代碼爲：
<?php
function is_mobile(){
$regExp="/mobile|nokia|iphone|ipad|android|samsung|htc|motorola|blackberry|ericsson|huawei|dopod|amoi|gionee|^sie\-|^bird|^zte\-|haier|";
$regExp.="blazer|netfront|helio|hosin|novarra|techfaith|palmsource|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|";
$regExp.="symbian|smartphone|midp|wap|phone|windows ce|CoolPad|webos|iemobile|^spice|longcos|pantech|portalmmm|";
$regExp.="alcatel|ktouch|nexian|^sam\-|s[cg]h|^lge|philips|sagem|wellcom|bunjalloo|maui|";
$regExp.="jig\s browser|hiptop|ucweb|ucmobile|opera\s*mobi|opera\*mini|mqqbrowser|^benq|^lct";
$regExp.="480×640|640x480|320x320|240x320|320x240|176x220|220x176/i";
if(!isset($_SERVER['HTTP_USER_AGENT'])){
return true;
}else{
return @$_GET['mobile'] || isset($_SERVER['HTTP_X_WAP_PROFILE']) || isset($_SERVER['HTTP_PROFILE']) || preg_match($regExp, strtolower($_SERVER['HTTP_USER_AGENT']));
}
}
?>
<?php echo 'you are '.(is_mobile()? 'mobile' : 'desktop').' user, redirecting...';?>
<?php is_mobile()? $rd_link='mobile.php' : $rd_link='desktop.php';
echo $rd_link;
header("Location:$rd_link");
?>第二，桌面版界面我改成這樣了
跟之前的對比：
是不是簡潔了很多？
desktop.php
桌面版主要使用jquery的document.ready來檢測事件，使用傳統的post提交數據
代碼附上：
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="js/tooltipster-master/css/tooltipster.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="js/tooltipster-master/js/jquery.tooltipster.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".borrow_disable").attr('disabled','disable');
$(".return_disable").attr('disabled','disable');
$(".select_staff").each(function(){
var staff=$(this).val();
//alert(staff);
$(this).closest('td').next().find('input[name="staff"]').val(staff);
})
$(".select_staff").each(function(){
$(this).change(function(){
var staff=$(this).val();
$(this).closest('td').next().find('input[name="staff"]').val(staff);
});
//alert(staff);
})
$(".borrow_form").each(function(){
$(this).submit(function(event){
var staff=$(this).find('input[name="staff"]').val();
if (staff=="N/A")
{
event.preventDefault();
alert('please select a staff!');
}
})
})
$(".machine").each(function(){
$(this).tooltipster({
position:'left'
}) ;
})
$(".borrow_time").each(function(){
$(this).tooltipster({
position:'right',
contentAsHTML: true
}) ;
})
$(".return_time").each(function(){
$(this).tooltipster({
position:'right',
contentAsHTML: true
}) ;
})
});
</script>
</head>
<body>
<div class=title>
<h3>6waves device management</h3>
</div>
<div class=content>
<table>
<tr><th>Device</th><th>Staff</th><th>Action</th></tr>
<?php
require_once('device_management/database.php');
require_once('device_management/config.inc');
$staff_list=$staff;
$DB = new Database ($DB["host"], $DB["user"], $DB["pass"], $DB["name"]);
if ($_REQUEST['borrowed']==1)
{
$data['borrowed']=1;
if ((!empty($_REQUEST['device_id'])) and (!empty($_REQUEST['staff'])) and ($_REQUEST['staff']!=="N/A"))
{
$data['device_id']=$_REQUEST['device_id'];
$data['staff']=$_REQUEST['staff'];
$data['borrow_time']=date('Y-m-d H:i:s',time());
$wherestr="`device_id`='".$data['device_id']."'";
$DB->updateRecord('device_map',$data,$wherestr);
}
}
if ($_REQUEST['borrowed']==0)
{
$data['borrowed']=0;
if (!empty($_REQUEST['device_id']))
{
$data['device_id']=$_REQUEST['device_id'];
$data['staff']=$_REQUEST['staff'];
$data['return_time']=date('Y-m-d H:i:s',time());
$wherestr="`device_id`='".$data['device_id']."'";
$DB->updateRecord('device_map',$data,$wherestr);
}
}
//var_dump($data);
$sql="select `device_id`,`type`,`alias` , `staff`,`borrowed`,`borrow_time`,`return_time` from `device_map`";
$rs=$DB->Query($sql);
while ($row=mysql_fetch_assoc($rs) )
{
$machine=$row['device_id'];
$type=$row['type'];
$alias=$row['alias'];
$device_icon="./image/".$row['type'].".png";
if ($row['borrow_time']!=='0000-00-00 00:00:00')
{
$borrow_time=$row['borrow_time'];
$borrow_time_class="borrow_time";
}
else
{
$borrow_time="N/A";
$borrow_time_class="no_time";
}
if ($row['return_time']!=='0000-00-00 00:00:00')
{
$return_time=$row['return_time'];
$return_time_class="return_time";
}
else
{
$return_time="N/A";
$return_time_class="no_time";
}
if (is_null($row['staff'] ))
{
$staff="N/A";
}
else $staff=$row['staff'];
if ($staff=="N/A")
{
$staff="N/A";
}
if ($row['borrowed']==0)
{
$borrow_class='borrow_enable';
$borrowed=0;
$return_class='return_disable';
$last_borrow=$row['borrow_time'];
$last_return=$row['return_time'];
$status="available";
$status_class=$return_time_class;
$info="last borrow time: ".$last_borrow."<br/> last return time: ".$last_return;
$borrow_form="<form class=borrow_form method=post><input class=hidden value=$machine name=device_id><input class=\"hidden\" value=\"\" name=staff><input class=hidden value=1 name=borrowed><input class=$borrow_class type=submit value=borrow></form>";
$form=$borrow_form;
}
else
{
$borrow_class='borrow_disable';
$borrowed=1;
$return_class='return_enable';
$last_borrow=$row['borrow_time'];
$status="borrowed";
$status_class=$borrow_time_class;
$info="last borrow time: ".$last_borrow;
$return_form="<form class=return_form method=post><input class=hidden value=$machine name=device_id><input class=hidden value=0 name=borrowed><input class=$return_class type=submit value=return></form>";
$form=$return_form;
}
$options="";
//echo $staff;exit;
if ($staff=="N/A")
{
$options="<option selected value=\"N/A\">N/A</option>" ;
//echo $options."\n";
}
else
{
$options="<option value=\"N/A\">N/A</option>" ;
$selected_class="unselected";
}
foreach ($staff_list as $stf)
{
if ($staff == $stf)
{
$options.="<option style=\"background-color:green;color:#FFF\" selected value=\"".$staff."\">$staff</option>" ;
$selected_class="selected";
}
else
{
$options.="<option value=\"$stf\">$stf</option>";
//$selected_class="unselected";
}
}
//echo $options;
echo "<tr><td class=machine title=\"$alias\"><img class=device_icon title=\"$alias\" src=$device_icon><span title=\"$alias\">".$machine."</span></td><td class=staff><select class=\"select_staff\" name=staff>$options</select></td><td class=$status_class title=\"$info\">$form</td></tr>";
// }
}
$DB->Close();
?>
</table>
</div>
</body>
</html>第三，手機版的界面改進
效果圖:
有木有發現按鈕和選擇框都被放大了很多？這是主要爲了顯示在手機上而優化的，直接應用了jquery
mobile的庫，mobile.php代碼如下：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
//這一行很管用，主要是在手機裏能100%顯示並禁止縮放界面
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="js/tooltipster-master/css/tooltipster.css">
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css">
<!--<link rel="stylesheet" type="text/css" href="css/jquery.mobile.min.css">-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
//加載jquerymobile的css和js庫
<script type="text/javascript" src="js/tooltipster-master/js/jquery.tooltipster.min.js"></script>
<script type="text/javascript">
/*檢測選擇框裏員工名字的改變傳遞給表單*/
$(document).on('change','.select_staff',function(){
var staff=this.value;
$(this).closest('td').next().find('input[name="staff"]').val(staff);
});
/*檢測titile的變化並觸發tooltipster來改變提示字符串*/
$(document).on('change','.borrow_time',function(){
$(this).tooltipster({
position:'left',
contentAsHTML: true
}) ;
});
$(document).on('change','.return_time',function(){
$(this).tooltipster({
position:'right',
contentAsHTML: true
}) ;
});
//$(document).ready(function(){
//jquery.document.ready在手機里加載後不管用，只能用以下on pageinit事件來檢測觸發
$(document).on('pageinit',function(){
//$(".borrow_disable").attr('disabled','disable');
//$(".return_disable").attr('disabled','disable');
$(".select_staff").each(function(){
var staff=$(this).val();
$(this).closest('td').next().find('input[name="staff"]').val(staff);
})
/*以下使用ajax post的方式提交數據給後臺cgi.php處理，並根據返回的數據處理前端的變更*/
$(".borrow_form").submit(function(event){
var staff=$(this).find('input[name="staff"]').val();
var staff_input=$(this).find('input[name="staff"]');
var span_select_staff=$(this).closest('td').prev().find('span.select_staff');
var select_staff=$(this).closest('td').prev().find('select.select_staff');
if (staff=="N/A" || staff=="")
{
event.preventDefault();
alert('please select a staff!');
}
// ajax post data start
else
{
event.preventDefault();
var device_id=$(this).find('input[name="device_id"]').val();
var borrowed=$(this).find('input[name="borrowed"]').val();
var borrowed_input=$(this).find('input[name="borrowed"]');
//var submit_input=$(this).find('input[type="submit"]');
var submit_input=$(this).find('div');
var time_object=$(this).closest('td').next();
$.post("cgi.php", {device_id:device_id,staff:staff,borrowed:borrowed}, function(resp)
{
if (resp.error==0)
{
alert(resp.msg);
borrowed_input.val(resp.borrowed_set);
//submit_input.text('return<br/><input'+ ' type="submit"'+' value="return" '+' class="return_enable">');
select_staff.filter('option[value=\''+resp.selected_staff+'\']').prop('selected','selected');
//select_staff.prop('selected',false).filter('option[value=\''+resp.selected_staff+'\']').prop('selected',true);
//select_staff.val(resp.selected_staff);
span_select_staff.text(resp.selected_staff);
staff_input.val(resp.selected_staff);
submit_input.text(resp.submit_input_value);
submit_input.val(resp.submit_input_value);
submit_input.append('<input'+ ' type="submit"'+' value='+resp.submit_input_value+'>');
//submit_input.attr('class','return_enable');
time_object.attr('class',resp.time_class);
time_object.attr('title',resp.time);
}
else
{
alert(resp.msg);
}
},"json")
}
// ajax post data end
})
$(".machine").tooltipster({
position:'left'
}) ;
$(".borrow_time").tooltipster({
position:'left',
contentAsHTML: true
}) ;
$(".return_time").tooltipster({
position:'left',
contentAsHTML: true
}) ;
$(".borrow_time").change(function(){
tooltipster({
position:'left'
}) ;
}) ;
$(".return_time").change(function(){
tooltipster({
position:'left'
}) ;
}) ;
});
</script>
</head>
<body>
<div id="mobile">
<header data-role="header"><h3>6waves device management</h3></header>
<div data-role="content" id="content">
<table>
<thead>
<tr><th>Device</th><th>Staff</th><th>Action</th><th></th></tr>
</thead>
<tbody>
<?php
require_once('device_management/database.php');
require_once('device_management/config.inc');
$staff_list=$staff;
$DB = new Database ($DB["host"], $DB["user"], $DB["pass"], $DB["name"]);
if ($_REQUEST['borrowed']==1)
{
$data['borrowed']=1;
if ((!empty($_REQUEST['device_id'])) and (!empty($_REQUEST['staff'])) and ($_REQUEST['staff']!=="N/A"))
{
$data['device_id']=$_REQUEST['device_id'];
$data['staff']=$_REQUEST['staff'];
$data['borrow_time']=date('Y-m-d H:i:s',time());
$wherestr="`device_id`='".$data['device_id']."'";
$DB->updateRecord('device_map',$data,$wherestr);
}
}
if ($_REQUEST['borrowed']==0)
{
$data['borrowed']=0;
if (!empty($_REQUEST['device_id']))
{
$data['device_id']=$_REQUEST['device_id'];
$data['staff']=$_REQUEST['staff'];
$data['return_time']=date('Y-m-d H:i:s',time());
$wherestr="`device_id`='".$data['device_id']."'";
$DB->updateRecord('device_map',$data,$wherestr);
}
}
//var_dump($data);
$sql="select `device_id`,`type`,`alias` , `staff`,`borrowed`,`borrow_time`,`return_time` from `device_map`";
$rs=$DB->Query($sql);
while ($row=mysql_fetch_assoc($rs) )
{
$machine=$row['device_id'];
$type=$row['type'];
$alias=$row['alias'];
$device_icon="./image/".$row['type'].".png";
if ($row['borrow_time']!=='0000-00-00 00:00:00')
{
$borrow_time=$row['borrow_time'];
$borrow_time_class="borrow_time";
}
else
{
$borrow_time="N/A";
$borrow_time_class="no_time";
}
if ($row['return_time']!=='0000-00-00 00:00:00')
{
$return_time=$row['return_time'];
$return_time_class="return_time";
}
else
{
$return_time="N/A";
$return_time_class="no_time";
}
if (is_null($row['staff'] ))
{
$staff="N/A";
}
else $staff=$row['staff'];
if ($staff=="N/A")
{
$staff="N/A";
}
if ($row['borrowed']==0)
{
$borrow_class='borrow_enable';
$borrowed=0;
$return_class='return_disable';
$last_borrow=$row['borrow_time'];
$last_return=$row['return_time'];
$status="available";
$status_class=$return_time_class;
$info="last borrow time: ".$last_borrow."<br/> last return time: ".$last_return;
$borrow_form="<form class=borrow_form method=post><input type=hidden value=$machine name=device_id><input type=hidden value=\"\" name=staff><input type=hidden value=1 name=borrowed><input class=$borrow_class type=submit value=borrow></form>";
$form=$borrow_form;
}
else
{
$borrow_class='borrow_disable';
$borrowed=1;
$return_class='return_enable';
$last_borrow=$row['borrow_time'];
$status="borrowed";
$status_class=$borrow_time_class;
$info="last borrow time: ".$last_borrow;
$borrow_form="<form class=borrow_form method=post><input type=hidden value=$machine name=device_id><input type=hidden value=0 name=borrowed><input class=$return_class type=submit value=return></form>";
$form=$borrow_form;
}
$options="";
//echo $staff;exit;
if ($staff=="N/A")
{
$options="<option selected value=\"N/A\">N/A</option>" ;
//echo $options."\n";
}
else
{
$options="<option value=\"N/A\">N/A</option>" ;
$selected_class="unselected";
}
foreach ($staff_list as $stf)
{
if ($staff == $stf)
{
$options.="<option style=\"background-color:green;color:#FFF\" selected value=\"".$staff."\">$staff</option>" ;
$selected_class="selected";
}
else
{
$options.="<option value=\"$stf\">$stf</option>";
}
}
echo "<tr><td class=machine title=\"$alias\" style=\"white-space:nowrap\"><img class=device_icon title=\"$alias\" src=$device_icon align=\"absmiddle\"><span title=\"$alias\">".$machine."</span></td><td><select class=\"select_staff\" name=staff >$options</select></td><td>$form</td><td class=$status_class title=\"$info\"><img src=image/info.png></td></tr>";
// }
}
$DB->Close();
?>
</tbody>
</table>
</div>
</div>
</body>
</html>有個後臺的腳本cgi.php來接收處理前端的請求，代碼附上：
<?php
require_once('device_management/database.php');
require_once('device_management/config.inc');
$staff_list=$staff;
$DB = new Database ($DB["host"], $DB["user"], $DB["pass"], $DB["name"]);
/*borrowed字段在數據庫裏1表示已借出，0表示沒借，已歸還狀態*/
if ($_REQUEST['borrowed']==1)
{
$data['borrowed']=1;
if ((!empty($_REQUEST['device_id'])) and (!empty($_REQUEST['staff'])) and ($_REQUEST['staff']!=="N/A"))
{
$data['device_id']=$_REQUEST['device_id'];
$data['staff']=$_REQUEST['staff'];
$data['borrow_time']=date('Y-m-d H:i:s',time());
$wherestr="`device_id`='".$data['device_id']."'";
if ($DB->updateRecord('device_map',$data,$wherestr))
{
$resp['error']=0;
$resp['msg']='borrow done!!!';
$resp['borrowed_set']=0;
$resp['submit_input_value']='return';
$resp['time_class']='borrow_time';
$resp['time']="last borrow time:".$data['borrow_time'];
$resp['selected_staff']=$data['staff'];
//$sql="select `borrow_time` from `device_map` where `device_id`=".$data['device_id'];
//$rs=$DB->Query($sql);
//while ($row=mysql_fetch_assoc($rs) ){
//$resp['borrow_time']="last borrow time:".$row['borrow_time'];
// }
}
else {
$resp['error']=1;
$resp['msg']='can not process!!!';
}
echo json_encode($resp);
$DB->Close();
}
else
{
$resp['error']=1;
$resp['msg']='can not process, please check post data!!!';
echo json_encode($resp);
}
}
if ($_REQUEST['borrowed']==0)
{
$data['borrowed']=0;
if (!empty($_REQUEST['device_id']))
{
$data['device_id']=$_REQUEST['device_id'];
#$data['staff']=$_REQUEST['staff'];
$data['staff']="";
$data['return_time']=date('Y-m-d H:i:s',time());
$wherestr="`device_id`='".$data['device_id']."'";
if ($DB->updateRecord('device_map',$data,$wherestr))
{
$resp['error']=0;
$resp['msg']='return done!!!';
$resp['borrowed_set']=1;
$resp['submit_input_value']='borrow';
$resp['time_class']='return_time';
$resp['time']="last return time:".$data['return_time'];
$resp['selected_staff']='N/A';
}
else {
$resp['error']=1;
$resp['msg']='can not process!!!';
}
echo json_encode($resp);
$DB->Close();
}
else
{
$resp['error']=1;
$resp['msg']='can not process,device_id can not be empty!!!';
echo json_encode($resp);
}
}
?>