一、目标
该笔记的目的是引导读者借助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:数据库网页构建原理和实践。
二、搭建步骤
- 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"];
}
}
- 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"]