Case Study: 利用PHP获取关系型数据库中多张数据表的数据

一、目标

该笔记的目的是引导读者借助WampServer平台和MySQL数据库，利用HTML/CSS/JS/PHP设计一个多数据表关联的网页。在上一个案例（Case Study: 利用JS实现数据库网页的数据分页、数据选择、数据详细信息查看功能）中，我们已经实现了数据表的分页显示，并在网页中呈现的数据表中设计了“Info”按钮。点击“Info”按钮，就能查看一条数据的详细信息。本案例就希望实现这一功能。

具体而言，现在MySQL数据库中有basinfo、camera、vegetation和resolution四张表。四张表都有picture字段。basinfo为主表，其外键为picture。在网页中仅仅呈现basinfo表的部分字段。点击"Info"按钮，进入info页面，就可以看到这条数据在basinfo、camera、vegetation和resolution中所有字段的值，达到查看这条数据的详细信息的目的。其效果如图1、图2所示。

图1 主表内容。展示basinfo表中部分数据字段的信息。

图2 详细信息界面。展示某条特定数据的basinfo、camera、vegetation和resolution四张数据表的内容。

该笔记假定读者已经能自己动手利用WampServer搭建出数据库网页，即利用PHP将获取服务器MySQL数据库中的数据，并将其呈递给JS，最后展示给用户。如尚不能搭建一个简易的网页数据库，请参考Case study：数据库网页构建原理和实践。

二、搭建步骤

1. JS发送请求：在"show_data.js”文件（详见Case Study: 利用JS实现数据库网页的数据分页、数据选择、数据详细信息查看功能）中我们已经添加了info函数，其代码如下。该函数将picture值写入Cookie文件中，并将其命名为"query_key"变量，然后打开新的界面。一旦新的界面打开，就会调用PHP。

// href模块功能：点击Info按钮，跳转到图片info界面
function info(path, new_page){
    setCookie("query_key",path,1);       //利用COOKIE向新页面传送外键信息

    if(new_page){
        window.open(print_table_kit["href_location"]);
    } else{
        location.href = print_table_kit["href_location"];
    }
}

3. PHP读取数据：新建"read.info.php"文件，其代码如下。修改全局可变参数以及代码块最后的函数调用格式使之适应您需要展示的各个数据表的格式。需要注意，代码中使用了$_COOKIE[“query_key”]，即读取JS呈递的Cookie变量。该Cookie变量指导PHP从MySQL数据库中查找符合要求的数据，并重新呈递给JS

<?php
/********** 全局可变参数 **********/
/*********************************/
// MySQL账户信息
$servername = "localhost";
$username = "您的MySQL账户名";
$password = "您的MySQL账户密码";

// 数据库名称
$dbname = "您希望展示的数据库名称";

// 数据表结构
// 改为您希望展示的数据表的格式
function data_row($row, $tbname){
	// "basinfo"数据表的格式
	if($tbname == "basinfo"){
	    return Array(
	        "id" => $row["id"],
	        "picture" => $row["picture"],
	        "user" => $row["user"],
	        "location" => $row["location"],
	        "time" => $row["time"],
	        "lat" => $row["lat"],
	        "long" => $row["long"],
	        "al" => $row["al"],
	        "submit_time" => $row["submit_time"],
	    );		
	// "camera"数据表的格式
	} else if($tbname == "camera"){
		return Array(
	        "picture" => $row["picture"],
	        "image_make" => $row["image_make"],
	        "image_model" => $row["image_model"],
	        "compress" => $row["compress"],
	        "exposure_time" => $row["exposure_time"],
	        "ISO" => $row["ISO"],
	        "maxape" => $row["maxape"],
	        "foc" => $row["foc"],
		);
	// "resolution"数据表的格式
	} else if($tbname == "resolution"){
		return Array(
	        "picture" => $row["picture"],
	        "Xpix" => $row["Xpix"],
	        "Ypix" => $row["Ypix"],
	        "XRes" => $row["XRes"],
	        "YRes" => $row["YRes"],
	        "Band" => $row["Band"],
	        "bits" => $row["bits"],
		);
	// "vegetation"数据表的格式
	} else if($tbname == "vegetation"){
		return Array(
	        "GVI" => $row["GVI"],
	        "EXG" => $row["EXG"],
	        "CIVE" => $row["CIVE"],
	        "VEG" => $row["VEG"],
	        "EXGR" => $row["EXGR"],
	        "WI" => $row["WI"]
		);
	}


}
/********** /全局可变参数**********/
/*********************************/



/*******  MySQL检索式构建 *********/
/*********************************/
//构建SELECT语句
function select_mysql($tbname){
    //构建检索式
    $sql = "SELECT * FROM ". $tbname;
    $sql = $sql. " WHERE `picture` = '". $_COOKIE["query_key"]. "';";
    return $sql;
}
/*********** /必要函数 ************/
/*********************************/



/****** MySQL数据获取函数 *********/
/*********************************/
//如果用户提交空表单，什么也不做
function main_mysql($servername, $username, $password, $dbname, $tbname){
    // 创建和检测连接
    $conn = new mysqli($servername, $username, $password);
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    // 筛选数据
    $conn->query("USE ". $dbname.";");
    $sql = select_mysql($tbname); //echo $sql;
    $result = $conn->query($sql);

    // 数据包装为JSON数组
    if ($result->num_rows > 0) {
        $res_json=array();
        while($row = $result->fetch_assoc()) {
            $newdata = data_row($row, $tbname);
            array_push($res_json, $newdata);
        }
        $data=json_encode($res_json);
    } else {
        $data=json_encode([]);
    }

    // 断开连接
    $conn->close();
    return $data;
}
/***** /MySQL数据获取函数 *********/
/*********************************/

// $tbname修改为您希望展示的数据表名称
//  这里以"basinfo", "camera", "vegetation"和"resolution"四张数据表为例
//  展示PHP读取四张数据表的数据，并分别存于$points, ..., $resolution变量
$points = main_mysql($servername, $username, $password, $dbname, "basinfo");
$camera = main_mysql($servername, $username, $password, $dbname, "camera");
$vegetation = main_mysql($servername, $username, $password, $dbname, "vegetation");
$resolution = main_mysql($servername, $username, $password, $dbname, "resolution");
?>

2. JS接收变量：新建"info.php"文件，用于向用户展示主要的数据信息。在该文件中引入"read.info.php"文件，并增加以下代码。从而PHP获取的数据转化为JS变量。

<script>var points = JSON.parse('<?php echo $points ?>');</script>
<script>var camera = JSON.parse('<?php echo $camera ?>');</script>
<script>var resolution = JSON.parse('<?php echo $resolution ?>');</script>
<script>var vegetation = JSON.parse('<?php echo $vegetation ?>');</script>

3. 数据包装与展示：新建"show.info.js"文件，在"info.php"文件中引入"show.info.js"脚本。在"show.info.js"中加入以下代码。随后在"info.php"文件的<body>标签中添加onload事件，即<body onload="showphoto()">。此时在图1展示的网页中点击Info按钮，跳转到新的页面后，调试器就会输出一条特定数据的详细信息。如需要渲染HTML网页，则继续在"show.info.js"的//Print information后加入需要输出的HTML内容，并将其写到"info.php"中的HTML元素中即可。

//Merge jsonObject
// 参考https://blog.csdn.net/wangshu696/article/details/50969281
function merge(jsonbject1, jsonbject2){
    var resultJsonObject = {};
    for (var attr in jsonbject1) {
        resultJsonObject[attr] = jsonbject1[attr];
        }
    for (var attr in jsonbject2) {
        resultJsonObject[attr] = jsonbject2[attr];
    }
    return resultJsonObject;        
} 

function showphoto(){
    //get data
    var info = merge(points[0], camera[0]);
    var info = merge(info, resolution[0]);
    var info = merge(info, vegetation[0]);
	console.log(info)

    //Print information
    //...
}