見出し画像

データベースを使った商品レビュー管理システムを作ろう(5)～フロントエンド用PHPコードその2～

とりいただし

データベースを使った商品レビュー管理システム。
４回目の今回は、フロントエンド側のPHPコードを紹介その2となります。

フロントエンド側のコードはすべてdbinfoというフォルダーに入っています。
前回はdb_info.php,db_control.phpという２つのコードファイルを紹介しましたので、今回は残りの２つのコードファイルについて紹介ます。

|
|-index.html
|-style.css
|-review---admin---adduser.php
         |       |-dashboard/php
         |       |-delete.php
         |       |-display.php
         |       |-login.php
         |       |-logout.php
         |       |-modpass.pho
         |       |-reply.php
         |       |-update.php
         |       |-userdelete.php
         |       |-userlist.php
         |
         |-dbinfo----db_control.php 
                   |-db_display.php <--今回解説するコード
                   |-db_info.php 
                   |-db_input.php <----今回解説するコード

db_display.php

このコードは、フロントエンド部に以下の商品レビュー一覧を表示させるためのコードになります。

動作説明

レビュー一覧では、すべてのレビューを表示するのではなく、db_control.phpファイル内の変数review_per_pageで定めた１ページ当たりのレビュー数だけ表示させます。

これ以上にレビューがある場合は、「進む」「戻る」というボタンを表示させ、「進む」がクリックされたら次ページのレビューを、「戻る」がクリックされたら前ページのレビューを表示。

もちろん、最後のページが表示されたら「進む」ボタンは非表示。
最初のページが表示されたら「戻る」ボタンは非表示となります。
レビュー総数が１ページ当たりのレビュー数より少ない場合は「進む」「戻る」ボタンは表示させません。

また、以下の構造化データーも自動生成させています。

<!-- 構造化データー・商品レビュー -->
<div itemtype="https://schema.org/Product" itemscope>
	<meta itemprop="name" content="sku" />
	<meta itemprop="description" content="productdiscription" />
	<div itemprop="aggregateRating" itemtype="https://schema.org/AggregateRating" itemscope>
	  <meta itemprop="reviewCount" content="10" />
	  <meta itemprop="ratingValue" content="4.4" />
	</div>
</div>
<!-- 構造化データーここまで -->

コードの解説

それでは、コードの解説をします。

<form action="#review_list" method="post" class="review_control">
	<input type="hidden" name="page_number" value="<?= $page_number; ?>">
	<div class="review_page_control">
		<p class="review_page_count"><?= $review_starting_point; ?>～<?= $review_ending_point; ?>件（全<?= $review_number; ?>件）</p>
		<?php if($page_number > 1): ?>
		<div class="review_page_control_button">
			<button type="submit" name="page_move" value="2">＜＜戻る</button> 
		</div>
		<?php endif; ?>
		<?php if($page_number < $review_page_max): ?>
		<div class="review_page_control_button">
			<button type="submit" name="page_move" value="1">進む＞＞</button>
		</div>
		<?php endif; ?>
	</div>
</form>
<?php if(empty($posts)): ?>
<p class="coution">まだレビューは投稿されておりません。</p>
<?php else: ?>
<ul class="review-list">
	<?php 
		foreach($posts as $post):
			switch($post['point']){
				case '1';
            		$pointstar = '★☆☆☆☆';
            	break;
          		case '2';
            		$pointstar = '★★☆☆☆';
            	break;
          		case '3';
            		$pointstar = '★★★☆☆';
            	break;
          		case '4';
            		$pointstar = '★★★★☆';
            	break;
          		case '5';
            	$pointstar = '★★★★★';
			}
	?>
	<li class="review-item">
		<dl class="review-com">
			<div class="review-data">
   				<dt>投稿日:<?= $post['posttime']; ?></dt>
    			<dt>投稿者:<?= $post['name']; ?></dt>
	    		<dt >評価点:<?= $pointstar; ?></dt>
			</div>
			<dd class="review-text"><?= nl2br($post['review']); ?></dd>
		</dl>
		<?php if(!empty($post['reply'])): ?>
		<dl class="review-reply">
			<dt class="review-title">販売店から</dt>
			<dd><?= nl2br($post['reply']); ?></dd>
		</dl>
		<?php endif; ?>
	</li>
	<?php endforeach; ?>
</ul>
<?php endif; ?>
<!-- 構造化データー・商品レビュー -->
<div itemtype="https://schema.org/Product" itemscope>
	<meta itemprop="name" content="<?= $sku; ?>" />
	<meta itemprop="description" content="productdiscription" />
	<div itemprop="aggregateRating" itemtype="https://schema.org/AggregateRating" itemscope>
	  <meta itemprop="reviewCount" content="<?= $review_number; ?>" />
	  <meta itemprop="ratingValue" content="<?= $rev_avg; ?>" />
	</div>
