程序结构:
(1) 修改showList.html文件,增加“添加员工”的功能链接并编辑“编辑”功能链接,showList.php保持不变,详情请自行查看PHP连接MySQL数据库【展示员工信息】
showList.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>员工信息列表</title>
<style>
.box{margin:20px;}
.box .title{font-size:22px;font-weight:bold;text-align:center;}
.box table{width:100%;margin-top:15px;border-collapse:collapse;font-size:12px;border:1px solid #B5D6E6;min-width:460px;}
.box table th,.box table td{height:20px;border:1px solid #B5D6E6;}
.box table th{background-color:#E8F6FC;font-weight:normal;}
.box table td{text-align:center;}
.box .add {text-align: right;}
</style>
</head>
<body>
<div class="box">
<div class="title">员工信息列表</div>
<table border="1">
<tr>
<th width="5%">ID</th><th>姓名</th><th>所属部门</th><th>出生日期</th><th>入职时间</th><th width="25%">相关操作</th>
</tr>
<?php if(!empty ($emp_info)) { ?>
<?php foreach ($emp_info as $v) { ?>
<tr>
<td><?php echo $v['e_id'] ; ?></td>
<td><?php echo $v['e_name'] ; ?></td>
<td><?php echo $v['e_dept'] ; ?></td>
<td><?php echo $v[ 'date_of_birth'] ; ?></td>
<td><?php echo $v[ 'date_of_entry' ] ; ?></td>
<td><div align= "center"><span><img src= "images/edt.gif"><a href="<?php echo './empUpdate.php?e_id='.$v['e_id'] ?>">
编辑</a> <img src= "images/del.gif"/>删除</span></div>
</td>
</tr>
<?php } ?>
<?php }else {?>
<tr><td colspan="6">暂无员工数据! </td></tr>
<?php } ?>
</table>
<div class="add"><a href="./empAdd.php">添加员工</a></div>
</body>
</html>
运行结果:
(2) 编写“添加员工”页面add.html,通过表单让用户输入新员工信息
add.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>添加员工</title>
<link rel="stylesheet" href="./js/jquery.datetimepicker.css"/ >
<script src="./js/jquery.js"></script>
<script src="./js/jquery.datetimepicker.js"></script>
<script>
$(function(){
$('#date_of_birth').datetimepicker({lang:'ch'});
$('#date_of_entry').datetimepicker({lang:'ch'});
});
</script>
<style>
body{background-color:#eee;margin:0;padding:0;}
.box{width:400px;margin:15px auto;padding:20px;border:1px solid #ccc;background-color:#fff;}
.box h1{font-size:20px;text-align:center;}
.profile-table{margin:0 auto;}
.profile-table th{font-weight:normal;text-align:right;}
.profile-table input[type="text"]{width:180px;border:1px solid #ccc;height:22px;padding-left:4px;}
.profile-table .button{background-color:#0099ff;border:1px solid #0099ff;color:#fff;width:80px;height:25px;margin:0 5px;cursor:pointer;}
.profile-table .td-btn{text-align:center;padding-top:10px;}
.profile-table th,.profile-table td{padding-bottom:10px;}
.profile-table td{font-size:14px;}
.profile-table .txttop{vertical-align:top;}
.profile-table select{border:1px solid #ccc;min-width:80px;height:25px;}
.profile-table .description{font-size:13px;width:250px;height:60px;border:1px solid #ccc;}
</style>
</head>
<body>
<div class="box">
<h1>添加员工</h1>
<form action="./empAdd.php" method="post">
<table class="profile-table">
<tr><th>姓名:</th><td><input type="text" name="e_name"></td></tr>
<tr><th>所属部门:</th><td><input type="text" name="e_dept"></td></tr>
<tr><th>出生年月:</th><td><input type="text" name="date_of_birth"></td></tr>
<tr><th>入职日期:</th><td><input type="text" name="date_of_entry"></td></tr>
<tr><td colspan="2" class="td-btn">
<input type="submit" value="保存资料" class="button" />
<input type="reset" value="重新填写" class="button" />
</td></tr>
</table>
</form>
</div>
</body>
</html>
(3) 编写“添加员工”功能empAdd.php,用来处理POST提交的员工数据
empAdd.php:
<?php
header('content-type:text/html; charset=utf-8');
$link=mysqli_connect('localhost:3308','root','');
//判断是否有表单提交
if(!empty($_POST)){
//声明变量$fields,用来保存字段信息
$fields=array('e_name','e_dept','date_of_birth','date_of_entry');
//声明变量$values,用来保存值信息
$values=array();
//遍历$fields,获取输入员工数据的键和值
foreach($fields as $k=>$v){
$data=isset($_POST[$v])?$_POST[$v]:'';
if($data==''){
die($v.'字段不能为空');
}
//把字段使用反引号包裹,赋值给$fields数组
$fields[$k]="`$v`";
//把值使用单引号包裹,赋值给$values数组
$values[]="'$data'";
}
//将$fields数组以逗号连接,赋值给$fields,组成insert语句中的字段部分
$fields=implode(',',$fields);
//将$values数组以逗号连接,赋值给$values,组成insert语句中的字段部分
$values=implode(',',$values);
//把$fields和$values拼接到insert语句中
mysqli_query($link,'set names utf8');
mysqli_query($link,'use test_student');
$sql="insert into `emp_info` values (null,$values)";
if($res=mysqli_query($link, $sql)){
//执行成功则返回的showList.php
header('Location: ./showList.php');
//停止脚本
die;
}else{
//执行失败
die('员工添加失败!');
}
}
require './add.html';
?>
(4) 编写“修改员工”页面update.html,通过GET参数传递员工ID,在表单中显示选定修改的员工信息
update.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>员工信息编辑</title>
<link rel="stylesheet" href="./js/jquery.datetimepicker.css"/ >
<script src="./js/jquery.js"></script>
<script src="./js/jquery.datetimepicker.js"></script>
<script>
$(function(){
$('#date_of_birth').datetimepicker({lang:'ch'});
$('#date_of_entry').datetimepicker({lang:'ch'});
});
</script>
<style>
body{background-color:#eee;margin:0;padding:0;}
.box{width:400px;margin:15px auto;padding:20px;border:1px solid #ccc;background-color:#fff;}
.box h1{font-size:20px;text-align:center;}
.profile-table{margin:0 auto;}
.profile-table th{font-weight:normal;text-align:right;}
.profile-table input[type="text"]{width:180px;border:1px solid #ccc;height:22px;padding-left:4px;}
.profile-table .button{background-color:#0099ff;border:1px solid #0099ff;color:#fff;width:80px;height:25px;margin:0 5px;cursor:pointer;}
.profile-table .td-btn{text-align:center;padding-top:10px;}
.profile-table th,.profile-table td{padding-bottom:10px;}
.profile-table td{font-size:14px;}
.profile-table .txttop{vertical-align:top;}
.profile-table select{border:1px solid #ccc;min-width:80px;height:25px;}
.profile-table .description{font-size:13px;width:250px;height:60px;border:1px solid #ccc;}
</style>
</head>
(5) 编写“修改员工”功能empUpdate.php,实现信息修改功能
empUpdate.php:
<?php
require 'update.html';
header('content-type:text/html; charset=utf-8');
//连接数据库
$link=mysqli_connect('localhost:3308','root','');
//判断数据库连接是否成功,如果不成功则显示错误信息并终止脚本继续执行
if(!$link){
die('数据库服务器连接失败!系统错误信息为:'.mysqli_connect_error());
}
//设置字符集,选择数据库
mysqli_query($link,'set names utf8');
mysqli_query($link,'use test_student');
$e_id=$_GET['e_id'];
if(!$_POST){
$sql="select * from emp_info where e_id=$e_id";
$emp_info=mysqli_query($link, $sql);
$v=mysqli_fetch_assoc($emp_info);
}
if($_POST){
$e_name=$_POST['e_name'];
$e_dept=$_POST['e_dept'];
$date_of_birth=$_POST['date_of_birth'];
$date_of_entry=$_POST['date_of_entry'];
$sqli=" update emp_info set e_name='$e_name',e_dept='$e_dept',date_of_birth='$date_of_birth',date_of_entry='$date_of_entry' where e_id='$e_id' ";
$res=mysqli_query($link, $sqli);
if($res===false){
die('执行sql出错,'.$sqli);
}
//定义员工数组,用以保存员工信息
$emp_info=array();
//遍历结果集,获取每位员工的详细数据
while($v=mysqli_fetch_assoc($res))
{
$emp_info[]=$v;
}
header('Location: ./showList.php');
}
?>
<body>
<div class="box">
<h1>修改员工信息</h1>
<form method="post">
<table class="profile-table">
<tr><th>姓名:</th><td><input type="text" name="e_name" value=<?php echo $v['e_name'];?>></td></tr>
<tr><th>所属部门:</th><td><input type="text" name="e_dept" value=<?php echo $v['e_dept'];?>></td></tr>
<tr><th>出生年月:</th><td><input id="date_of_birth" name="date_of_birth" value=<?php echo $v['date_of_birth'];?>></td></tr>
<tr><th>入职日期:</th><td><input id="date_of_entry" name="date_of_entry" value=<?php echo $v['date_of_entry'];?>></td></tr>
<tr><td colspan="2" class="td-btn">
<input type="submit" value="保存资料" class="button" />
<input type="reset" value="重新填写" class="button" />
</td></tr>
</table>
</form>
</div>
</body>
</html>
添加和修改功能展示: