PHP + MySQL 学习笔记（三）--- 分页显示 MySQL 资料表，使用 PHP 程式做分页 page 画面输出，PHP\HTML\MySQL 的穿插使用

我在 “PHP + MySQL 学习笔记（一）— 延续前期 HTML + CSS 规划插入 PHP 程式做画面输出” 这篇笔记里做了一个卜卦的 HTML 画面，也做了一个 MySQL 资料库。后来我在网路上找到一个六十四卦的清单，像下面这张图：六十四卦名（装卦表）

这里面的每一个小块，恰好是上一期资料画面的一部分

如果把 “六十四卦名（装卦表）” 变成一个资料库，那么可以节省输入的时间和提高正确性。所以，今天要做一个（装卦表）的资料库。我们把计划节奏分段成：

- 建立画面(page.php)
- 建立参数/栏位名(Header.php)
- 建立栏位参数阵列(Header.php)
- 建立php 增加 SQL 栏位的php 程式(略）
- 建立php程式输出 SQL 资料(update_SQL.php)
- 建立 php程式更新SQL 资料(update_Html.php)
- 建立php程式新增 SQL 资料
- 建立php程式删除 SQL 资料
- 建立php程式输出寻找的 SQL 资料

1. 建立画面(page.php)

每一个小方格的资料是这样的

我们把前面的 HTML 画面修改后，得到我想要的画面像这样：

换成 SQL 的栏位名称，像这样：

2. 建立参数/栏位名(Header.php)

现在开始建立 SQL 的 TABLE，结果像这样

这个表的结构也就是把前一期的笔记内容修改，删减后的来的。我们同时把他做成 PHP 的参数档 Header.php

<?php
// header.php
//select  fields from pridictresult table
/*******************************/
/*`id`, `guawei`, `guaname`, `SNo`, `guashou`, `guaxu`, `requestfor`, */
$guaname = 'guaname';
$SNo = 'SNo';
$guashou = 'guashou';
$guaxu = 'guaxu';
$requestfor ='requestfor';
$id ='id';
$guawei ='guawei';
/*******************************/
$prefix_sql = array('id','guawei', 'guaname', 'SNo', 'guashou', 'guaxu', 'requestfor'  ); $shiying_sql=array('shiying_0', 'shiying_1', 'shiying_2', 'shiying_3', 'shiying_4', 'shiying_5');
$liuqin_sql=array('liuqin_0', 'liuqin_1', 'liuqin_2', 'liuqin_3', 'liuqin_4', 'liuqin_5');$tuyinyang_sql=array( 'tuyinyang_0', 'tuyinyang_1', 'tuyinyang_2', 'tuyinyang_3', 'tuyinyang_4', 'tuyinyang_5');
$ganzhi_sql=array('ganzhi_0', 'ganzhi_1', 'ganzhi_2', 'ganzhi_3', 'ganzhi_4', 'ganzhi_5');
/******************************************************/
?>

再来，开始写 PHP 和 MySQL 互动的程式。

3. PHP 和 MySQL 的互动

MySQL 的指令窗口像下图，我们可以点击窗口下的按钮产生几个基本架构。我们先点击 INSERT，产生一个字串，意思是按照这个架构填写然后点击右下角的执行就可以完成想要的输入了。

我把上面的字串拷贝下来贴在 word 文字编辑器上修改，像下图，然后贴回 MySQL 上验证。如果 ok 就按照这个格式一笔一笔填入。

下面的图是用“地天泰” 的资料输入的结果

下面的图是 MySQL 在输入正确后的显示

4. 建立php程式输出 SQL 资料(update_SQL.php)

PHP 是透过下面这个公式和 MySQL 沟通，其中 $sql_query 就是要写进去的指令。

$result = mysqli_query($conn,$sql_query)

譬如，这个样子的操作就可以把 guawei=‘00’ 的资料取出，再放进
$pugua_result 变数里，然后就可以使用 MySQL 的资料了。

$sql = "SELECT * FROM `sixtyfour` WHERE `guawei`='00'"; //选择资料档 $ID
$result = mysqli_query($conn,$sql);
$pugua_result=mysqli_fetch_array($result);  //把SQL的资料放在 $pugua_result

我们要把这个 MySQL 的指令，拆成几段，然后方便用 php 写一些变化的程式，把要的资料填在这个字串里
//
UPDATE sixtyfour SET id=[value-1],id2=[value-2],guawei=[value-3],guaname=[value-4],SNo=[value-5],guashou=[value-6],guaxu=[value-7],requestfor=[value-8],shiying_0=[value-9],shiying_1=[value-10],shiying_2=[value-11],shiying_3=[value-12],shiying_4=[value-13],shiying_5=[value-14],liuqin_0=[value-15],liuqin_1=[value-16],liuqin_2=[value-17],liuqin_3=[value-18],liuqin_4=[value-19],liuqin_5=[value-20],tuyinyang_0=[value-21],tuyinyang_1=[value-22],tuyinyang_2=[value-23],tuyinyang_3=[value-24],tuyinyang_4=[value-25],tuyinyang_5=[value-26],ganzhi_0=[value-27],ganzhi_1=[value-28],ganzhi_2=[value-29],ganzhi_3=[value-30],ganzhi_4=[value-31],ganzhi_5=[value-32] WHERE 1
/****/
第一段，固定不变字串 – UPDATE sixtyfour SET

$sql_query_p = "UPDATE `sixtyfour` SET  ";

第二段，变化、给新的值的字串 — id=[value-1],id2=[value-2],…
譬如，下面这一段 MySQL 的需求，编成 PHP 的表现。
MySQL 的需求

`shiying_0`=[value-9],`shiying_1`=[value-10],`shiying_2`=[value-11],`shiying_3`=[value-12],`shiying_4`=[value-13],`shiying_5`=[value-14],

PHP 的表现

 $sql_shiying ="";
for ($i=0; $i < 6; $i++) { $sql_shiying .= "`shiying_";$sql_shiying .= $i  ."`= '";$sql_shiying .=   $_POST[$shiying_sql[$i]]. "', " ;
}

可以用 echo 指令打在 HTML 上检查。

echo  $sql_shiying ."<br>"."<br>";

第三段，结尾 — WHERE <条件>
譬如下面的 php 程式段落

$sql_query .= "   WHERE `guawei` = '". $_POST['guawei'] ."'";// SQL 的 update 字串完成 完成

至于最后的结果是不是正确？我们只要用 echo 打在 HTML 上，再拷贝，贴上 MySQL 指令区试试就知道了。

5. 建立 php程式更新SQL 资料(update_Html.php)

一次输入那么六十四笔资料，难免有错，看下面的图就知道一个一个矫正是有困难的。所以，需要设计一个可以更新的画面。

下图是想要的结果。但是，应该还要有一个浏览所有资料的页面，如后面一张图

在web上的程式，每换一个页面就是换一组程式；程式之间的参数转移是一个不容易维护的问题! Database 的好处就是，我只要转移一个关键指标，其他的都存在 MySQL 里面，需要时候再叫出来，转移之前存放好就可以了。
所以准备用三个 PHP 程式完成这个检查后修改的流程。

6. 建立php程式浏览 SQL 资料（page_Html.php)

