MySQL 資料庫的視覺化工具

1.1. phpmyadmin

1.2. Navicat for MySQL

1.3. MySQL Workbench

ps：需要說明一點就是無論是 phpmyadmin 也好還是 navivat for mysql 或 MySQL Workbench 也好，兩者都僅是一個對於資料庫操作和管理的工具，他們並不是資料庫本身。

練習:
通過 phpmyadmin 工具，新建一個資料庫名為 libraryDB

  • 為這個資料庫添加一張表，表中有 5 個欄位，分別為
    【bookId】【bookName】【bookAuthor】【bookPrice】【bookNum】
  • 查詢表中所有條目。
  • 添加兩個條目，並再次查詢所有條目。
  • 修改其中 Id 是 2 的條目，價格改成 300，數量改成 1000。
    修改完畢後查詢 id 是 2 的條目。
  • 刪除 id 是 1 的條目。

php 連接資料庫與基本操作配置

  • (1) php 創建資料庫【連接】
    語法：Object mysqli_connect(‘host’,’user_name’,’user_password’,’dbname’,’port’,’sock’)
    例子：$con = mysqli_connect('localhost','root','1qaz@wsx','class');
  • (2)透過採用 UTF-8 的 PHP 程式從資料庫裡讀取資料，很有可能是一串 "?????" 或者是其他亂碼。解決辦法倒是簡單，在連結資料庫之後，讀取資料之前，先執行一項查詢 "SET NAMES UTF8"，即在 PHP 裡為 
    mysql_query("SET NAMES UTF8");
  • (3)更改資料庫的預設字符集。
    語法：

    Command Line 裡面輸入 show variables like "character%";，可看到如下結果：
    20230907082555

    然後 mysql> 輸入 set name utf8; 後在檢查結果會是:
    20230907082736

    語法：mysqli_query($con,”set names utf8″);
    說明：設置成功會返回 1，根據實際情況並不一定必須保存返回結果。

    mysql_query("SET NAMES UTF8"); 這句等於：

    SET character_set_client = utf8;
SET character_set_results = utf8;
SET character_set_connection = utf8;

    上面 3 個變數的作用：
    資料輸入路徑： client → connection → server；
    資料輸出路徑： server → connection → results；

    換句話說，每個路徑要經過 3 次改變字符集編碼。以出現亂碼的輸出為例，server 裡 utf8 的資料，傳入 connection 轉為 latin1，傳入 results 轉為 latin1，utf-8 頁面又把 results 轉過來。如果兩種字符集不相容，比如 latin1 和 utf8，轉化過程就為不可逆的，破壞性的。所以就轉不回來了。

    mysql> SET NAMES UTF8; 作用只是臨時的，MySQL 重啟後就恢復預設了。

  • (4) MySQL 的字符集問題在 Windows 下可透過修改 my.ini內的 
    - # CLIENT SECTION
[mysql]
default-character-set=utf8
# SERVER SECTION
[mysqld]
default-character-set=utf8
  • (5)執行 sql 語句
    語法：$結果 = $DB連接->query(sql語句);
    例子： var_dump($result = $con->query($sql));
    例子： var_dump($result = mysqli_query($conn, $sql));

php 操作資料庫【增刪改查】操作

  • (1) 使用 sql 語句基本【範本】
    提供範本並不是說以後我們操作資料庫就都採用這種結構，而是對於初學者而言我們在沒有接觸過資料庫的情況下，這樣的範本能夠説明我們快速的上手從php中操作 mysql 資料庫。

    a. 建立連接
    b. 判斷是否連接
    c. 設置編碼
    d. 創建sql語句
    e. 執行sql語句，並獲得結果
    f. 判斷結果條數
    g. 拼湊結果
    h. json 化返回

    php連接mysql資料庫代碼結構.php

    //創建db連接