</div>
<!-- 構造化データーここまで -->

以上がすべてのコードです。
次に、各部分ごとに解説をします。

<form action="#review_list" method="post" class="review_control">
	<input type="hidden" name="page_number" value="<?= $page_number; ?>">
	<div class="review_page_control">
		<p class="review_page_count"><?= $review_starting_point; ?>～<?= $review_ending_point; ?>件（全<?= $review_number; ?>件）</p>
		<?php if($page_number > 1): ?>
		<div class="review_page_control_button">
			<button type="submit" name="page_move" value="2">＜＜戻る</button> 
		</div>
		<?php endif; ?>
		<?php if($page_number < $review_page_max): ?>
		<div class="review_page_control_button">
			<button type="submit" name="page_move" value="1">進む＞＞</button>
		</div>
		<?php endif; ?>
	</div>
</form>

現在表示しているレビュー番号とレビュー総数、そしてページ送りボタンを表示させるコードです。
ページ送りボタンはformコードを使い、ボタンがクリックされるとそのボタンに対応した数値をpostで飛ばし、db_control.php部で表示させるページ数とレビュー番号を計算します。

表示ページ数に応じてif文でボタンの表示・非表示を行っています。

<?php if(empty($posts)): ?>
<p class="coution">まだレビューは投稿されておりません。</p>
<?php else: ?>

レビューデーターは配列変数posts内に格納されていますが、すべてのレビューデーターが格納されているわけではなく、表示されるデーターのみ抽出して格納しています。

もし、この商品のレビューがまだなかったら、postsは空になるので、if文を使いレビューがない旨表示させ、動作は終了します。

<ul class="review-list">
	<?php 
		foreach($posts as $post):

postsにデーターがあったら、以降のコードでレビューを表示させます。
foreach文を使い、posts内からレビューデータをひとつづつ読み出し表示。
posts内のデーターをすべて呼び出したら動作は終了となります。

switch($post['point']){
				case '1';
            		$pointstar = '★☆☆☆☆';
            	break;
          		case '2';
            		$pointstar = '★★☆☆☆';
            	break;
          		case '3';
            		$pointstar = '★★★☆☆';
            	break;
          		case '4';
            		$pointstar = '★★★★☆';
            	break;
          		case '5';
            	$pointstar = '★★★★★';
			}
	?>

最初にレビュー評価点を★マークに変換。
レビュー評価点は数値でデータ化されていますので、その数値に応じて変数pointstarに★マークを入れていきます。

<li class="review-item">
		<dl class="review-com">
			<div class="review-data">
   				<dt>投稿日:<?= $post['posttime']; ?></dt>
    			<dt>投稿者:<?= $post['name']; ?></dt>
	    		<dt >評価点:<?= $pointstar; ?></dt>
			</div>
			<dd class="review-text"><?= nl2br($post['review']); ?></dd>
		</dl>
		<?php if(!empty($post['reply'])): ?>
		<dl class="review-reply">
			<dt class="review-title">販売店から</dt>
			<dd><?= nl2br($post['reply']); ?></dd>
		</dl>
		<?php endif; ?>
	</li>
	<?php endforeach; ?>
</ul>
<?php endif; ?>

pointstarのほか、データーベースから読みだしたレビューデーターをliタグを使い表示させていきます。
これをposts内にデーターが無くなるまで繰り返します。

<!-- 構造化データー・商品レビュー -->
<div itemtype="https://schema.org/Product" itemscope>
	<meta itemprop="name" content="<?= $sku; ?>" />
	<meta itemprop="description" content="productdiscription" />
	<div itemprop="aggregateRating" itemtype="https://schema.org/AggregateRating" itemscope>
	  <meta itemprop="reviewCount" content="<?= $review_number; ?>" />
	  <meta itemprop="ratingValue" content="<?= $rev_avg; ?>" />
	</div>
</div>
<!-- 構造化データーここまで -->

最後に構造化データーの自動生成部となります。
db_control.phpで算出したレビュー総数review_numberとレビュー平均点rev_avgを表示させます。
この部分はコードは生成しますが、ページ上では表示しません。

db_input.php

次に、レビューデーター入力部の解説をします。

動作説明

名前、メールアドレス、評価点（満足度）、レビューを入力し「レビューを送信する」をクリックすると、データーをpost送信します。

コードの解説