整个显示区分三大块 Table

下面是完成的程式。接着记录一些传输上的关键指令。

<?php
// file name :page_Html.php
header("Content-Type: text/html; charset=utf-8");
include("connMysql.php");//預設每頁筆數
$pageRow_records = 1;
//預設頁數
$num_pages = 1;
//若已經有翻頁，將頁數更新
if (isset($_GET['page'])) {$num_pages = $_GET['page'];
}
//本頁開始記錄筆數 = (頁數-1)*每頁記錄筆數
$startRow_records = ($num_pages -1) * $pageRow_records;
//未加限制顯示筆數的SQL敘述句
$sql_query = "SELECT * FROM `sixtyfour`";
//加上限制顯示筆數的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);$pugua64_result=mysqli_fetch_array($result);include("Header.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">目前資料筆數：<?php echo $total_records;?> </p><table style="background-color: #3df; font-size: 20px; " align="center"><tr style="background-color: #fdd"><th>卦 组 合'guawei'</th> <th> 64 卦 名 'guaname'</th> <th>卦  值 'SNo'</th><th >卦 首'guashou'</th> <th >卦 序'guaxu'</th> <td style="text-align: center;"></td></tr><form action="update_Html.php" method="post"> <?phpinclude("Header.php");/*******1**********/echo "<input name='id' type='hidden' value='".$pugua64_result['id']  ."'>";echo "<td><input type='text' name='guawei";           echo "' value='". $pugua64_result[$guawei];echo "' > </td>";/*******1**********/echo "<td><input type='text' name='guaname";echo "' value='". $pugua64_result[$guaname];echo "' > </td>";/*******1**********/echo "<td><input type='text' name='SNo";echo "' value='". $pugua64_result[$SNo];echo "' > </td>";/*******1**********/echo "<td><input type='text' name='guashou";echo "' value='". $pugua64_result[$guashou];echo "' > </td>";/*******1**********/echo "<td><input type='text' name='guaxu";echo "' value='". $pugua64_result[$guaxu];echo "' > </td>";echo "<td> <input type='submit' name='direction' value='修改' />";echo "<td> <input type='submit' name='direction' value='刪除' /></td>";//?></form></table><h5  align="center">**************************************</h5><table border='1' style="background-color: #3df; font-size: 20px; padding: 2px"  align="center"><tr style="background-color: #fdd" ><th colspan="1">世  应</th> <th colspan="1">六   亲</th> <th colspan="1">卦    象</th><th colspan="1" >干 支</th>  <td style="text-align: center;"></td></tr><!-- 資料內容 -->       <?phpfor ($i=5; $i >=0 ; $i--) { echo "<tr style='height: 10px'>"; echo "<td > </td>";echo "<tr border='1'>";          /*******1**********/echo "<td style='text-align: center;' > 世应_".$i." : ";             echo  $pugua64_result[$shiying_sql[$i]] ." </td>"; /*******2**********/echo "<td style='text-align: center;' background-color: #61f>  六亲_".$i." : ";              echo  $pugua64_result[$liuqin_sql[$i]] ." </td>";/*******3**********/echo "<td style='text-align: center;' border='1'>  阴阳图_".$i." : ";   echo $pugua64_result[$tuyinyang_sql[$i]] ." </td>";/*******7**********/echo "<td style='text-align: center;' border='1'>  干支_".$i." : ";            echo  $pugua64_result[$ganzhi_sql[$i]] ." </td>";/*******8**********/echo "</tr>"; }
?>
</table><table border="0" align="center"><tr><?php if ($num_pages > 1) { // 若不是第一頁則顯示 ?><td><a href="page_Html.php?page=1">第一頁</a></td><td><a href="page_Html.php?page=<?php echo $num_pages-1;?>">上一頁</a></td><?php } ?><?php if ($num_pages < $total_pages) { // 若不是最後一頁則顯示 ?><td><a href="page_Html.php?page=<?php echo $num_pages+1;?>">下一頁</a></td><td><a href="page_Html.php?page=<?php echo $total_pages;?>">最後頁</a></td><?php } ?></tr>
</table>
<table border="0" align="center"><tr><td>頁數：</td><?phpfor($i=1;$i<=$total_pages;$i++){echo "<td>";if($i==$num_pages)echo $i;elseecho "<a href='page_Html.php?page=".$i."'>".$i."</a>";echo "</td>";  }?></td></tr>
</table>
</body>
</html><?phpmysqli_close($conn);//關閉資料庫連接
?>

Form<form action="update_Html.php" method="post"></form>
把要传送的资料要放在两个 HTML 的 form 中间，然后用 input 的 type = ‘submit’ <input type='submit' name='direction' value='刪除' /> 执行后就进入 HTML 的 POST 暂存器里面。php 会在 update_Html.php 这个程式里用 $_POST[name] 取出。在这一行指令 name 是 direction，取出的值是 ‘刪除’。
一般用 input 的时候会给一个 “空格” 填资料，但是在修改的情形下，我们会希望带入原始的资料，我们只要修改不对的项目再存回 MySQL 就好了。这里示范几个《input》带入的使用

<?php
echo "<title>Result of HTML input</title>";
echo  "姓名1:".$_POST["Email1"]."<br>";
echo  "姓名2:".$_POST["Email2"]."<br>";
echo  "姓名3:".$_POST["Email3"]."<br>";
echo  "姓名4:".$_POST["Email4"]."<br>";?>

总结这次的技巧是

从 page_Html.php 程式里用《form》的方式把 guawei 的值传给 update_Html.php
update_Html.php 用 P O S T [ g u a w e i ] 把卦位值取出，再用 ‘ _POST[guawei] 把卦位值取出，再用 ` POST[guawei]把卦位值取出，再用‘result = mysqli_query( c o n n , conn, conn,sql_query);` 把 MySQL 的资料取出。
update_Html.php 用《form》的方式把修改后的值传给 update_SQL.php。
update_SQL.php 用 P O S T [ ] 把修改后的所有值取出，再用 ‘ _POST[] 把修改后的所有值取出，再用 ` POST[]把修改后的所有值取出，再用‘result = mysqli_query( c o n n , conn, conn,sql_query);` 把更新的资料写入 MySQL 。
update_SQL.php 用 header("Refresh: 0; url= page_Html.php"); 的 php 功能跳回 page_Html.php 再检查修改下一条。

以上这一次笔记完成。