//php操作數據庫的第一步驟
$con = mysqli_connect('localhost','root','1qaz@wsx','class');  //a.建立連接
//保險
if($con){                                                       //b.判斷是否連接
//如果數據庫連接成功，在進行下面的操作
//數據庫連接成功之後，添加輔助設置，避免出現亂碼結構{                                                      
echo "<pre>";
mysqli_query($con,'set names utf8');
mysqli_query($con,'set character_set_client=utf8');          //c.設置編碼
mysqli_query($con,'set character_set_results=utf8');
//創建sql語句
$sql = 'select * from students where 1';                  //d.創建 sql 語句
//讓db連接，執行sql語句，並獲得執行結果
$result = $con->query($sql);                                 //e.執行sql語句，並獲得結果
//if(mysqli_num_rows($result) > 0)
//如果查找結果不為空的話
if($result->num_rows>0){ 
  $Info=[];
  //f.判斷結果條數
  //通過fetch_assoc()遍歷方法，獲取$result中每一條數據
  //for($i=0;$row = mysqli_fetch_assoc($result);$i++){
  for($i=0; $row=$result->fetch_assoc();$i++){  //g.拼湊結果
    $Info[] = $row;
  }
  echo json_encode($Info);                               //h.json化返回
}
}
  • (2) sql查詢語句
    描述：表示去資料庫中指定的表內根據條件查詢指定的內容
    語法： $sql = "select 【信息】 from 【哪張表】 where 【查詢準則】";
    說明：

    • a.【信息】有兩種寫法：
      一是寫*星號，代表查詢所有欄位對應的資訊
    $sql = "select * from friendslist where 1";

    二是寫指定欄位，代表查詢某個欄位對應資訊，如果有多個則用逗號隔開

    $sql = "select friendsName from friendslist where 1";
    • b.【哪張表】就是直接寫出對應表的名字即可
    • c.【查詢準則】有兩種寫法：
      一是無條件查詢，那麼直接寫1即可。
    $sql = "select * from class where 1";

    二是有條件查詢，在後面寫出額外的查詢準則。如果有多個用and或or連接

    $sql = "select * from class where cName='aby'";
$sql = "select * from class where cName='aby' and cSex='f';
$sql = "select * from class where cSex='m' or cAge=18";
    • (3) sql 插入語句

    語法：

    $sql = "insert into 表名(欄位1,欄位2,...) values ('值1','值2',...)";
$sql = "insert into 表名 values(值1,值2,...)";
    • (4) sql 修改語句

    語法：

    $sql = "update 表名 set 欄位1='新值1',… where id=$id",…;

    注意：修改的關鍵字是 update，而不是 updata！！
    注意：where後面的條件可以和修改的內容相同。

    • (5) sql 刪除語句

    語法：

    $sql = 'delete from 表名 where 條件';
    • (6) html 與 php+MySQL 完成前後端交互

    前端關鍵部分代碼：【ajax請求】

    qAjax請求.html

    $.ajax({
  type:'post',
  url:'add.php',
  dataType:"json",
  data:{
   friendsName:$('.fname').val(),
   …
  },
  success:function(data){console.log(data);},
  error:function(error){console.log(error);}
});

    後臺部分代碼：【 php 接受 ajax request，並通過 echo 給出 response】

    jqAjax.php

    $conn = mysqli_connect('localhost','root','1qaz@wsx','class');
$success = array("code" => "success");
$error = array("code" => "error");
if($con){
  mysqli_query($conn, 'set names utf8');
  mysqli_set_charset($conn, "utf8");

  $cName = $_POST['cName'];
  …
  $result = $con->query("insert into students values($cName,…)");
  if($result){
    echo json_encode($success);
  }
}else{
  echo json_encode($error);
}
  • (7) 登錄案例

    於登錄案例的業務邏輯各位應當都不陌生，但具體的實現過程需要我們細化到語句才可以。在本例中需了解的部分有：

    • 將使用者輸入資訊發送給後臺——– ajax 請求實現
    • 後臺接收使用者發送的內容——– php中的 $_POST 或 $_GET 對象獲取
    • 在資料庫中搜索目標條目——– sql 查詢語句
    • 返回前端 response——– echo 語句返回 json_encode 內容

    因此我們亟待解決的問題就只剩下了一個：

    使用者輸入併發送給後臺的資料，應如何判斷其是合法帳戶？
    答案呼之欲出：

    資料庫中不存在和使用者輸入的資訊相匹配的條目，則該帳戶不存在，即登錄失敗。而如果存在則登錄成功。

    操作資料庫的基本步驟大多相同，只不過是 sql 語句結構的區別。不同的 sql 語句能夠完成不同的功能，因此學習如何操作資料庫實際上就是在學習如何編寫 sql 語句。

