【PHP入門】得意先検索＆ソート

2023-05-02　（更新日:2023-06-25）

＜学習する内容＞

　得意先一覧にて検索機能やソート機能を追記し動きを理解します。

１）検索機能、ソート機能追加

　準備として下記２つのプログラムを記述しファイルを配置してください。
下記の空白表示をコピーもしくはダウンロードし指定のフォルダーに配置してください。
ファイル名：style.css　

配置先：c:\xampp\htdocs\

サンプルプログラム名：style.css

						/* 書式設定 */
						body {
							font-family: sans-serif,メイリオ, Meiryo; 
							color:#2E2E2E;
							font-size:12px;
							line-height:24px;
						}
						input,textarea {
							font-size:12px;
							cursor:pointer;
						}
						td {
							padding-left:3;
							font-size:12px;
							line-height: 24px;
						}

＜解説＞
これはcssと呼ばれるものでページの書式を指定します。本章では詳細は割愛します。

下記の空白表示をコピーもしくはダウンロードし指定のフォルダーに配置してください。
ファイル名：ajax_text_null.php　

配置先：c:\xampp\htdocs\

サンプルプログラム名：ajax_text_null.php

						<?php
							echo "";
						?>

＜解説＞
JavaScriptで得意先名検索欄でクリックすると何も表示されなくする部品となります。本章では詳細は割愛します。

検索機能とソート機能を追記します。
下記のサンプルプログラムをコピーもしくはダウンロードし指定のフォルダーに配置してください。
必ずDBのパスワードを********から設定したパスワードに変更してください
ファイル名：customerlist2_8.php　

配置先：c:\xampp\htdocs\

配置先URL：http://localhost/customerlist2_8.php