<?php if(!empty($error) || !empty($success)): ?>
	<div class="form_comment">
	<?php if(!empty($error)): ?>
		<p class="error">エラー</p>
		<p><?= $error; ?></p>
	<?php else: ?>
	   	<p><?= $success; ?></p>
	<?php endif; ?>
	</div>
<?php endif; ?>
<form action="#review_input" method="post" class="review_form">
	<table class="review__form_table">
        <tr>
      		<td class="label"><label>お名前</label></td>
       		<td><input type="text" name="name" value="<?= $name; ?>"></td>
		</tr>
 		<tr>
    		<td class="label"><label>メールアドレス</label></td>
    		<td><input type="email" name="email" value="<?= $email; ?>"></td>
        </tr>
      	<tr>
        	<td class="label"><label>満足度</label></td>
        	<td>
				<ul class="review__radio">
					<?php $checed = 'checked'; ?>
           			<li><input type="radio" name="review_point" value="1" <? if($review_point === '1'){echo $checed;} ?>>★☆☆☆☆</li>
           			<li><input type="radio" name="review_point" value="2" <? if($review_point === '2'){echo $checed;} ?>>★★☆☆☆</li>
           			<li><input type="radio" name="review_point" value="3" <? if($review_point === '3'){echo $checed;} ?>>★★★☆☆</li>
           			<li><input type="radio" name="review_point" value="4" <? if($review_point === '4'){echo $checed;} ?>>★★★★☆</li>
           			<li><input type="radio" name="review_point" value="5" <? if($review_point === '5'){echo $checed;} ?>>★★★★★</li>
        		</ul>
        	</td>
      	</tr>
      	<tr>
            <td class="label"><label>レビュー</label></td>
        	<td><textarea name="review" rows="8" cols="80" ><?= $review; ?></textarea><br><p>レビューは1000文字以内でお願いします</p></td>
      	</tr>
   	</table>
   	<p class="review_button"><input type="submit" name="submit" value="レビューを送信する"></p>
</form>

こちらがコードになります。
各部の解説をします。

<?php if(!empty($error) || !empty($success)): ?>
	<div class="form_comment">
	<?php if(!empty($error)): ?>
		<p class="error">エラー</p>
		<p><?= $error; ?></p>
	<?php else: ?>
	   	<p><?= $success; ?></p>
	<?php endif; ?>
	</div>
<?php endif; ?>

送信したレビューデーターに空白があると、変数errorにエラーメッセージが入ります。
データーに問題がなく、データベースにデーターが格納されると変数successに完了メッセージが入ります。
このエラーメッセージか完了メッセージを表示させる部分です。

<form action="#review_input" method="post" class="review_form">
	<table class="review__form_table">
        <tr>
      		<td class="label"><label>お名前</label></td>
       		<td><input type="text" name="name" value="<?= $name; ?>"></td>
		</tr>
 		<tr>
    		<td class="label"><label>メールアドレス</label></td>
    		<td><input type="email" name="email" value="<?= $email; ?>"></td>
        </tr>
      	<tr>
        	<td class="label"><label>満足度</label></td>
        	<td>
				<ul class="review__radio">
					<?php $checed = 'checked'; ?>
           			<li><input type="radio" name="review_point" value="1" <? if($review_point === '1'){echo $checed;} ?>>★☆☆☆☆</li>
           			<li><input type="radio" name="review_point" value="2" <? if($review_point === '2'){echo $checed;} ?>>★★☆☆☆</li>
           			<li><input type="radio" name="review_point" value="3" <? if($review_point === '3'){echo $checed;} ?>>★★★☆☆</li>
           			<li><input type="radio" name="review_point" value="4" <? if($review_point === '4'){echo $checed;} ?>>★★★★☆</li>
           			<li><input type="radio" name="review_point" value="5" <? if($review_point === '5'){echo $checed;} ?>>★★★★★</li>
        		</ul>
        	</td>
      	</tr>
      	<tr>
            <td class="label"><label>レビュー</label></td>
        	<td><textarea name="review" rows="8" cols="80" ><?= $review; ?></textarea><br><p>レビューは1000文字以内でお願いします</p></td>
      	</tr>
   	</table>
   	<p class="review_button"><input type="submit" name="submit" value="レビューを送信する"></p>
</form>

formタグを使い、レビューデーターを入力、post送信します。

フロントエンド部の制御コードの解説は以上です。
とりあえず、これでレビュー管理は動きますが、スパムの削除やレビューの修正などバックエンド部（管理画面）も必要ですので、次回からはこのバックエンド部について解説します。

この記事が気に入ったらサポートをしてみませんか？