following the previous article php - easyui datagrid data retrieval method, this article continues to describe how to operate datagrid, store data in the database, and implement mvc architecture , separate the data layer and operate independently.
this article is mainly an improvement of the original easyui datagrid example build crud application with jquery easyui.
the official examples have demonstrated how to operate data, but one problem is that each action you want to take to operate data requires a corresponding program, such as adding, deleting, and modifying. as well as obtaining data, a total of at least four corresponding programs are required to operate.
readers can think about it, this is just a single user's basic data maintenance. generally, the system has more than a dozen or even dozens of programs operating just for basic data. therefore, in this way, it must be improved before it can work in practice.
according to the spirit of the preface to multi-level architecture design, you can find that these four programs are actually similar to each basic data operation, so they can be standardized and used as a fixed framework for use by similar programs later.
this part will be divided into several articles to gradually complete each process. through this gradual evolution process, we will understand how the framework is formed.
first of all, in this article, let’s introduce how to integrate four scattered programs into one program to call. before reading further, readers can first understand the method of data retrieval in php – easyui datagrid and the official example build the operation method of crud application with jquery easyui must at least be able to run the example. the run action is very important. don't just watch it. only by testing it yourself can you understand the problem points.
to be able to change four programs into one program to operate, the key is actually very simple, which is to change the url called during each operation, so that it all calls the program dal_user.php on the dal side. next, before calling, you must pass a type parameter to tell dal what action you want to perform.
currently type defines the following four actions
add new
mod modify
del delete
data get data
after understanding what actions you want dal to do , you can start writing dal programs. of course, this dal program is still a non-standardized program, but it has achieved the spirit of mvc and separated the data access layer from the presentation layer. later articles will introduce it again. , how to use the program introduced in this article to standardize dal and ui presentation layer.
dal_user.php
the code is as follows:
<?php
$result = false;
if (!empty($_request['type']) )
{
require_once(".\..\db\db_config.php");
require_once(".\..\db\db_class.php");
$db = new db();
$db->connect_db($_db['host'], $_db['username'], $_db['password'], $_db['dbname']);
$tablename = "stuser";
$type = $_request['type'];
if($type == "del")
{
$id = $_request['id'];
$sql = "delete from stuser where unum=$id";
$result = $db->query($sql);
}else if($type == "data"){
$page = isset($_post['page']) ? intval($_post['page']) : 1;
$rows = isset($_post['rows']) ? intval($_post['rows']) : 10;
$offset = ($page-1)*$rows;
$result = array();
$db->query("select count(*) as total from $tablename");
$row = $db->fetch_assoc();
$result["total"] = $row["total"];
$db->query("select * from $tablename limit $offset,$rows");
$items = array();
while($row = $db->fetch_assoc()){
array_push($items, $row);
}
$result["rows"] = $items;
echo json_encode($result);
}else{
$stuid = $_request['stuid'];
$password = $_request['password'];
$nickname = $_request['nickname'];
$birthday = $_request['birthday'];
if (!empty($_request['id']) ) {
$id = $_request['id'];
$sql = "update $tablename set stuid='$stuid',password='$password',nickname='$nickname' where unum=$id";
}else{ // is add
$sql = "insert into $tablename (stuid, password, nickname, dbsts) values('$stuid','$password','$nickname', 'a')";
}
$result = $db->query($sql);
}
}
if($type != "data")
{
if ($result == "true"){
echo json_encode(array('success'=>true));
} else {
echo json_encode(array('msg'=>'had errors occured. ' . $result));
}
}
?>
after the dal data access layer is defined, you can implement the ui interface to call dal. because ajax is used to access data, part of the control layer in mvc is placed in the interface layer. in this part, you can use javascript to standardize this part of the control layer later, and pass the parameter call through the php backend. in this way, all the control power is concentrated in one program. these will be introduced in later articles. , let’s stop here for now.
datagrid.php
the code is as follows:
<!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>easyUI datagrid</title>
<link rel="stylesheet" type="text/css" href="./../JS/EasyUI/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./../JS/EasyUI/themes/icon.css">
<script type="text/javascript" src="./../JS/jquery.js"></script>
<script type="text/javascript" src="./../JS/EasyUI/jquery.easyui.min.js"></script>
<script type="text/javascript" src="./../JS/EasyUI/easyui-lang-zh_CN.js"></script>
<style type="text/css">
#fm{
margin:0;
padding:10px 30px;
}
.ftitle{
font-size:14px;
font-weight:bold;
color:#666;
padding:5px 0;
margin-bottom:10px;
border-bottom:1px solid #ccc;
}
.fitem{
margin-bottom:5px;
}
.fitem label{
display:inline-block;
width:80px;
}
</style>
<script type="text/javascript">
var url;
function newUser(){
$('#dlg').dialog('open').dialog('setTitle','New User');
$('#fm').form('clear');
url = 'dal_user.php?type=add';
}
function editUser(){
var row = $('#myDG').datagrid('getSelected');
if (row){
if(typeof(row.UNum) !== 'undefined')
{
$('#dlg').dialog('open').dialog('setTitle','Edit User');
$('#fm').form('load',row);
url = 'dal_user.php?type=mod&id='+row.UNum;
}else{
alert("undefined");
}
}
}
function saveUser(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
//alert('sub :'+ url);
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
//alert(result.success);
if (result.success){
$('#dlg').dialog('close'); // close the dialog
$('#myDG').datagrid('reload'); // reload the user data
} else {
$.messager.show({
title: 'Error',
msg: result.msg
});
}
}
});
}
function removeUser(){
var row = $('#myDG').datagrid('getSelected');
if (row){
$.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){
if (r){
//alert(row.UNum);
$.post('dal_user.php', {type:'del', id:row.UNum}, function(result){
if (result.success){
$('#myDG').datagrid('reload'); // reload the user data
} else {
$.messager.show({ // show error message
title: 'Error',
msg: result.msg
});
}
},'json');
}
});
}
}
</script>
</head>
<body>
<h2>easyUI datagrid url 存取測試</h2>
<table id="myDG" class="easyui-datagrid" style="width:700px;height:450px"
url="dal_user.php?type=data" toolbar="#toolbar"
title="Load Data" iconCls="icon-save" pagination="true"
toolbar="#toolbar" rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="STUID" width="120">User ID</th>
<th field="Password" width="80" align="right">Password</th>
<th field="Birthday" width="80" align="right">Birthday</th>
<th field="Nickname" width="200">Nickname</th>
<th field="DBSTS" width="60" align="center">DBSTS</th>
</tr>
</thead>
</table>
<p id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove User</a>
</p>
<p id="dlg" class="easyui-dialog" style="width:400px;height:350px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<p class="ftitle">User Information</p>
<form id="fm" method="post" novalidate>
<p class="fitem">
<label>User ID:</label>
<input name="STUID" class="easyui-validatebox" required="true">
</p>
<p class="fitem">
<label>Password:</label>
<input name="Password" class="easyui-validatebox" required="true">
</p>
<p class="fitem">
<label>Nickname:</label>
<input name="Nickname">
</p>
<p class="fitem">
<label>Birthday:</label>
<input name="Birthday" class="easyui-validatebox" validType="email">
</p>
</form>
</p>
<p id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</p>
</body>
</html>
the operation result screen is as follows:
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