跨域問題

  1. 前言
    關於跨域，有 N 種類型，這只專注於 ajax 请求跨域(, ajax 跨域只是屬於瀏覽器”同源策略”中的一部分,其它的還有 Cookie 跨域，iframe 跨域，LocalStorage 跨域..等這裡不做介紹)，內容大概如下:
  2. 什麼是 ajax 跨域
    • 跨域的原理
      ajax 出現請求跨域錯誤問題,主要原因就是因為瀏覽器的同源策略,可以參考瀏覽器同源政策及其規避方法
    • CROS 請求原理
      CORS 是一個 W3C 標準，全稱是”跨域資源共享”（Cross-origin resource sharing）。它允許瀏覽器向跨源服務器，發出 XMLHttpRequest 請求，從而克服了 AJAX 只能同源使用的限制。
      基本上目前所有的瀏覽器都實現了 CORS 標準,其實目前幾乎所有的瀏覽器 ajax 請求都是基於 CORS 機制的,只不過可能平時前端開發人員並不關心而已(所以說其實現在 CORS 解決方案主要是考慮後台該如何實現的問題)。
      關於 CORS，強烈推薦閱讀跨域資源共享CORS 詳解

      20230906232540

  3. 如何解決 ajax 跨域
    • JSONP 方式
    • CORS 方式
    • 代理請求方式
  4. 如何分析 ajax 跨域
    • http 抓包的分析
    • 一些示例
  5. PHP 後台配置
    PHP 後台得配置幾乎是所有後台中最為簡單的,遵循如下步驟即可:

    第一步: 配置 Php 後台允許跨域

    <?php
 header('Access-Control-Allow-Origin: *');
 header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
 //主要為跨域CORS配置的兩大基本資訊,Origin和headers

    第二步:配置 Apache web 服務器跨域(httpd.conf 中)
    原始代碼

    <Directory />
   AllowOverride none
   Require all denied
</Directory>

    改為以下代碼

    <Directory />
   Options FollowSymLinks
   AllowOverride none
   Order deny,allow
   Allow from all
</Directory>

CRUD 範例

資料操縱語言（Data Manipulation Language, DML）是用於資料庫操作，
歐美地區的開發人員把這四種指令，以「CRUD」(分別為 Create, Read, Update,
Delete 英文四字首字母縮略的術語)來稱呼；而亞洲地區使用漢語的開發人員，或可能以四個漢字：增、查、改、刪 來略稱。

  1. 創建資料庫 
    create database class;
  2. 創建資料表 
    CREATE TABLE `class`.`students` (
  `cID` TINYINT(2) UNSIGNED ZEROFILL NOT NULL AUTO_INCREMENT ,
  `cName` VARCHAR(20) NOT NULL ,
  `cSex` ENUM('F','M') NOT NULL DEFAULT 'F' ,
  `cBirthday` DATE NULL DEFAULT NULL ,
  `cEmail` VARCHAR(100) NULL DEFAULT NULL ,
  `cPhone` VARCHAR(50) NULL DEFAULT NULL ,
  `cAddr` VARCHAR(255) NULL DEFAULT NULL ,
  `cHeight` TINYINT(3) UNSIGNED NULL DEFAULT NULL ,
  `cWeight` TINYINT(3) UNSIGNED NULL DEFAULT NULL ,
   PRIMARY KEY (`cID`)) ENGINE = InnoDB;

    PS:
    長度值: 指輸入的字數
    編碼與排序: 數字或英文字母不用指定沒問題，中文必要，沒設的話會繼承資料庫的設定。
    最後用瀏覽來檢視設定正確與否。

  3. 插入 20 筆資料 
    INSERT INTO `students` (`cName`, `cSex`, `cBirthday`, `cEmail`, `cPhone`, `cAddr`, `cHeight`, `cWeight`) 
VALUES
 ('簡奉君', 'F', '1987-04-04', 'elven@superstar.com', '0922988876', '台北市濟洲北路12號', 160, 49),
 ('黃靖輪', 'M', '1987-07-01', 'jinglun@superstar.com', '0918181111', '台北市敦化南路93號5樓', 175, 72),
 ('潘四敬', 'M', '1987-08-11', 'sugie@superstar.com', '0914530768', '台北市中央路201號7樓', 162, 65),
 ('賴勝恩', 'M', '1984-06-20', 'shane@superstar.com', '0946820035', '台北市建國路177號6樓', 178, 72),
 ('黎楚寧', 'F', '1988-02-15', 'ivy@superstar.com', '0920981230', '台北市忠孝東路520號6樓', 164, 45),
 ('蔡中穎', 'M', '1987-05-05', 'zhong@superstar.com', '0951983366', '台北市三民路1巷10號', 172, 75),
 ('徐佳螢', 'F', '1985-08-30', 'lala@superstar.com', '0918123456', '台北市仁愛路100號', 158, 56),
 ('林雨媗', 'F', '1986-12-10', 'crystal@superstar.com', '0907408965', '台北市民族路204號', 166, 48),
 ('林心儀', 'F', '1988-12-01', 'peggy@superstar.com', '0916456723', '台北市建國北路10號', 168, 50),
 ('王燕博', 'M', '1993-08-10', 'albert@superstar.com', '0918976588', '台北市北環路2巷80號', 169, 68),
 ('簡奉君1', 'F', '1967-04-04', 'elven1@superstar.com', '0922988871', '台北市濟洲北路12號1', 161, 41),
 ('黃靖輪1', 'M', '1967-07-01', 'jinglun1@superstar.com', '0918181112', '台北市敦化南路93號5樓1', 172, 73),
 ('潘四敬1', 'M', '1967-08-11', 'sugie1@superstar.com', '0914530763', '台北市中央路201號7樓1', 163, 67),
 ('賴勝恩1', 'M', '1964-06-20', 'shane1@superstar.com', '0946820034', '台北市建國路177號6樓1', 174, 71),
 ('黎楚寧1', 'F', '1968-02-15', 'ivy1@superstar.com', '0920981235', '台北市忠孝東路520號6樓1', 165, 42),
 ('蔡中穎1', 'M', '1967-05-05', 'zhong1@superstar.com', '0951983367', '台北市三民路1巷10號1', 176, 73),
 ('徐佳螢1', 'F', '1965-08-30', 'lala1@superstar.com', '0918123458', '台北市仁愛路100號1', 157, 54),
 ('林雨媗1', 'F', '1966-12-10', 'crystal1@superstar.com', '0907408969', '台北市民族路204號1', 168, 45),
 ('林心儀1', 'F', '1968-12-01', 'peggy1@superstar.com', '0916456720', '台北市建國北路10號1', 169, 56),
 ('王燕博1', 'M', '1963-08-10', 'albert1@superstar.com', '0918976581', '台北市北環路2巷80號1', 160, 67);
  4. 新建 connDB.php
    1. 需先連線
      • 第一種寫法
      <?php
  $user = "root";
  $password = "1qaz@wsx";
  $host = "localhost";
  $db = "class";
  $port = "3306";

  $conn = mysqli_connect($host,$user,$password,$db,$port) or die("資料庫連線錯誤");