サンプルプログラム名：customerlist2_8.php

						<?php
						
						//DBへの接続
							$host = 'localhost';	//サーバ名
							$user = 'root';			//ユーザ名
							$pass = '********';		//DBのパスワード（自環境のパスワードに書き換えのこと）
							$dbnm = 'sales';		//データベース名
							$conn = mysqli_connect($host,$user,$pass,$dbnm) or die("er 接続できません");
						
						//登録データの受信
							$fnc = filter_input(INPUT_POST, 'fnc');
							$set_customerCode = filter_input(INPUT_POST, 'set_customerCode');
							$set_customerName = filter_input(INPUT_POST, 'set_customerName');
							$set_zipcode = filter_input(INPUT_POST, 'set_zipcode');
							$set_address1 = filter_input(INPUT_POST, 'set_address1');
							$set_address2 = filter_input(INPUT_POST, 'set_address2');
						
						//データ有無チェック
									$mess = null;		//$messのリセット（これを定義しないとwarning）
						if(isset($fnc)){
							if(empty($set_customerCode)){
									$mess = '得意先コードが未登録です。';
								if(empty($set_customerName)){
									$mess = '得意先コードと得意先名が未登録です。';
								}
							}else{
								if(empty($set_customerName)){
									$mess = '得意先名が未登録です。';
								}else{
									$set_customerName = mb_convert_kana($set_customerName,'AKS');		//文字の全角化
									$set_customerName = str_replace('　','',$set_customerName);			//空白をとる
									$set_customerName = "'$set_customerName'";	//varcharの変数を"''"囲む
								}
							}
							if(empty($set_zipcode)){
								$set_zipcode = 'null';				//データがなければ'null'を代入
							}else{
								$set_zipcode = "'$set_zipcode'";
							}
							if(empty($set_address1)){
								$set_address1 = 'null';			//データがなければ'null'を代入
							}else{
								$set_address1 = "'$set_address1'";
							}
							if(empty($set_address2)){
								$set_address2 = 'null';			//データがなければ'null'を代入
							}else{
								$set_address2 = mysqli_real_escape_string($conn,$set_address2);
								$set_address2 = "'$set_address2'";
							}
						}
						
						//データ登録
						if(empty($mess)){					//データチェックで問題がない（$messに何もデータがない）
							if(isset($set_customerCode)){
								$sql = "insert into Mcustomer
											(
												customerCode
												,customerName
												,zipcode
												,address1
												,address2
											) values (
												$set_customerCode
												,$set_customerName
												,$set_zipcode
												,$set_address1
												,$set_address2
											) on duplicate key update
												customerName = $set_customerName
												,zipcode = $set_zipcode
												,address1 = $set_address1
												,address2 = $set_address2
											;";
								mysqli_query($conn,$sql) or die ("error $sql");
							}
						}
						
						//検索データ受信
							$select_customerName = filter_input(INPUT_POST, 'select_customerName');
							$select_customerName = mb_convert_kana($select_customerName,'AK');		//文字の全角化
						if(empty($select_customerName) or $select_customerName == '得意先名検索'){
							$clr_customer = "color:#a9a9a9;";
							$select_customerName_display = '得意先名検索';
							$where_customer = null;
						}else{
							$clr_customer = null;
							$select_customerName_display = $select_customerName;
							$where_customer = "where customerName like '%$select_customerName%'";
						}
						//ソートデータ受信
							$select_sort = filter_input(INPUT_POST, 'select_sort');
							$sort_display = 'ソート';
							$SORT = null;
							switch($select_sort){
								case 1:
									$SORT = 'order by customerName';
									$sort_display = '得意先名昇順';
									break;
								case 2:
									$SORT = 'order by customerName desc';
									$sort_display = '得意先名降順';
									break;
							}
						
						echo <<<EOT
						<!DOCTYPE html>
						<html lang="ja">
						
						<head>
							<meta charset="utf-8">
							<link rel="stylesheet" href="/style.css" type="text/css">
							<title>得意先一覧表</title>
							<script type="text/javascript">
							<!--
							var ajax = new XMLHttpRequest();
								function changeText1() {
									ajax.onload = function() {
										document.getElementById('textMessege1').value = ajax.responseText;
										document.getElementById('textMessege1').style.color = '#404040';
									}
									ajax.open('GET','ajax_text_null.php',true);
									ajax.send(null);
								}
							-->
							</script>
						</head>
							
						<body>
						<table>
							<tr>
								<td width="100">得意先一覧表</td>
							<form method="POST" action="{$_SERVER['PHP_SELF']}">
								<td width="130px">
									<input type="text" name="select_customerName" style="width:120px;height:20px;{$clr_customer}" 
									value="{$select_customerName_display}" id="textMessege1" onClick="changeText1();">
								</td>
								<td width="60px">
									<input type="submit" value="検索" style="width:100%;">
								</td>
							</form>
							<form method="POST" action="{$_SERVER['PHP_SELF']}">
								<td width="60px">
									<input type="submit" value="クリア" style="width:60px;">
								</td>
							</form>
								<td>{$mess}<td>
							<form method="POST" action="{$_SERVER['PHP_SELF']}">
								<td width="110px">
									<select type="text"  name="select_sort" onchange="submit(this.form)"  style="width:100px;height:24px;">
										<option value="{$select_sort}">{$sort_display}
										<option value="1">得意先名昇順
										<option value="2">得意先名降順
										<option value="">解除
									</select>
								</td>
							</form>
							</tr>
						</table>
						<table bgcolor="#a9a9a9" cellspacing="1px" style="font-size:12px;" >
							<tr bgcolor="#D3D3D3" style="height:24px;" align="center">
								<td width="90">得意先コード</td>
								<td width="200">得意先名</td>
								<td width="70">郵便番号</td>
								<td width="200">住所1</td>
								<td width="200">住所2</td>
								<td width="60">登録</td>
							</tr>
							<tr bgcolor="white" style="height:24px;" align="left">
							<form method="POST" action="{$_SERVER['PHP_SELF']}">
									<input type="hidden" name="fnc" value="1">
								<td>
									<input type="text" name="set_customerCode" style="width:98px;">
								</td>
								<td>
									<input type="text" name="set_customerName" style="width:198px;">
								</td>
								<td>
									<input type="text" name="set_zipcode" style="width:68px;">
								</td>
								<td>
									<input type="text" name="set_address1" style="width:198px;">
								</td>
								<td>
									<input type="text" name="set_address2" style="width:198px;">
								</td>
								<td>
									<input type="submit" value="新規" style="width:60px;">
								</td>
							</form>
							</tr>
						EOT;
						
						//DBからデータを抽出
							$sql = "select customerCode,customerName,zipcode,address1,address2 from Mcustomer
									$where_customer
									$SORT;";
							$res = mysqli_query($conn,$sql) or die("エラー $sql");
							while($row = mysqli_fetch_array($res)){		//while(){ ～ }繰り返し処理
								$customerCode = $row["customerCode"];
								$customerName = $row["customerName"];
								$zipcode = $row["zipcode"];
								$address1 = $row["address1"];
								$address2 = $row["address2"];
								
						echo <<<EOT
							<tr bgcolor="white" style="height:24px;" align="left">
							<form method="POST" action="{$_SERVER['PHP_SELF']}">
									<input type="hidden" name="fnc" value="1">
									<input type="hidden" name="set_customerCode" value="{$customerCode}">
								<td width="100">
									{$customerCode}
								</td>
								<td>
									<input type="text" name="set_customerName" style="width:198px;" value="{$customerName}">
								</td>
								<td>
									<input type="text" name="set_zipcode" style="width:68px;" value="{$zipcode}">
								</td>
								<td>
									<input type="text" name="set_address1" style="width:198px;" value="{$address1}">
								</td>
								<td>
									<input type="text" name="set_address2" style="width:198px;" value="{$address2}">
								</td>
								<td>
									<input type="submit" value="修正" style="width:60px;">
								</td>
							</form>
							</tr>
						EOT;
							}		//←　繰り返し処理の }
						
						echo <<<EOT
							</table>
						</body>
						
						</html>
						EOT;
						
						?>

