溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

PHP+Boostrap+js怎么實現學生列表刪除編輯及搜索功能

發布時間:2021-05-21 10:20:43 來源:億速云 閱讀:146 作者:小新 欄目:開發技術

這篇文章主要介紹了PHP+Boostrap+js怎么實現學生列表刪除編輯及搜索功能,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

這個自己的小項目要先告一段落了??赡苓€有許多bug。請見諒 

刪除學生功能

PHP:

// 這里是通過前端代碼HTML中的 url 傳過來的,用 $_GET 來獲取(相關HTML代碼可以看一下到主頁看一下前幾條博客)
if (empty($_GET['num'])) exit('<h2>找不到您要刪除的學生的學號</h2>');
$num = $_GET['num'];
$connection = mysqli_connect('localhost', 'root', '密碼', 'students_info_system');
if (!$connection) exit('<h2>連接數據庫失敗</h2>');
$query = mysqli_query($connection, "delete from students where num = {$num}");
if (!$query) exit('<h2>該學生信息查詢失敗</h2>');
// 注意:這里傳入的是連接對象
$affected_rows = mysqli_affected_rows($connection);
if ($affected_rows !== 1) exit('<h2>刪除失敗</h2>');
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">
    <h2 class="display-5 text-center">編輯學生</h2>
    <?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('<h2>必須指定相應的學號</h2>');
$current_num = $_GET['id'];
$connection = mysqli_connect('localhost', 'root', '密碼', 'students_info_system');
if (!$connection) exit('<h2>連接數據庫失敗</h2>');
$query = mysqli_query($connection, "select * from students where num = {$current_num} limit 1");
if (!$query) exit('<h2>找不到您要編輯的學生信息</h2>');
$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('<h2>其余學生數據查詢失敗</h2>');
    // 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"  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是什么語言

php,一個嵌套的縮寫名稱,是英文超級文本預處理語言(PHP:Hypertext Preprocessor)的縮寫。PHP 是一種 HTML 內嵌式的語言,PHP與微軟的ASP頗有幾分相似,都是一種在服務器端執行的嵌入HTML文檔的腳本語言,語言的風格有類似于C語言,現在被很多的網站編程人員廣泛的運用。

感謝你能夠認真閱讀完這篇文章,希望小編分享的“PHP+Boostrap+js怎么實現學生列表刪除編輯及搜索功能”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,更多相關知識等著你來學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女