?>
      • 第二種寫法
      <?php
  $user = "root";
  $password = "1qaz@wsx";
  $host = "localhost:3306";
  $db = "class";
  $port = "3306";

  $conn = mysqli_connect($host,$user,$password) or die("資料庫連線錯誤"); 
  //選擇資料庫
  mysqli_select_db($conn, $db); 
?>

      輸入網址: http://localhost/php_mysql_basic.php 若連線正常，畫面會是一片空白。

    2. 設置編碼 
      <?php
$user = "root";
$password = "1qaz@wsx";
$host = "localhost:3306";
$db = "class";
$port = "3306";

$conn = mysqli_connect($host,$user,$password) or die("資料庫連線錯誤");

if($conn){
   //選擇資料庫
   @mysqli_select_db($conn, $db); 
   @mysqli_query($conn, "set names utf8");  //資料庫編碼
   @mysqli_set_charset($conn, "utf8");      //資料庫連線字元集設定
}else{
   echo "資料庫連線失敗";
}
?>
  5. 資料庫查詢
    1. 新建程式碼: nano php_mysqli_read.php 
      <?php
header("Content-Type:text/html; charset=utf-8");
require_once("connDB.php");

$sql = "SELECT * FROM `students`";    //大小寫無關
$result = mysqli_query($conn, $sql);  //執行 SQL 語法, 查詢結果放到  $result

//取出資料庫資料
$row = mysqli_fetch_assoc($result);  //取出一筆資料

//先用簡單方式取出一筆資料
echo "{$row['cID']} {$row['cName']} {$row['cSex']} {$row['cBirthday']} {$row['cEmail']} {$row['cPhone']} {$row['cAddr']} {$row['cHeight']} {$row['cWeight']}";
?>
    2. 註解掉上面的語法 
      //echo "{$row['cID']} {$row['cName']} {$row['cSex']} {$row['cBirthday']} {$row['cEmail']} {$row['cPhone']} {$row['cAddr']} {$row['cHeight']} {$row['cWeight']}";
    3. 改用 
      while($row = mysqli_fetch_assoc($result)){
echo "{$row['cID']} {$row['cName']} {$row['cSex']} {$row['cBirthday']} {$row['cEmail']} {$row['cPhone']} {$row['cAddr']} {$row['cHeight']} {$row['cWeight']} </br>";
}

      測試: 利用 phpmyadmin 新增加一筆資料後，再執行程式看結果會不會也多一筆。

    4. 加入表格
      將上面 php_mysqli_read.php 的 while{} 部分, 改寫到 <body> 內。 因要用 Table 表示，在 <?php .. ?> 裡面寫較有問題。

      第一種方法: 將 html 寫在 <?php : ?> 內:
      方法: 將上面 php_mysqli_read.php 另存新檔成 php_mysqli_read_1.php

      <?php
header("Content-Type:text/html; charset=utf-8");
echo "
  <style>
    table,td {
       border-collapse: collapse;
    }
 </style>
 <h1 align='center'>學生資料管理系統</h1>
