PHPでフレームワークを使わずに掲示板アプリを作ってみる⑤ 掲示板の画面作成

はじめに

※自身の学習を記事に投稿することでアウトプットするのが目的です。
「よくわかるPHPの教科書」のchapter6に書いてある通りにアプリを
作成していくので、私と同じような駆け出しエンジニアの皆さんは、
書籍を買ってアプリを作っていただいた方がわかりやすいかもしれません。

使用しているエディタ、実行環境

• VS Code

• XAMPP

• PHP7

• windows

掲示板の画面を作成していく。

<?php
session_start();
require('dbconnect.php');;

if ( isset( $_SESSION[ 'id' ] ) && $_SESSION[ 'time' ] + 3600 > time() ) {　
	//ログインしている
	$_SESSION[ 'time' ] = time();

	$members = $db -> prepare( 'SELECT * FROM members WHERE id=?' );
	$members -> execute( array($_SESSION[ 'id' ]) );
	$member = $members -> fetch();
} else {
	//ログインしていない
	header( 'Location: login.php' ); exit();
}

//投稿を記録する
if ( !empty( $_POST )) {
	if ( $_POST[ 'message' ] !='') {
		$message = $db -> prepare( 'INSERT INTO posts SET member_id=?, message=?, created=NOW() ') ;
		$message -> execute( array(
			$member[ 'id' ] ,
			$_POST[ 'message' ]
		));
		header( 'Location: index.php'); exit();
	}
}

//投稿を取得する
$posts = $db -> query( 'SELECT m.name, m.picture, p.* FROM members m, posts p 
WHERE m.id=p.member_id ORDER BY created DESC');


?>

//投稿内容の表示
<form action="" method="post">
	<dl>
		<dt><?php echo htmlspecialchars( $member[ 'name' ] , ENT_QUOTES);?>さん、メッセージをどうぞ</dt>
		<dd>
			<textarea name="message" cols="50" rows="5" ></textarea>
        </dd>
    </dl>
	<div>
		<input type="submit" value="投稿する" />
    </div>

</form>
<?php
foreach ($posts as $post):?>

<div class="msg">
<img src="member_picture/<?php echo htmlspecialchars( $post[ 'picture' ] ,ENT_QUOTES);?>" width="48" height="48" alt="makoto" />
<p><?php echo htmlspecialchars( $post[ 'message' ], ENT_QUOTES);?> <span class="name"><?php echo htmlspecialchars( $post[ 'name' ],ENT_QUOTES);?> </span></p>
<p class="day"><?php echo htmlspecialchars( $post[ 'created' ],ENT_QUOTES); ?></p>
</div>
<?php endforeach; ?>

細かく見ていきましょう。

ログイン状態の記録

if ( isset( $_SESSION[ 'id' ] ) && $_SESSION[ 'time' ] + 3600 > time() ) {　
	//ログインしている
	$_SESSION[ 'time' ] = time();

	$members = $db -> prepare( 'SELECT * FROM members WHERE id=?' );
	$members -> execute( array($_SESSION[ 'id' ]) );
	$member = $members -> fetch();
} else {
	//ログインしていない
	header( 'Location: login.php' ); exit();
}

isset関数で$_SESSION['id']に変数がセットされているか確認をしています。
また、time関数で取得したUNIX時間から一時間以内であることを確認できた場合、
ログイン状態を記録し、変数memberにSESSIONのidのDB情報を格納します。

投稿を記録する

//投稿を記録する
if ( !empty( $_POST )) {
	if ( $_POST[ 'message' ] !='') {
		$message = $db -> prepare( 'INSERT INTO posts SET member_id=?, message=?, created=NOW() ') ;
		$message -> execute( array(
			$member[ 'id' ] ,
			$_POST[ 'message' ]
		));
		header( 'Location: index.php'); exit();
	}
}

POSTメソッドが送信されて、
メッセージに内容が入っていた場合、$messageにDBからの情報を取得して格納します。

headerファンクションでindex.phpに遷移させています。これは、投稿の処理の重複を
防ぐための処理です。

表示画面

//投稿内容の表示
<form action="" method="post">
	<dl>
		<dt><?php echo htmlspecialchars( $member[ 'name' ] , ENT_QUOTES);?>さん、メッセージをどうぞ</dt>
		<dd>
			<textarea name="message" cols="50" rows="5" ></textarea>
        </dd>
    </dl>
	<div>
		<input type="submit" value="投稿する" />
    </div>

</form>
<?php
foreach ($posts as $post):?>

<div class="msg">
<img src="member_picture/<?php echo htmlspecialchars( $post[ 'picture' ] ,ENT_QUOTES);?>" width="48" height="48" alt="makoto" />
<p><?php echo htmlspecialchars( $post[ 'message' ], ENT_QUOTES);?> <span class="name"><?php echo htmlspecialchars( $post[ 'name' ],ENT_QUOTES);?> </span></p>
<p class="day"><?php echo htmlspecialchars( $post[ 'created' ],ENT_QUOTES); ?></p>
</div>
<?php endforeach; ?>

DBから取得したデータを格納した、変数postsと、繰り返し文を使って
画面表示していきます。

終わりに

セッションによるログイン状態の記録で、タイム関数を使ってログイン状態の保存期間を
設定できることは良い気付きでした。