＜解説＞
79行目から90行目（検索データ受け取り）
変数名select_customerNameを受け取ります。受信後に半角文字入力に対応するよう全角に変換します。
if(empty($select_customerName) or $select_customerName == '得意先名検索')なら
$where_customer = null;にて何もしない。表示は$select_customerName_display = '得意先名検索';とする。 $select_customerName == '得意先名検索'は入力欄に意味を持たせるため表示しておりそのまま検索をクリックすると「得意先名検索」送信されるため。
$clr_customer = "color:#a9a9a9;";は「得意先名検索」は注釈の意でグレーアウトさせています。

}else{　は上記条件ではないときの処理を記載
$clr_customer = null;でクレーアウトをなくし入力欄に$select_customerName_display = $select_customerName;で検索して文字を表示。
$where_customer = "where customerName like '%$select_customerName%'";
検索のwhere句を代入

133行目から145行目（検索データ送信）
id="textMessege1" onClick="changeText1();"114行目記載のJavaScriptに対応してます。デフォルトの注釈表示を消します。検索データ入力欄です。value="クリア"のボタンは検索入力をリセットします。
195行目（SQL where句）
$where_customer　に代入された検索条件をSQL文に組み込みます。

114行目から126行目（JavaScript 入力欄に文字を表示し入力時削除）
これは、デフォルトで「得意先名検索」表示されていたのを、入力欄にカーソルを置いたとき表示を消すJaveScriptです。結構サイトは見やすくなるので記述してます。もし同じように入力欄を追加するときは117行目から124行目をコピして 124行目の下にペーストします。その後追加下側の変数を修正
　changeText1()　→　changeText2()
　'textMessege1'　→　'textMessege2' とします。
追加した入力欄のid="textMessege2" onclick="changeText2();" としてください。
詳細解説はちょっと難しいので割愛します。

91行目から104行目（ソート指示データ受け取り）
if文でも書けますが、バリエーションを持たせるためswitch文で記載しました。
$select_sortが1ならcase 1:以下の処理を実施
ソートのSQL文はSQL文の最後に　order by 対象カラム　を記載します。
対象カラムの後descは降順を意味します。
注）switch文のcase 毎に該当する処理を終わらせるためbreak;の記述を忘れずに！
197行目（SQL sort）

3）サンプルデータの登録

表示させるサンプルデータの登録は大変です。登録用のコマンドをご利用ください。
※得意先コードを10001から10030までのデータです、登録済の得意先コードのデータがあるエラーで登録
できなくなるので該当する得意先コードのデータは利用しないでください。
使い方は、2. 2 DBの基本操作の記載の通り「powershell」を立ち上げ、DBにログインします。
サンプルデータコマンド集の必要な得意先コードに該当するコマンドをコピーし「powershell」内に
ペーストするとデータがinsertされます。

得意先一覧のページ指定表示や表示数の設定を行います。

＜初心者向けPHP・DB入門メニュー＞

はじめに
0. 1	PHP・DBの学習方法
環境構築
1. 1	Webサーバ・DBのインストール
1. 2	Webサーバ・DBの設定
得意先一覧の作成
2. 1	HTMLで簡単な表作成
2. 2	DBの基本操作
2. 3	PHPからDBを操作
2. 4	PHPとDBを使った得意先一覧作成
2. 5	PHPのデータ送受信
2. 6	得意先登録画面の作成
2. 7	得意先登録SQL on duplicate key
2. 8	得意先検索＆ソート
2. 9	得意先一覧ページ指定・表示
2.10	PHP include関数の活用
2.11	PHP CSVデータの取り込み
日報の作成
3. 1	マスターの作成とリレーション
3. 2	日報登録画面の作成
3. 3	日報一覧画面の作成