";
require_once("connDB.php");
$sql = "SELECT * FROM `students`";    //大小寫無關
$result = mysqli_query($conn, $sql);  //執行 SQL 語法, 查詢結果放到  $result
//取出資料庫資料
$row = mysqli_fetch_assoc($result);  //取出一筆資料
// 資料內容
echo "<p><table align=center border='1'>";
//表格表頭
echo "<tr>
  <th>座號</th>
  <th>姓名</th>
  <th>性別</th>
  <th>生日</th>
  <th>電子郵件</th>
  <th>電話</th>
  <th>住址</th>
  <th>身高</th>
  <th>體重</th>
</tr>";
while ($row_result = mysqli_fetch_assoc($result)) {
  echo "<tr align='center'">";
  echo "<td>" . $row_result["cID"] . "</td>";
  echo "<td>" . $row_result['cName'] . "</td>";
  echo "<td>" . $row_result['cSex'] . "</td>";
  echo "<td>" . $row_result['cBirthday'] . "</td>";
  echo "<td>" . $row_result['cEmail'] . "</td>";
  echo "<td>" . $row_result['cPhone'] . "</td>";
  echo "<td>" . $row_result['cAddr'] . "</td>";
  echo "<td>" . $row_result['cHeight'] . "</td>";
  echo "<td>" . $row_result['cWeight'] . "</td>";
  echo "</tr>";
}
echo "</table></p>";
mysqli_free_result($result);
mysqli_close($conn); //關閉資料庫連接
?>

      第二種方法: 將 php 寫在 html 內:
      方法: 將上面 php_mysqli_read.php 另存新檔成 php_mysqli_read_2.php

      <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
  table,td {
    border-collapse: collapse;
  }
</style>
</head>
<body>
<h1 align="center">學生資料管理系統</h1>
<p>
 <table  align=center border="1">
  <!-- 表格表頭 -->
  <tr>
    <th>座號</th>
    <th>姓名</th>
    <th>性別</th>
    <th>生日</th>
    <th>電子郵件</th>
    <th>電話</th>
    <th>住址</th>
    <th>身高</th>
    <th>體重</th>
  </tr>

  <?php
    require_once("connDB.php");
    $sql = "SELECT * FROM `students`";    //大小寫無關
    //執行 SQL 語法, 查詢結果放到  $result
    //取出資料庫資料
    $result = mysqli_query($conn, $sql);  
    //$row = mysqli_fetch_assoc($result);  //取出一筆資料
    while($row=mysqli_fetch_assoc($result)){ ?>
      <tr align="center">
        <td><?php echo $row["cID"];?></td>
        <td><?php echo $row["cName"];?></td>
        <td><?php echo $row["cSex"];?></td>
        <td><?php echo $row["cBirthday"];?></td>
        <td><?php echo $row["cEmail"];?></td>
        <td><?php echo $row["cPhone"];?></td>
        <td><?php echo $row["cAddr"];?></td>
        <td><?php echo $row["cHeight"];?></td>
        <td><?php echo $row["cWeight"];?></td>
      </tr>
    <?php } 
    mysqli_free_result($result);
    mysqli_close($conn); //關閉資料庫連接
    ?>
 </table>
</p>      
</body>
</html>
  6. 建立資料庫 Read 功能
    1. 修改檔案 php_mysqli_read.php，採用方法一(html 嵌入於 php 內)執行，將現行php_mysqli_read_1.php 程式碼內容，完全取代 php_mysqli_read.php。
    2. 將 <h1 align='center'>學生資料管理系統</h1> 搬到 //$row = mysqli_fetch_assoc($result); 後面，並新增以下內容: 
      <p align="center">目前資料筆數：<?php echo $total_records;?>，<a href="php_mysqli_create.php">新增學生資料</a>。</p>";

      修改合適於 php 的使用，如下:

      echo "
<h1 align='center'>學生資料管理系統</h1>
<p align='center'>目前資料筆數：{$total_records} ，
  <a href='php_mysqli_create.php'>新增學生資料</a>。
</p>";
    3. echo "<td>" . $row['cWeight'] . "</td>"; 下面新增: 
      echo "
<td><a href='php_mysqli_update.php?cID=". $row["cID"] . "'>修改</a></td>
<td><a href='php_mysqli_delete.php?cID={$row["cID"]}'>刪除</a></td>
";
    4. 在 <th>體重</th> 後面新增

      <th colspan='2'>功能</th>

    5. 分頁處理
      在 $result = mysqli_query($conn, $sql); 後面加入以下程式碼:

      :
