php案例之后台数据显示-- mysqli面向过程版（procedure oriented programming => POP）
做一个小案例，主要复习一下mysqli面向过程，面向对象，PDO版本的基础SQL语句，也为自己复习做个参考。ok，本篇为mysqli面向过程篇（ procedure oriented programming => pop）
附上链接：
第一篇：php案例之后台数据显示-- mysqli面向过程版（procedure oriented programming => POP）
第二篇：php案例之后台数据显示-- mysqli面向对象版（Object Oriented Programming => OOP）
第三篇：php案例之后台数据显示-- PDO版（php data object）
做出来的效果如下,可能有点low，但是样式什么的自己搞吧：
先说一下大概思路吧
1，连接数据库
2，数据展示，index页
2.1，jsDom操组
2.1.1，点击修改按钮出现下拉框
2.1.2，复选框选择，全选、反选、全不选
2.1.3，根据复选框进行多个数据同时操作
注意点，直接在多选按钮两侧加form不行，要么会出现form提交混乱，要吗就不行
解决，创建form元素，根据选中的多选框和form元素创建一个新的dom元素，然后js方式提交
2.2,php
2.2.1，根据搜索框有无和搜索内容显示页面内容
2.2.2，增加一个用户
2.2.3，根据用户id删除数据
2.2.4，根据复选框同时删除数据
2.2.5，根据用户id修改数据
3，根据index页传入sql页面中进行操作
ok，开始了，目录展示
connect.php
<?php
// 连接数据库
$host = '127.0.0.1';
$user = 'root';
$password = 'weicunbin123';
$db = 'testguest';
$conn =mysqli_connect($host,$user,$password,$db);
if(mysqli_connect_error($conn)){ //如果没有错误,会返回一个NULL
die("连接失败，错误:" . mysqli_connect_error($conn)); //打印错误信息
}
// 3,设置字符集
mysqli_set_charset($conn,'utf8');
?>
index.php
<?php
// 连接数据库
require dirname(__FILE__).'\connect.php';
// 查。模糊查询
// 判断是否点击查询语句，其实这里应该对查找到的数据进行操作，不过就图方便了
if(isset($_GET['action']) && $_GET['action'] == 'search'){
$clean = array();
$clean['name'] =isset( $_POST['name']) ? $_POST['name'] : '';
if( $clean['name'] == ' '){
// 如果为空格的话，就默认为空了
$clean['name'] = '';
}
$sql = "SELECT * FROM db_demo WHERE db_name LIKE '%{$clean['name']}%' ORDER BY db_date DESC";
$dataResult = mysqli_query($conn,$sql);
}else{
$dataSql = "SELECT * FROM db_demo ORDER BY db_date DESC";
$dataResult = mysqli_query($conn,$dataSql);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* { margin: 0; padding: 0;}
body,html { padding: 10px;}
table {border-collapse: collapse; width: 700px;}
thead th { padding: 5px 10px;}
tbody td {padding: 3px;}
tr.show td, tr.hide td div {text-align: center;}
tr.hide td .hidebox { overflow: hidden; height: 0;}
tfoot tr { height: 40px; overflow: hidden;}
</style>
</head>
<body>
<div class="adduser">
<!-- 第一个表单，用于增加一个用户 -->
<form action="./sql.php?action=adduser" method="POST" name="add">
添加：
<input type="text" value="name" name = "name">
<input type="text" value="password" name = "password">
<input type="submit" value="确定提交">
</form>
<br>
</div>
<div class="search">
<!-- 搜索，按理说是用应该操作得到的数据，不过还有select语句，所以从数据库中返回数据 -->
<form action="./index.php?action=search" method="POST" name="search">
搜索：
<input type="text" name = "name" value = <?php echo isset( $clean['name']) ?$clean['name']: '' ?>>
<input type="submit" value="确认">
</form>
<br>
</div>
<table border="1">
<thead>
<tr>
<th></th>
<th>id</th>
<th>name</th>
<th>password</th>
<th>ctime</th>
<th>operation</th>
</tr>
</thead>
<tbody>
<?php
// 将数据显示在页面上
while($datalist = mysqli_fetch_assoc($dataResult)){
?>
<tr class="show">
<td>
<!-- 第二个表单控件，用于批量删除,有三个部分组成，这是第一个部分 -->
<input type="checkbox" name="select[]" value=<?php echo $datalist['db_id']; ?>>
</td>
<td> <?php echo $datalist['db_id']; ?></td>
<td> <?php echo $datalist['db_name'] ; ?></td>
<td> <?php echo $datalist['db_password'] ; ?></td>
<td> <?php echo $datalist['db_date']; ?></td>
<td>
<!-- 用于对当前用户修改显示或删除或修改操作 -->
<a href="javascript:void(0)" class="edit">修改</a>
<a href="./sql.php?action=del&id=<?php echo $datalist['db_id']; ?>">删除</a>
</td>
</tr>
<tr class="hide">
<td colspan="6">
<div class="hidebox">
<!-- 第三个表单，用户修改当前用户信息 -->
<form action="./sql.php?action=edit&id=<?php echo $datalist['db_id']; ?>" method="POST" name="edit">
<span>name： <input type="text" name="name" value=<?php echo $datalist['db_name'] ; ?> id=""></span>
<span>password: <input type="text" name="password" value=<?php echo $datalist['db_password'] ; ?> id=""></span>
<span><input type="submit" value="确认删除"></span>
</form>
</div>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<div>
<label for="checkall" class="checkall">
<input type="checkbox" id="checkall" value="全选"> <span>全选</span>
</label>
<label for="invertcheckall" class="invertcheckall">
<input type="checkbox" id="invertcheckall"><span>反选</span>
</label>
<!-- 对应第二个表单控件，点击删除，这是第二个部分 -->
<button class="twosubmit">确认修改</button>
<!--对应第二个表单控件，组成一个form元素提交，这是第三个部分 -->
<div class="formbox" style="display:none"></div>
</div>
<script>
// 批量删除提交
var sectionDelete = (function(){
// 点击确认修改
document.querySelector('.twosubmit').onclick = function () {
var opt = document.querySelectorAll('form[name="sectionDel"]');
var input = document.querySelectorAll('input[ name="select[]"]');
var formbox = document.querySelector('.formbox');
var copyinput=''
// 创建一个form元素
var twoform = document.createElement("form")
twoform.action = './sql.php?action=sectionDel';
twoform.method="post";
// 将选中的放入form中
input.forEach(item => {
if(item.checked == true){
cloneinput = item.cloneNode();
twoform.appendChild(cloneinput)
}
})
// 放在页面上以提交
formbox.appendChild(twoform)
//提交到sql语句
twoform.submit()
};
})()
// 下拉列表
var dropdown = (function () {
var oBtn = document.querySelectorAll('.show .edit');
var hideBox = document.querySelectorAll('.hide .hidebox');
var boxHeight = document.querySelectorAll('.hide form');
oBtn.forEach((item, i) => {
item.onclick = function () {
hideBox.forEach((hide, n) => {
hide.style.height = 0;
hide.style.transition = "all 0.3s";
if (i == n) {
if (parseInt(window.getComputedStyle(hide).height) == 0) {
hide.style.height = boxHeight[i].offsetHeight + 'px';
}
}
})
}
})
})()
// 全选/全不选 反选
var selopt = (function () {
var checkall = document.querySelector('.checkall');
var checkallInput = document.querySelector('.checkall input');
var checkallTxt = document.querySelector('.checkall span');
var invertcheckall = document.querySelector('.invertcheckall');
var invertcheckallSpan = document.querySelector('.invertcheckall span');
var newSel = new selectfn();
checkall.onclick = checkallTxt.onclick = function () {
checkallTxt.innerHTML == '全选' ? checkallTxt.innerHTML = '全不选' : checkallTxt.innerHTML = '全选'
if (checkallInput.checked == false) {
newSel.NotSelectAll();
} else {
newSel.selectAll();
}
}
invertcheckall.onclick = invertcheckallSpan.onclick = function () {
newSel.invertSelect();
}
// 全选/全不选 反选函数
function selectfn() {
var option = document.querySelectorAll('.show input[name="select[]"]');
// 全选
this.selectAll = function () {
option.forEach(item => {
item.checked = true;
})
}
// 全不选
this.NotSelectAll = function () {
option.forEach(item => {
item.checked = false;
})
}
// 反选
this.invertSelect = function () {
option.forEach(item => {
if (item.checked == true) {
item.checked = false;
} else {
item.checked = true;
}
})
}
}
})()
</script>
</body>
</html>
sql.php
<?php
// 连接数据库
require dirname(__FILE__).'\connect.php';
// 获取进行什么操组的关键字
$action = $_GET['action'];
switch($action){
// 增加一个用户
case 'adduser':
$clean = array();
$clean['name'] = $_POST['name'];
$clean['password'] = $_POST['password'];
$sql = "INSERT INTO db_demo(db_name,db_password,db_date)
VALUES('{$clean['name']}','{$clean['password']}',NOW() )";
// 执行语句和成功后的跳转语句
query_location($sql) ;
break;
// 批量删除delete in，即全选，全不选，反选
case 'sectionDel':
$clean = array();
$clean['select'] =isset($_POST['select']) ? check_live($_POST['select']):'';
$sql = "DELETE FROM db_demo WHERE db_id in ({$clean['select']})";
// 执行语句和成功后的跳转语句
query_location($sql,'删除成功') ;
break;
// 点击删除
case 'del':
$clean = array();
$clean['name'] = $_GET['id'];
$sql = "DELETE FROM db_demo WHERE db_id = {$clean['name']}";
// 执行语句和成功后的跳转语句
query_location($sql,'删除成功') ;
break;
// 修改数据
case 'edit':
$clean = array();
$clean['name'] = $_POST['name'];
$clean['password'] = $_POST['password'];
$clean['id'] = $_GET['id'];
$sql = "UPDATE db_demo SET db_name='{$clean['name']}' ,db_password='{$clean['password']}' WHERE db_id = {$clean['id']}";
// 执行语句和成功后的跳转语句
query_location($sql,'修改成功','index.php','未修改数据或者出错','index.php') ;
break;
}
// 封装的函数
// 执行函数及执行成功后跳转的语句
function query_location ($sql,$success='添加成功',$successhref = 'index.php',$error='添加成功',$errorhref = 'index.php'){
global $conn;
// 执行sql语句
mysqli_query($conn,$sql);
// 成功或失败后跳转
if(mysqli_affected_rows($conn) > 0){
echo "<script type='text/javascript'>alert('$success');window.location.href='$successhref'</script>";
exit();
}else{
echo "<script type='text/javascript'>alert('$error');window.location.href='$errorhref'</script>";
exit();
}
}
// 将数组以 ‘，’隔开
function check_live($arr = ''){
$str = implode(',',$arr);
return $str;
}
?>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！