PHPで拾った検索結果から、更に詳細画面を表示させたい。

###前提・実現したいこと
mysqlで構築したデータベースから数字で検索をかけ、表示された検索結果をクリックして詳細情報を表示させるサイトを作りたいと思っています。

mysqlへの接続と検索結果の表示は成功しましたが、以下問題点と不明点があります。
①検索欄に何も表示しなくても検索が成功する。
②何が入力されていても全件の検索結果が表示される。
③詳細情報を表示するコードの書き方がわからない。
④可能ならば、ページを移動せずに同じ画面内に検索結果と詳細情報を表示させたい。

超初心者につき不明点も多いため、無茶苦茶なコードかもしれません。
お力添えを頂ければ幸いです。

###該当のソースコード
index.html

<!DOCUTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/thml;charset=utf-8">
    <title>入力画面</title>
  </head>
  <body>
<!--検索ページ構成-->
    <h1>入力画面</h1>
    <form name="freeserch" action="freeserch.php" method="post">
      番号：<input type="int" name="number">
      <input type="submit" value="検索">
    </form>
  </body>
</html>

freesearch.php

<HTML>
	<HEAD>
		<TITLE>検索結果</TITLE>
	</HEAD>
	<BODY>

<?php
	header('Content-Type: text/html; charset=UTF-8');
	$db_user = "root";
	$db_pass = "password";
	$db_host = "localhost";
	$db_name = "test";
	$db_type = "mysql";

	$dsn="$db_type:host=$db_host;dbname=$db_name;charset=utf8";

	try {
		$pdo = new PDO($dsn,$db_user,$db_pass);
		$pdo->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
		$pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES,false);
		print"接続に成功しました...<br>";
	} catch (PDOException $Exception) {
		die('エラー:'.$Exception->getMessage());
}
//入力画面からのpostからデータを受け取る//
$number = $_POST['number'];
try {
	$sql="SELECT * FROM test WHERE number ";
	$stmh = $pdo->prepare($sql);
	$stmh->bindValue(':number', $sy,PDO::PARAM_STR);
	$stmh->execute();
	$count = $stmh->rowCount();
	print"検索結果は".$count."件です。<BR>";
} catch (PDOException $Exception) {
	print"エラー:".$Exception->getMessage();
}
if ($count<1) {
	print"検索結果がありません。<BR>";
}else{
	?>
	<TABLE width="300" border="1" cellspacing="0" cellpadding="8">
	<TBODY>
		<TR><th>番号</th><th>名前</th><th>値段</th></TR>
	<?php
		while ($row = $stmh->fetch(PDO::FETCH_ASSOC)) {
	?>
	<TR>
		<td align="center"><?=htmlspecialchars($row['number'])?></td>
		<td><?=htmlspecialchars($row['name'])?></td>
		<td align="center"><?=htmlspecialchars($row['price'])?></td>
	</TR>
	<?php
}
?>
</TBODY></TABLE>
<?php
}
?>
	</BODY>
</HTML>

###試したこと
詳細情報をmysqlから引っ張る為に、別にphpでコードを作る必要があるとの情報を見つけ、以下コードを上記freeserch.phpに入力しましたが、受け取る側のコードをどのように書けば良いかわかりません。

freesearch.php

<form action="syosai.php" method="POST" input type="hidden" name="key" value="<?=htmlspecialchars($row['number'])?>"><input type="submit" value="表示">

###補足情報(言語/FW/ツール等のバージョンなど)
PHP Version 7.1.6
関係ないかもしれませんが、xamppを使っています。

行動規範の内容に同意します

回答1件

ベストアンサー

②何が入力されていても全件の検索結果が表示される。

php
1$sql="SELECT * FROM test WHERE number ";

ではなく

php
1$sql="SELECT * FROM test WHERE number = :number";

ですね。プレースホルダを書かないと bindValue しても何の意味もありません。

①検索欄に何も表示しなくても検索が成功する。

2番に対する修正でこちらも副次的に直りますが，そもそも変数が未定義や無効な値であれば検索処理自体を発生させないほうがベターです。また，既存のコードは E_NOTICE レベルのエラーを無視しているので，設定次第でエラーが見えるようになります。どんな設定でもエラーが発生しないように書くのがベターです。

PHPでデータベースに接続するときのまとめ - Qiita

「初心者がやりがちなミス」の

$_POST['id'] などの外部入力からきた変数が定義されているかどうか確認していない
それらが文字列であるかどうかの確認をしていない
HTMLの <body></body> の中にデータベース接続処理を書いている
echo() や print() をベタ書きしている
Content-Typeを text/plain に変更せずに exit() や die() で強制終了処理を記述している

これらに該当しています。今回は，numberを文字列というよりは整数としてバリデーションおよびバインドすべきである点も考慮して修正すると

<?php

$number = filter_input(INPUT_POST, 'number', FILTER_VALIDATE_INT);

if (!is_int($number)) {
    header('Content-Type: text/plain; charset=UTF-8', true, 400);
    exit('numberに整数値が指定されていません'); 
}

try {

    $pdo = new PDO(
        'mysql:dbname=test;host=localhost;charset=utf8mb4',
        'root',
        'password',
        [
            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
        ]
    );

    $stmt = $pdo->prepare("SELECT * FROM test WHERE number = :number");
    $stmt->bindValue(':number', $number, PDO::PARAM_INT);
    $stmt->execute();

    $rows = $stmt->fetchAll();
    $count = count($rows);

} catch (PDOException $e) {

    header('Content-Type: text/plain; charset=UTF-8', true, 500);
    exit($e->getMessage()); 

}

function h($str)
{
    return htmlspecialchars($str, ENT_QUOTES, 'UTF-8');
}

?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>検索結果</title>
    </head>
    <body>
<?php if ($count > 0): ?>
        <p>検索結果は<?=h($count)?>件です。</p>
        <table width="300" border="1" cellspacing="0" cellpadding="8">
            <tr>
                <th>番号</th>
                <th>名前</th>
                <th>値段</th>
            </tr>
<?php foreach ($rows as $row): ?>
            <tr>
                <td align="center"><?=h($row['number'])?></td>
                <td><?=h($row['name'])?></td>
                <td align="center"><?=h($row['price'])?></td>
            </tr>
<?php endforeach; ?>
        </table>
<?php else: ?>
        <p>見つかりませんでした…</p>
<?php endif; ?>
    </body>
</html>

③詳細情報を表示するコードの書き方がわからない。

詳細情報とは何でしょうか？

④可能ならば、ページを移動せずに同じ画面内に検索結果と詳細情報を表示させたい。

JavaScript(jQuery)からPHPのAPIを利用する - Qiita

ReactやVueによるSPA構築がスタンダードな昨今，jQueryによる方法は少々古臭いですが，入門としては悪くないと思うのでこの方法を使ってみてください。レスポンスとしてHTMLを吐く代わりにJSONを吐くだけです。

投稿2017/07/09 09:29

編集2017/07/09 09:34

mpyw

総合スコア5223

claya

2017/07/09 09:54

③詳細情報は、商品ごとの説明文です。検索結果には番号と商品名と値段だけ記載して、クリックすると詳細な説明文が表示されるようにしたいです。mysqlには番号、商品名、値段、説明文を入力しており、それぞれの列はnumber,name,price,contentsとして登録しています。説明になっているでしょうか。

mpyw

2017/07/09 10:14 編集

では，numberを指定して詳細情報を含む情報を返すJSON APIとして機能するPHPファイルを作成しましょう。そして，jQueryを使ってJavaScriptからJSON APIに対してリクエストを飛ばし，画面遷移せずに結果を表示させましょう。（書き方は最後のQiita記事を参考に）

mpyw

2017/07/09 10:13 編集

蛇足ですが，検索のように読み取り操作のみを行うページの場合，リクエストはPOSTではなくGETで受け付けるほうが正しいです。 http://qiita.com/qiita_taro/items/66f2930c5d1cc10722e7

claya

2017/07/09 10:20

丁寧にご説明いただきありがとうございます。教えていただいたサイトを参考に作成してみます。ご教示ありがとうございます。

mpyw

2017/07/09 10:23 編集

あと…numberを指定して得る検索結果をループ処理している，ということはnumberは一意な値（プライマリキー）ではないんですよね？でしたら単体の詳細情報を取得するときにプライマリキーが無いと困るので，プライマリキーのカラムを作成してください。通常「id」という名前にすると思います。データベースのテーブルには，原則的に，プライマリキーを必ず1つ用意しなければなりません。

mpyw

2017/07/09 10:24

もし一意な値であるのであれば，fetchを1回実行するだけで十分です。ループ処理は不必要です。

claya

2017/07/11 13:45

上記コードにて検索したところ、検索については問題なく実行できました。ご教示ありがとうございます。 ③、④の内容については勉強不足につき読み込んでいる最中です。不明点があればまた伺うかもしれませんが、取り急ぎベストアンサーとさせて頂きました。

行動規範の内容に同意します