//分頁處理
//預設每頁筆數
$pageRow_records = 3;
//預設頁數
$num_pages = 1;
//若已經有翻頁，將頁數更新
if (isset($_GET['page'])) {
$num_pages = $_GET['page'];
}
//每頁 5 筆
// page 1     record 0 ~ 4
// page 2     record 5 ~ 8
// page 3     record 9 ~ 12
// :
//本頁開始記錄筆數 = (頁數-1)*每頁記錄筆數
$startRow_records = ($num_pages - 1) * $pageRow_records;
//未加限制顯示筆數的SQL敘述句
$sql_query = "SELECT * FROM `students`";
//加上限制顯示筆數的SQL敘述句，由本頁開始記錄筆數開始，每頁顯示預設筆數
$sql_query_limit = $sql_query . " LIMIT " . $startRow_records . ", " . $pageRow_records;
//以加上限制顯示筆數的SQL敘述句查詢資料到 $result 中
$result = mysqli_query($conn, $sql_query_limit);
//以未加上限制顯示筆數的SQL敘述句查詢資料到 $all_result 中
$all_result = mysqli_query($conn, $sql_query);
//計算總筆數
$total_records = mysqli_num_rows($all_result);
//計算總頁數=(總筆數/每頁筆數)後無條件進位。
$total_pages = ceil($total_records / $pageRow_records);
?>

      換頁功能: 第一頁 上一頁 下一頁 最後頁

      在 php_mysqli_read.php 的 echo "</table>"; 下面加入以下:

      echo "<p align='center'> <table>";
$prev = $num_pages - 1;
$next = $num_pages + 1;

if ($num_pages > 1) {
echo "<a href='?page=1'>第一頁</a> &emsp;  <a href='?page=$prev'>上一頁</a> &emsp; ";
}

if ($num_pages < $total_pages) {
echo "<a href='?page=$next'>下一頁</a>&emsp; <a href='?page=$total_pages'>最後頁</a>";
}

echo "</table> </p>";
mysqli_free_result($result);
mysqli_close($conn); //關閉資料庫連接
  7. 建立資料庫 Create 功能
    • 新增檔案 php_mysqli_create.php

      前端畫面處理:

      <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>學生資料管理系統</title>
</head>
<body>
<h1 align="center">學生資料管理系統 - 新增資料</h1>
<p align="center"><a href="php_mysqli_read.php">回主畫面</a></p>
<form action="" method="post" name="formAdd" id="formAdd">
<table border="1" align="center" cellpadding="4">
 <tr>
   <th>欄位</th><th>資料</th>
 </tr>
 <tr>
   <td>姓名</td><td><input type="text" name="cName" id="cName" required></td>
 </tr>
 <tr>
   <td>性別</td><td>
   <input type="radio" name="cSex" id="cSex" value="M" checked>男
   <input type="radio" name="cSex" id="cSex" value="F">女
   </td>
 </tr>
 <tr>
   <td>生日</td><td><input type="date" name="cBirthday" id="cBirthday" required></td>
 </tr>
 <tr>
   <td>電子郵件</td><td><input type="text" name="cEmail" id="cEmail" required></td>
 </tr>
 <tr>
   <td>電話</td><td><input type="text" name="cPhone" id="cPhone" required></td>
 </tr>
 <tr>
   <td>住址</td><td><input name="cAddr" type="text" id="cAddr" size="40" required></td>
 </tr>
  <tr>
   <td>身高</td><td><input name="cHeight" type="number" id="cHeight" required></td>
 </tr>   
 <tr>
   <td>體重</td><td><input name="cWeight" type="number" id="cWeight" size="40" required></td>
 </tr>    
 <tr>
   <td colspan="2" align="center">
     <input name="action" type="hidden" value="create">
     <input type="submit" name="button" id="button" value="新增資料">
     <input type="reset" name="button2" id="button2" value="重新填寫">
   </td>
 </tr>
</table>
</form>
</body>
</html>
    • 後端畫面處理:
      在 <html> 標籤前面加入後端處理。

      <?php
if(isset($_POST["action"])&&($_POST["action"]=="add")){
 include("connDB.php");
 $sql_query = "INSERT INTO `students` (`cName` ,`cSex` ,`cBirthday` ,`cEmail` ,`cPhone`,`cAddr`,`cHeight`,`cWeight`) VALUES (";
 $sql_query .= "'".$_POST["cName"]."', ";
 $sql_query .= "'".$_POST["cSex"]."', ";
 $sql_query .= "'".$_POST["cBirthday"]."', ";
 $sql_query .= "'".$_POST["cEmail"]."', ";
 $sql_query .= "'".$_POST["cPhone"]."', ";
 $sql_query .= "'".$_POST["cAddr"]."', ";
 $sql_query .= "'".$_POST["cHeight"]."', ";
 $sql_query .= "'".$_POST["cWeight"]."')";

 mysqli_query($conn,$sql_query);
 mysqli_close($conn);//關閉資料庫連接
 //重新導向回到主畫面
 header("Location: php-mysqli-read.php");
}
?>
  8. 更新資料的處理 Update
    新增檔案: php_mysqli_update.php, 拷貝自 php_mysqli_create.php 前端資料後，修改內容有:

    1. 抬頭
      原: <h1 align="center">學生資料管理系統 - 新增資料</h1>
      改: <h1 align="center">學生資料管理系統 - 修改資料</h1>
    2. 輸入內容
      每一輸入欄位增加屬性 value=''，除了性別欄位
    3. 送出按鈕
      原: <input type="submit" name="button" value="新增資料">
      改: <input type="submit" name="button" value="修改資料">
    4. 隱藏欄位
      原: <input type="hidden" name="action" value="create">
      改: <input type="hidden" name="action" value="update">
    • 前端畫面處理: 
      <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>學生資料管理系統</title>
