URLパラメーターとして検索条件を含めてPOSTサーバー側にデータを渡す。

現在マッチングサイトをポートフォリオとして制作しています。検索ボタンを押した際にURLにパラメーターとして検索条件を含めてPOSTサーバー側にデータを渡せるようにしたと考えています。
検索ボタンがあるページはこのリンクになります。⇒https://hayato0904.github.io/search.html
現段階はindex.phpのファイルにデータの移動を完了している状態です。
カラムのデータを引っ張り出し表示している状態です。下記画像になります。

html![index.phpの内容。](f5a6df1c80860055d3ec3a613821076f.png)
1コード<!DOCTYPE html>
2<html>
3 <head>
4  <link rel="stylesheet" type="text/css" href="/css/profile.css">
5  <title>駆け出しエンジニアマッチングサイト</title>
6 </head>
7<body>
8
9  <div class="header">
10    <div class="header-logo">駆け出しエンジニアとマッチング</div>
11  </div>
12
13  <div class="main">
14    <div class="copy-container">
15      <h1>自分のプロフィール</h1>
16    </div>
17
18    <div class="contents">
19        <h1 style="background-color: black;">画像登録＆更新</h1>
20        <h2>※登録済みのユーザーのみ変更可能</h2>
21        <img src="https://www.pakutaso.com/shared/img/thumb/0I9A5582ISUMI.jpg"　width="200" height="400">
22          <h2>プロフィール画像</h2>
23          <div class="faile">
24            　 <button onclick="return confirm('ファイル選択画面に移動します。')">ファイルを選択</button>
25           <button onclick="return confirm('指定されている画像を削除します。よろしいでしょうか？')">削除</button>
26          </div> 
27          <button onclick="return confirm('指定されている画像を更新します。よろしいでしょうか？')">更新</button>
28
29           <div class="contents">
30            <h1 id="tera">
31            <h1 style="background-color: black;">ユーザー名</h1>
32            <input placeholder="ユーザー名を入力してください。">
33            <h1 style="background-color: black;">希望する活動場所(複数回答可)</h1>
34            <input placeholder="希望する活動場所を入力してください。(複数回答可)">
35            <h1 style="background-color: black;">使用できるプログラミング言語 複数回答可</h1>
36            <input type="checkbox" id="check1">
37        　　<label for="check1">HTML</label>
38        　　<input type="checkbox" id="check1">
39        　　<label for="check1">CSS</label>
40        　　<input type="checkbox" id="check1">
41        　　<label for="check1">JavaScript</label>
42        　　<input type="checkbox" id="check1">
43        　　<label for="check1">Ruby</label>
44        　　<input type="checkbox" id="check1">
45        　　<label for="check1">Python</label>
46        　　<input type="checkbox" id="check1">
47        　　<label for="check1">Java</label>
48        　　<input type="checkbox" id="check1">
49        　　<label for="check1">Go</label>
50            <input type="checkbox" id="check1">
51            <label for="check1">SQL</label>
52            <input type="checkbox" id="check1">
53            <label for="check1">PHP</label>
54            <input type="checkbox" id="check1">
55            <label for="check1">C言語</label>
56            <input type="checkbox" id="check1">
57            <label for="check1">C++</label>
58            <h1 style="background-color: black;">実務経験歴</h1>
59            <input placeholder="実務経験歴を入力してください。">
60            <h1 style="background-color: black;">自分の年齢</h1>
61            <input placeholder="自分の年齢を入力してください。">
62            <h1 style="background-color: black;">相手の希望年齢</h1>
63            <input type="checkbox" id="check1">
64            <label for="check1">10代</label>
65            <input type="checkbox" id="check1">
66            <label for="check1">20代前半</label>
67            <input type="checkbox" id="check1">
68            <label for="check1">20代後半</label>
69            <input type="checkbox" id="check1">
70            <label for="check1">30代前半</label>
71            <input type="checkbox" id="check1">
72            <label for="check1">30代後半</label>
73            <input type="checkbox" id="check1">
74            <label for="check1">40代以上</label>
75            <h1 style="background-color: black;">目標</h1>
76            <input placeholder="自分の目標を入力してください。">
77            <h1 style="background-color: black;">自己紹介</h1>
78            <input placeholder="自己紹介を入力してください。">
79            <h1 style="background-color: black;">Twitter</h1>
80            <input placeholder="自分のTwitterのリンクを入力してください。">
81            <h1 style="background-color:black;">更新</h1>
82            <p><button onclick="return confirm('記入された内容を更新します。よろしいでしょうか？')">更新</button></p>
83          </form>
84          </div>        
85          　　　　　 <table border="1" width="80%" bordercolor="#green" bgcolor="#f5f5f5">
86            <tr bgcolor="deepskyblue">
87                <td>ユーザー名</td>
88            </tr>
89            <tr>
90                <td>山内まりあ</td>
91            </tr>
92            <tr bgcolor="deepskyblue">
93                <td>希望する活動場所</td>
94            </tr>
95            <tr>
96                <td>東京</td>
97            </tr>
98            <tr bgcolor="deepskyblue">
99                <td>使用できるプログラミング言語</td>
100            </tr>
101            <tr>
102                <td>PHP</td>
103            </tr>
104            <tr bgcolor="deepskyblue" >
105                <td>実務経験歴</td>
106            </tr>
107            <tr>
108                <td>3年</td>
109            </tr>
110            <tr bgcolor="deepskyblue" >
111                <td>自分の年齢</td>
112            </tr>
113            <tr>
114                <td>21歳</td>
115            </tr>
116            <tr bgcolor="deepskyblue" >
117                <td>相手の希望年齢</td>
118            </tr>
119            <tr>
120                <td>20代前半 20代後半</td>
121            </tr>
122           <tr bgcolor="deepskyblue" >
123                <td>自分の年齢</td>
124            </tr>
125            <tr>
126                <td>23歳</td>
127            </tr>
128            <tr bgcolor="deepskyblue" >
129                <td>目標</td>
130            </tr>
131            <tr>
132                <td>プロジェクトマネージャーになること</td>
133            </tr>
134            <tr bgcolor="deepskyblue" >
135                <td>自己紹介</td>
136            </tr>
137            <tr>
138                <td>元気が取り柄です！よろしくお願いします。</td>
139            </tr>
140            <tr bgcolor="deepskyblue">
141                <td>Twitter</td>
142            </tr>
143            <tr>
144                <td></td>
145            </tr>
146            </table>  
147            </tr>
148            </table>
149        </div>
150  </div>
151  <script src="profile.js">
152    console.log('Hello World');
153  </script>
154</body>
155</html>

