首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能

Posted in PHP onMay 21, 2019

这个自己的小项目要先告一段落了。可能还有许多bug。请见谅 

删除学生功能

PHP:

// 这里是通过前端代码HTML中的 url 传过来的，用 $_GET 来获取(相关HTML代码可以看一下到主页看一下前几条博客)
if (empty($_GET['num'])) exit('<h1>找不到您要删除的学生的学号</h1>');
$num = $_GET['num'];
$connection = mysqli_connect('localhost', 'root', '密码', 'students_info_system');
if (!$connection) exit('<h1>连接数据库失败</h1>');
$query = mysqli_query($connection, "delete from students where num = {$num}");
if (!$query) exit('<h1>该学生信息查询失败</h1>');
// 注意：这里传入的是连接对象
$affected_rows = mysqli_affected_rows($connection);
if ($affected_rows !== 1) exit('<h1>删除失败</h1>');
header('Location: student_info.php');

编辑学生功能(整体上和添加学生功能差不到，稍微有些许变化)

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>编辑学生</title>
  <link rel="stylesheet" type="text/css" href="css/Bootstrap.css" rel="external nofollow" >
</head>
<body>
  <div class="container mt-3">
    <h1 class="display-5 text-center">编辑学生</h1>
    <?php if (isset($error_msg)): ?>
    <div class="alert alert-danger"><?php echo $error_msg; ?></div>
    <?php endif ?>
    <div class="row mt-3">
      <img src="<?php echo $current_student['photo']; ?>" alt="<?php echo $current_student['name']; ?>" width="100" height="488" class="col-sm-6">
      <form action="<?php echo $_SERVER['PHP_SELF']; ?>?id=<?php echo $current_num; ?>" method="post" enctype="multipart/form-data" autocomplete="off" class="col-sm-6">
        <div class="form-group">
          <input type="number" name="num" class="form-control" placeholder="学号" value="<?php echo isset($_POST['num']) ? $_POST['num'] : $current_student['num']; ?>">
        </div>
        <div class="form-group">
          <select class="form-control" name="system">
            <option>请选择学院/系</option>
            <option <?php echo $current_student['system'] === '电气工程学院' ? 'selected' : ''; ?>>电气工程学院</option>
            <option <?php echo $current_student['system'] === '信息工程与艺术学院' ? 'selected' : ''; ?>>信息工程与艺术学院</option>
            <option <?php echo $current_student['system'] === '国际教育学院' ? 'selected' : ''; ?>>国际教育学院</option>
            <option <?php echo $current_student['system'] === '水利水电工程学院' ? 'selected' : ''; ?>>水利水电工程学院</option>
            <option <?php echo $current_student['system'] === '测绘与市政工程学院' ? 'selected' : ''; ?>>测绘与市政工程学院</option>
            <option <?php echo $current_student['system'] === '马克思主义学院' ? 'selected' : ''; ?>>马克思主义学院</option>
            <option <?php echo $current_student['system'] === '建筑工程学院' ? 'selected' : ''; ?>>建筑工程学院</option>
            <option <?php echo $current_student['system'] === '经济与管理学院' ? 'selected' : ''; ?>>经济与管理学院</option>
          </select>
        </div>
        <div class="form-group">
          <input type="text" name="class" class="form-control" placeholder="班级" value="<?php echo isset($_POST['class']) ? $_POST['class'] : $current_student['class']; ?>">
        </div>
        <div class="form-group">
          <input type="text" name="name" class="form-control" placeholder="姓名" value="<?php echo isset($_POST['name']) ? $_POST['name'] : $current_student['name']; ?>">
        </div>
        <div class="form-group">
          <select class="form-control" name="gender">
            <option value="-1">请选择性别</option>
            <option <?php echo $current_student['gender'] === '1' ? 'selected' : ''; ?> value="1">男</option>
            <option <?php echo $current_student['gender'] === '0' ? 'selected' : ''; ?> value="0">女</option>
          </select>
        </div>
        <div class="form-group">
          <label for="birthday">出生日期</label>
          <input type="date" name="birthday" class="form-control" id="birthday" value="<?php echo isset($_POST['birthday']) ? $_POST['birthday'] : $current_student['birthday']; ?>">
        </div>
        <div class="form-group">
          <label for="photo">照片</label>
          <input type="file" name="photo" class="form-control">
        </div>
        <button type="submit" class="btn btn-info btn-block">确认修改</button>
      </form>
    </div>
  </div>
</body>
</html>

PHP:

if (empty($_GET['id'])) exit('<h1>必须指定相应的学号</h1>');
$current_num = $_GET['id'];
$connection = mysqli_connect('localhost', 'root', '密码', 'students_info_system');
if (!$connection) exit('<h1>连接数据库失败</h1>');
$query = mysqli_query($connection, "select * from students where num = {$current_num} limit 1");
if (!$query) exit('<h1>找不到您要编辑的学生信息</h1>');
$current_student = mysqli_fetch_assoc($query);
// var_dump($current_student);
function edit_student() {
  // var_dump('进来了');
  global $connection;
  global $current_num;  // 当前学生学号
  global $current_student;
  $extra_students_query = mysqli_query($connection, "select * from students where num != {$current_num}");
  if (!$extra_students_query) {
    exit('<h1>其余学生数据查询失败</h1>');
    // return;
  }
  // 查询除该学生以外的其他学生
  while ($student = mysqli_fetch_assoc($extra_students_query)) {
    // var_dump($student);
    $students_num[] = $student['num'];
  }
  // var_dump($students_num);
  // var_dump($_FILES['photo']);
  // var_dump($_POST['gender']);
  if (empty($_POST['num'])) {
    $GLOBALS['error_msg'] = '请输入学号';
    return;
  }
  // 判断该学号是否已经被添加(即列表中已存在该学生)=========
  if (in_array($_POST['num'], $students_num)) {
    $GLOBALS['error_msg'] = '该学生已存在';
    return;
  }
  if (empty($_POST['system']) || $_POST['system'] === '请选择学院/系') {
    $GLOBALS['error_msg'] = '请选择学院/系';
    return;
  }
  if (empty($_POST['class'])) {
    $GLOBALS['error_msg'] = '请输入班级';
    return;
  }
  if (empty($_POST['name'])) {
    $GLOBALS['error_msg'] = '请输入姓名';
    return;
  }
  if (!(isset($_POST['gender']) && $_POST['gender'] !== '-1')) {
    $GLOBALS['error_msg'] = '请选择性别';
    return;
  }
  if (empty($_POST['birthday'])) {
    $GLOBALS['error_msg'] = '请输入出生日期';
    return;
  }
  // 以下处理文件域=======================================================
  // 当有文件上传时才验证，没有上传则照片不变
  // $_FILES['photo'] = $current_student['photo'];
  // var_dump($_FILES['photo']);
  if ($_FILES['photo']['name'] !== '') {
    // var_dump($_FILES['photo']);
    // var_dump($_FILES['photo']);
    if ($_FILES['photo']['error'] !== UPLOAD_ERR_OK) {
      $GLOBALS['error_msg'] = '上传照片失败';
      return;
    }
    // 验证上传文件的类型(只允许图片)
    if (strpos($_FILES['photo']['type'], 'image/') !== 0) {
      $GLOBALS['error_msg'] = '这不是支持的文件格式类型，请重新上传';
      return;
    }
    // 文件上传到了服务端开辟的一个临时地址，需要转移到本地
    $image_target = 'images/' . $_FILES['photo']['name'];
    if (!move_uploaded_file($_FILES['photo']['tmp_name'], $image_target)) {
      $GLOBALS['error_msg'] = '图片上传失败';
      return;
    }
    // 接收更新过的学生照片
    $current_student['photo'] = (string)$image_target;
  } else {
    // var_dump($_FILES['photo']);
    // 如果照片没有上传则不进行验证文件域,直接更新数据且不改变原来的照片
    $current_student['num'] = $_POST['num'];
    $current_student['system'] = $_POST['system'];
    $current_student['class'] = $_POST['class'];
    $current_student['name'] = $_POST['name'];
    $current_student['gender'] = $_POST['gender'];
    $current_student['birthday'] = $_POST['birthday'];
  }
  // var_dump($current_num);
  // 将数据修改存放到数据库
  $update_query = mysqli_query($connection, "update students set `num` = '{$current_student['num']}', `system` = '{$current_student['system']}', `class` = '{$current_student['class']}', `name` = '{$current_student['name']}', `gender` = '{$current_student['gender']}', `birthday` = '{$current_student['birthday']}', `photo` = '{$current_student['photo']}' where `num` = {$current_num}");
  if (!$update_query) {
    $GLOBALS['error_msg'] = '更新数据查询失败';
    return;
  }
  $affected_rows = mysqli_affected_rows($connection);
  if ($affected_rows !== 1) {
    $GLOBALS['error_msg'] = '修改失败';
    return;
  }
  // 延迟2秒
  time_sleep_until(time() + 2);
  header('Location: student_info.php');
}
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  edit_student();
}

搜索功能（用js）