</head>
<body>
<h1 align="center">學生資料管理系統 - 修改資料</h1>
<p align="center"><a href="php_mysqli_read.php">回主畫面</a></p>
<form action="" method="post">
<table border="1" align="center" cellpadding="4">
 <tr>
   <th>欄位</th><th>資料</th>
 </tr>
 <tr>
   <td>姓名</td><td><input type="text" name="cName" value=""></td>
 </tr>
 <tr>
   <td>性別</td><td>
   <input type="radio" name="cSex" value="M">男
   <input type="radio" name="cSex" value="F">女
   </td>
 </tr>
 <tr>
   <td>生日</td><td><input type="date" name="cBirthday" value=""></td>
 </tr>
 <tr>
   <td>電子郵件</td><td><input type="email" name="cEmail" value=""></td>
 </tr>
 <tr>
   <td>電話</td><td><input type="text" name="cPhone" value=""></td>
 </tr>
 <tr>
   <td>住址</td><td><input type="text" name="cAddr" size="40" value=""></td>
 </tr>
 <tr>
   <td>身高</td><td><input type="number" name="cHeight" size="40" value=""></td>
 </tr>
 <tr>
   <td>體重</td><td><input type="number" name="cWeight" size="40" value=""></td>
 </tr>
 <tr>
   <td colspan="2" align="center">
     <input type="hidden" name="action" value="update">
     <input type="submit" name="button" id="button" value="更新資料">
     <input type="reset" name="button2" id="button2" value="重新填寫">
   </td>
 </tr>
</table>
</form>
</body>
</html>

      前端畫面的輸入框的值，應該取自後端資料庫查詢結果依據接收到的 cID 數值，所以先將這部分處理，加入 <?php ?> 於 <html> 標籤前面，加入以下程式碼

      <?php
require_once "connDB.php";
$sql_db = "SELECT * FROM `students` WHERE `cID`=" . $_GET["cID"];
$result = mysqli_query($conn,$sql_db);
$row= mysqli_fetch_array($result, MYSQLI_BOTH);

mysqli_close($conn);//關閉資料庫連接
?>

      依序將前端畫面輸入框的值，從後端查詢到的結果來套用。

      • 姓名
      value="<?php echo  $row["cName"]; ?>"
      • 性別
      value="M" 
 <?php if($row["cSex"]=="M") echo " checked"; ?>>男

value="F"
 <?php if($row["cSex"]=="F") echo " checked"; ?>>女
      • 生日
        value="<?php echo $row["cBirthday"]; ?>"
      • 電子郵件
        value="<?php echo $row["cEmail"]; ?>"
      • 電話
        value="<?php echo $row["cPhone"]; ?>"
      • 住址
        value="<?php echo $row["cAddr"]; ?>"
      • 身高
        value="<?php echo $row["cHeight"]; ?>"
      • 體重
        value="<?php echo $row["cWeight"]; ?>"

      修改表單內容後，確認後表單送出，在 <input type="submit" name="button" id="button" value="更新資料"> 的前面需添加

      <input name="cID" type="hidden" value="<?php echo $row_result['cID'];?>">
    • 接著處理後端程式

      於 include("connDB.php"); 後面前追加下面程式碼:

      <?php 