m.ts10806

2020/09/01 22:29 編集

SQL 条件で検索して出てくる記事では何か足りませんか？どういうデータを元にどういうデータを取得したいのかという具体的な情報が何もない丸投げなので、応えようがないかと思います。

m.ts10806

2020/09/01 22:31

ちなみに >XAMPPのカラムデータから XAMPPはツールの総称ですのでカラムはおろかデータ自体も持ちません。データを保持しているのはXAMPPであれば「MariaDB」（またはMySQL）という名前のデータベースです。（RDBMSと言います）

yambejp

2020/09/02 01:46

結局何が聞きたいのでしょうか？・どういうSQL文を書いたらいいか？・SQL文を効率的に書く方法？・効率的なデータの持ち方？

hayatonbi94

2020/09/02 09:51

＞SQL 条件で検索して出てくる記事では何か足りませんか？すみません。自分ではSQL条件を使わない認識だったため、そのワードでは検索していませんでした。＞ちなみに >XAMPPのカラムデータから XAMPPはツールの総称ですのでカラムはおろかデータ自体も持ちません。データを保持しているのはXAMPPであれば「MariaDB」（またはMySQL）という名前のデータベースです。（RDBMSと言います）了解しました。すみません。知識不足でした。＞結局何が聞きたいのでしょうか？質問文をより細かくさせていただきました。ご確認いただけると幸いです。

m.ts10806

2020/09/02 09:51

>index.phpのファイルにデータの移動どういうことでしょうか。プログラムファイルにデータは基本持てませんが… >下記画像になります。画像添付し忘れでしょうか