// 关键词搜索功能----立即函数
(function (element, search_key) {
  let table = document.getElementById('table-content'); // 获取表格
  function in_array_item (item, array) {
    for (var i = 0; i < array.length; i++) {
      if (array[i].indexOf(item) != -1) {
        return true;
      }
    }
    return false;
  }
  function response () {
    let hiddenStudentsNumber = 0;             // 获取隐藏的学生个数(即表格隐藏行数)
    // 获取要搜索的关键词
    const search_content = document.getElementById(search_key).value;
    // console.log(search_content);
    // console.log(typeof(search_content));
    let data = [];
    // 遍历列表将数据存储到一个数组中
    // 1.获取表格行数
    for (let i = 0; i < table.children.length; i++) {
      // 2.获取表格列数
      for (let j = 0; j < table.children[i].children.length; j++) {
        if (!data[i]) {
          // 在数组中创键每一行内容存放的数组，用于存放一行数据
          data[i] = new Array();
        }
        data[i][j] = table.children[i].children[j].innerHTML.toString();
        // 3.存放数据
        if (data[i][j] === '♂') {
          data[i][j] = '男';
        }
        if (data[i][j] === '♀') {
          data[i][j] = '女';
        }
      }
      // console.log(data[i]);
      if (search_content == '') {
        table.children[i].style.display = '';
      } else {
        if (in_array_item(search_content, data[i])) {
          table.children[i].style.display = '';
        } else {
          table.children[i].style.display = 'none';
          hiddenStudentsNumber += 1;
        }
      }
    }
    console.log(hiddenStudentsNumber);
    let str = "共有" + (table.children.length - hiddenStudentsNumber) + "名学生";
    document.getElementById('students_number').innerHTML = str;
  }
  const searchButton = document.getElementById(element);
  searchButton.addEventListener('click', function () {
    response();
  });
  document.addEventListener('keydown', function (event) {
    if (event.keyCode === 13) {
      response();
    }
  });
  let str = "共有" + table.children.length + "名学生";
  document.getElementById('students_number').innerHTML = str;
})('search', 'search-key');

同时在原有的学生信息页面HTML添加：

<div class="row mt-3">
      <a class="btn btn-info col-sm-2" style="margin-right: 28px; margin-left: 15px;" href="add_student.php" rel="external nofollow" >添加学生</a>
// 添加的
      <button class="btn btn-info align-middle" id="students_number"></button>


      <input type="text" class="form-control col-sm-6 ml-2" autocomplete="on" placeholder="请输入关键词" value="" id="search-key">
       <button type="submit" class="btn btn-info col-sm-2 ml-2" id="search">点击搜索</button>
    </div>

总结

以上所述是小编给大家介绍的PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能

- Author -

小方哥·

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
将博客园(cnblogs.com)数据导入到wordpress的代码
Jan 06 PHP
ThinkPHP实现动态包含文件的方法
Nov 29 PHP
为百度UE编辑器上传图片添加水印功能
Apr 16 PHP
PHP数组和explode函数示例总结
May 08 PHP
SESSION存放在数据库用法实例
Aug 08 PHP
PHP图片加水印实现方法
May 06 PHP
php+MySQL实现登录时验证登录名和密码是否正确
May 10 PHP
thinkphp配置文件路径的实现方法
Aug 30 PHP
PHP实现权限管理功能示例
Sep 22 PHP
PHP中rename()函数的妙用讲解
Feb 28 PHP
PHP的cookie与session原理及用法详解
Sep 27 PHP
laravel框架使用极光推送消息操作示例
Feb 15 PHP
thinkphp5框架API token身份验证功能示例
May 21 #PHP
php curl操作API接口类完整示例
May 21 #PHP
PHP钩子实现方法解析
May 21 #PHP
php面向对象程序设计中self与static的区别分析
May 21 #PHP
PHP经典设计模式之依赖注入定义与用法详解
May 21 #PHP
PHP常见过waf webshell以及最简单的检测方法
May 21 #PHP
PHP __call()方法实现委托示例
May 20 #PHP
GTID(1) 排序失效(1) timestamp(1) 临时表(1) 游标(1) T-SQL(1) 表变量(1) 批处理(1) ip连接(1) 重复数据(2)
You might like
我的论坛源代码(四)
2006/10/09 PHP
php解析json数据实例
2014/08/19 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
php上传大文件设置方法
2016/04/14 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
PHP反射基础知识回顾
2020/09/10 PHP
可拖动窗口，附带鼠标控制渐变透明，开启关闭功能
2006/06/26 Javascript
不错的JS中变量相关的细节分析
2007/08/13 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
jQuery实用技巧必备（上）
2015/11/02 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
bootstrap 设置checkbox部分选中效果
2017/04/20 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
Python中列表(list)操作方法汇总
2014/08/18 Python
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
pandas 像SQL一样使用WHERE IN查询条件说明
2020/06/05 Python
用Python制作音乐海报
2021/01/26 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
Bally澳大利亚官网：瑞士奢侈品牌
2018/11/01 全球购物
车库门开启器、遥控器和零件：Chamberlain
2019/04/09 全球购物
手机促销活动方案
2014/02/05 职场文书
物业管理专业求职信
2014/06/11 职场文书
群众路线个人整改措施
2014/10/24 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
MySQL如何使备份得数据保持一致
2022/05/02 MySQL