:
if(isset($_POST["action"])&&($_POST["action"]=="updata")){ 
$sql_query = "UPDATE `students` SET ";
$sql_query .= "`cName`='" . $_POST["cName"] . "',";
$sql_query .= "`cSex`='" . $_POST["cSex"] . "',";
$sql_query .= "`cBirthday`='" .$_POST["cBirthday"] . "',";
$sql_query .= "`cEmail`='" . $_POST["cEmail"] . "',";
$sql_query .= "`cPhone`='" . $_POST["cPhone"] . "',";
$sql_query .= "`cAddr`='" . $_POST["cAddr"] . "',";
$sql_query .= "`cHeight`='" . $_POST["cHeight"] . "',";
$sql_query .= "`cWeight`='" . $_POST["cWeight"] . "' ";
$sql_query .= "WHERE `cID`=" . $_POST["cID"]; 
//echo $sql;

mysqli_query($conn, $sql_query);
mysqli_close($conn); //關閉資料庫連接

//重新導向回到主畫面
header("Location: php_mysqli_read.php");
}
?>
  9. 刪除資料的處理 Delete
    1. 單筆刪除
      • 表單大都以 POST 來傳遞，連結會以 GET 方式來傳遞。
      • 新建檔案 php_mysqli_delete.php
      • 前端畫面

      複製 php_mysqli_update.php 的內容後修改

      原來: <h1 align="center">學生資料管理系統 - 修改資料</h1>
      改成: <h1 align='center'>學生資料管理系統 - 刪除資料</h1>

      原來:

      <input type="hidden" name="action"value="update">
<input type="text" name="cID" value="<?=$row['cID']?>">
<input type="submit" name="button" id="button" value="更新資料">
<input type="reset" name="button2" id="button2" value="重新填寫">

      改成:

      <input type="hidden" name="action" value='delete'>
<input type="text" name="cID" value="<?=$row['cID']?>">
<input type="submit" value="刪除這筆資料">&emsp; 
<input type="reset" value="取消">
      • 前端畫面

      於 <html> 前面加入

      <?php
  require_once("connDB.php");

  if(isset($_POST['action']) && isset($_POST['action']) == "delete"){
    $sql = "DELETE FROM `students` WHERE `cID`={$_POST['cID']}";

    mysqli_query($conn, $sql);
    mysqli_close($conn);

    header("location: php_mysqli_read.php");
  }

  $sql = "SELECT * FROM `students` WHERE `cID`={$_GET['cID']}";
  $result = mysqli_query($conn, $sql);
  $row = mysqli_fetch_assoc($result);
?>

      加入刪除確認，防呆機制，於 <form> 裡面追加 onsubmit 事件處理機制

      <form action="" method='post' onsubmit="return confirm('n確定要刪除這筆資料嗎?n刪除後無法恢復n');">

    2. 多筆刪除

      在 php_mysqli_read.php 程式的 echo "<p align="center"><a href="php_mysqli_create.php">新增學生資料</a></p>"; 的 <p> 標籤中，多加一個 &emsp; <a href='#' onclick='delall();'>刪除被選取資料</a>

      echo "<h1 align='center'>學生資料管理系統</h1>";
echo "<p align='center'>總共 {$record} 筆資料, " . "目前在第 {$page} 頁</p>";
echo "<p align="center">
      <a href="php_mysqli_create.php">新增學生資料</a>&emsp; 
      <a href='#' onclick='delall();'>刪除被選取資料</a>     
   </p>";

      在 php_mysqli_read.php 程式的 <h1 align='center'>學生資料管理系統</h1>，前面追加:
      echo "<form align=center action='php_mysqli_delete_all.php' name='form1' method='post'>";

      在 php_mysqli_read.php 程式的 echo "</table></p>";， </p> 後面追加: echo "</form>";

      在 php_mysqli_read.php 程式的 <td><a href='php_mysqli_delete.php?cID={$row['cID']}'>刪除</td> 後面, 新增一個

      echo "<td><input type='checkbox' name=del[] value='{$row['cID']}'></td>";

      修改 php_mysqli_read.php 程式的 <th colspan='2'>功能</th>， 變成 <th colspan='3'>功能</th>

      新建檔案 php_mysqli_delete_all.php

      <?php
require_once('connDB.php');

$del = $_POST['del'];
foreach ($del as $value) {
  mysqli_query($conn,  "DELETE FROM `students` WHERE cID=" . $value);
}
mysqli_close($conn); //關閉資料庫連接
header("location: php_mysqli_read.php");
?>

      在 php_mysqli_read.php 檔案的前面，追加:

      echo "<script>
function delall() {
 console.log('delall');
 if (confirm('\n您確定要刪除這筆資料嗎?\n刪除後無法恢復\n')) {
    form1.submit();
 }
 return false;
}
</script>";
  • 對照表
    程序導向介面的函式 物件導向介面的方法或成員
    mysqli_connect new mysqli::__construct() 建構方法
    mysqli_connect_errno mysqli::connect_errno 成員
    mysqli_set_charset() mysqli::set_charset()
    mysqli_query mysqli::query()
    mysqli_fetch_array mysqli_result::fetch_array()
    mysqli_num_rows mysqli_result::$num_rows 成員
    $result = mysqli_query($conn, $sql)); $result = $con->query($sql);
    mysqli_num_rows($result) $result->num_rows>;
    $row = mysqli_fetch_assoc($result); $row= $result->fetch_assoc();
最後修改日期: 2023 年 11 月 25 日

作者

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。