phpのforeachに内にbootstrapを適応させたい

Question

前提・実現したいこと

下部のdetail.phpのコードを「bootstrapカード」の様に装飾したいのですが、具体的にどう書き換えたら仕上がりますでしょうか？

「bootstrapカード」のリスト１、リスト２、リスト３の部分にdetail.phpの「商品名」、「価格」、「個数」を当てはめたいです。

detail.php

<?php
$pdo=new PDO('mysql:host=localhost;dbname=shop;charset=utf8', 
	'staff', 'password');
$sql=$pdo->prepare('select * from product where id=?');
$sql->execute([$_REQUEST['id']]);
foreach ($sql as $row) {

	
	echo '<p><img src="image/', $row['id'], '.jpg"></p>';
	echo '<form action="cart-insert.php" method="post">';
	echo '<p >商品名：', $row['name'], '</p>';
	echo '<p>価格：', $row['price'], '</p>';
	echo '<p>個数：<select name="count">';
	for ($i=1; $i<=10; $i++) {
		echo '<option value="', $i, '">', $i, '</option>';
	}
	echo '</select></p>';


		
}

?>

「bootstrapカード」

<div class="card" style="width: 18rem;">
  <img class="card-img-top" alt="カードの画像" src="...">
  <div class="card-body">
    <h5 class="card-title">カードのタイトル</h5>
    <p class="card-text">カードのタイトルに基づいて、カードのコンテンツの大部分を占める簡単なサンプルテキスト。</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">リスト1</li>
    <li class="list-group-item">リスト2</li>
    <li class="list-group-item">リスト3</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">リンク1</a>
    <a href="#" class="card-link">リンク2</a>
  </div>
</div>

###試したこと

detail.phpのforeach<p>タグ内を編集し線は表示されたがカードの外枠はどの様に設定すればいいか不明点です。

	echo '<p class="list-group-item">商品名：', $row['name'], '</p>';
	echo '<p class="list-group-item">価格：', $row['price'], '</p>';
	echo '<p class="list-group-item">個数：<select name="count">';

###試したこと２

<?php
$pdo=new PDO('mysql:host=localhost;dbname=shop;charset=utf8', 
    'staff', 'password');
$sql=$pdo->prepare('select * from product where id=?');
$sql->execute([$_REQUEST['id']]);
foreach ($sql as $row) {

<div class="card" style="width: 18rem;">//追加文

    echo '<p><img src="image/', $row['id'], '.jpg"></p>';
    echo '<form action="cart-insert.php" method="post">';
    echo '<p >商品名：', $row['name'], '</p>';
    echo '<p>価格：', $row['price'], '</p>';
    echo '<p>個数：<select name="count">';
    for ($i=1; $i<=10; $i++) {
        echo '<option value="', $i, '">', $i, '</option>';
    }
    echo '</select></p>';

</div>//追加文

}

?>

###試したこと3

<?php
$pdo=new PDO('mysql:host=localhost;dbname=shop;charset=utf8', 
    'staff', 'password');
$sql=$pdo->prepare('select * from product where id=?');
$sql->execute([$_REQUEST['id']]);
foreach ($sql as $row) {

echo '<p class="card" style="width: 18rem;">'//追加文

    echo '<p><img src="image/', $row['id'], '.jpg"></p>';
    echo '<form action="cart-insert.php" method="post">';
    echo '<p >商品名：', $row['name'], '</p>';
    echo '<p>価格：', $row['price'], '</p>';
    echo '<p>個数：<select name="count">';
    for ($i=1; $i<=10; $i++) {
        echo '<option value="', $i, '">', $i, '</option>';
    }
    echo '</select></p>';

		echo '</p>';//追加文

}

?>

補足情報（FW/ツールのバージョンなど）

OS:mac

Answer 1

可変となる箇所を変数で埋めて出力すれば良いだけではないでしょうか。

Comments

[Ms.yy]

<p>タグに<p class="list-group-item">とすれば確かに行に枠組みは表示されるのですが、行ではなくカードの枠はどの様に行えばいいでしょうか？

[m.ts10806]

どのクラスがどの役割をしているか分からずにモック作られてるんですか？

[Ms.yy]

すみません・・・

[Ms.yy]

カードの枠組みはclass="card" で合ってるのかと思いますが、これをどうやってforeach内に組み込んでいいのかが分からず、、
ご質問をさせていただきました。

[m.ts10806]

怒っているわけではなく、「どこまで自分で書いたコードを認識できているか」の確認です。

基本に立ち返りましょう。
PHPはあくまで画面に対して「出力」を行っているだけで、その「出力」をブラウザで確認するからHTML、CSS、JavaScriptなどで解釈できるわけです。
ということはブラウザが解釈できる形で出力してあげればいいだけです。
echo "Hello World"; とすればブラウザには「Hello World」と表示されるように、「ブラウザが正しく解釈できるように」出力を書いてあげましょう。なので、ブラウザで確認するときはブラウザの「ソースを表示」で想定通りのHTMLになっているか確認します。

どのクラスがどの役割をしているかはとりあえずBootStrapのドキュメントを読めば良いです。

[Ms.yy]

今回カードの枠組みとして設定したい部分を出力を確認してみました。

echo '<p >商品名：', $row['name'], '</p>';の部分が<p>商品名：松の実</p>と表示されていたのですがforeach内にカードの外枠クラスの <div class="card" style="width: 18rem;">
を入力してもvscode上ではエラーとなってしまいます。
どうしたらいいでしょうか？汗

エラー：syntax error, unexpected '<'

[m.ts10806]

どこにどのように書いたのでしょうか。

変数を伴わないのであれば<?php ?>の外に出すので問題ないと思いますし、
見やすさを重視するならヒアドキュメントで一括出力書いても良いと思います。

[Ms.yy]

detail内のforeach文に「<div class="card" style="width: 18rem;">」という文と閉じタグの</div>を追加しました。

試してみた２を新しく作成しコードを載せさせていただきました。
これではダメな様で^^;

[m.ts10806]

予想通り。すでに書いた通り、PHPの構文で文字列を出力してください。
echo "Hello World"; とすればブラウザには「Hello World」と表示されるように、「ブラウザが正しく解釈できるように」出力を書いてあげましょう。
文字列出力の機能が使われていなければすべてPHPコードとして解析しようとしますからね。

[Ms.yy]

すみませんできませんでした。

出力としてechoを使い試してみましたが難しく解決に至りませんでした。^^;

###試したこと3に載せさせていただきました。

[m.ts10806]

文の終端[ ; ]がありません。

[Ms.yy]

失礼しました。
無事にスタイルをつけることができました！

ありがとうございます＾＾

[m.ts10806]

プログラミングをするのであれば構文チェック機能のあるエディタは導入された方が良いです。
eclipseなどならすぐ導入できます。

[Ms.yy]

ありがとうございます＾＾