hayatonbi94

2020/09/02 09:54

＞どういうことでしょうか。プログラムファイルにデータは基本持てませんが… カラムのデータを画像のように取得しているため、データを持っていると表現させていただきました。画像を添付しました。添付忘れです。お手数をおかけします。

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

回答1件

データベースにあるデータを検索フォームの条件に合わせて抽出したいということですよね？

当然の流れとしては
１．検索フォームの条件を設定し送信したその値が受け取れているか？
HTMLのコード的にformで送るときのinputとかの書き方を見てみたらいいかと思います。
そして、POSTデータなどを送った際の受け取り。
一旦受け取れているかprintやらprint_rやらそういうので表示してみる。

２．まずは、xammpてphpmyadminなかったでしたっけ？
それでデータベース見たら、SQL文を直接かけるので、SELECT文を書いてみたらいいですよ。
条件に関してはWHERE句とかあります。
書かなくても検索で条件やら選択してやったらSQL文のとこにこういう文書いたよって出た気もします。

３．データベースの接続処理を頑張るｗｗｗ
まぁ基本やることは慣れればなんですけど、意外と最初ここってとっつきにくい気もするんですよね。
ただ、その分探せば山ほど出てきます。
接続方法について、、、try catchだとかなんとか、、、
とりあえずそのまま書いてできるかでも良いんじゃないですかね。
エラーが出ずに接続できてればもういけます！ｗｗｗ

４．phpmyadminでやった文をファイル側で書いてそれをデータベースに接続した後にこれやってね～ってしていきます。

５．結果としてデータが返ってくれば、あとは表示させるだけ！
量とかにもよりますが、配列とかforとかforeachとかそういうの駆使したりしながらやっていく感じ。

投稿2020/09/02 04:22

Fetherion

総合スコア60

hayatonbi94

2020/09/02 10:02

回答ありがとうございます。自分の言葉足らずでご迷惑をおかけしました。また、自分なりに全てのプログラミングの知識を使い説明するので読んでくださると幸いです。まず、私の質問文が分かりにくかったため、再度書き直しました。＞データベースにあるデータを検索フォームの条件に合わせて抽出したいということですよね？その作業は終了しました。質問文の画像があるのですが、そこで抽出は完了した認識です。（接続が完了した状態です。）その状態から、質問文にある検索画面で検索ボタンを押して、接続してある情報をチェックボックスの内容ごとに取得したいと考えています。

Fetherion

2020/09/03 00:27

あぁ、、、ようはすでに検索条件関係なく、データベースのテーブルのデータをすべて、引っ張ってきている状態で、そのデータを検索条件に合わせて表示切替というかしたいってことですかね？今回の質問でPOST送信を使ってっていうのであれば、１．検索条件をはめて送信２．検索条件を受け取る３．そもそものデータをforeachとかで回しながら４．一つずつ検索条件にあてはまるかをif文とかでやっていき５．検索条件すべてにあてはまったデータをまぁ、$検索条件に合ったデータだよって箱に入れなおすって感じになるんじゃないでしょうか？実際それなら、データをすべてひっぱってくるんじゃなくて、その検索条件をもとにSELECTした方がいいような気もしないでもないんですけど、、、

hayatonbi94

2020/09/03 10:15

＞あぁ、、、ようはすでに検索条件関係なく、データベースのテーブルのデータをすべて、引っ張ってきている状態で、そのデータを検索条件に合わせて表示切替というかしたいってことですかね？そうです。＞今回の質問でPOST送信を使ってっていうのであれば、１．検索条件をはめて送信２．検索条件を受け取る３．そもそものデータをforeachとかで回しながら４．一つずつ検索条件にあてはまるかをif文とかでやっていき５．検索条件すべてにあてはまったデータをまぁ、$検索条件に合ったデータだよって箱に入れなおすって感じになるんじゃないでしょうか？了解しました。試してみます。＞実際それなら、データをすべてひっぱってくるんじゃなくて、その検索条件をもとにSELECTした方がいいような気もしないでもないんですけど、、いろいろなやり方があるのですね。検討してみます。回答ありがとうございます。

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