PHPで日記システムを作ってみる2

メインページのレイアウトイメージ

前回、投稿機能ができたので今回は、投稿された記事を一覧表示する機能を作ってみる。
前回は、typeを指定しなかった時のメイン画面が投稿画面だったので、その画面をNewEditとし、メイン画面を今回作成する表示画面とする。
メイン画面のイメージは右のような感じにする予定だ。

まずは、DairyNone.phpをDiaryNewEdit.phpとし、クラス名もDiaryNoneからDiaryNewEditと変更する。

次に、今回作成するメインページを作成するために新しくDiaryNone.phpを作成し、DiaryNoneクラスを実装する。

<?php
//UNICODE

require_once('./Diary.php');

class DiaryNone extends Diary
{
	const ELEMENT_BODY_LENGTH = 255;	///< 日記本文になん文字表示するか

	protected function exec()
	{
?>

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" href="css/None.css" type="text/css" />
  <title>日記</title>
 </head>

 <body>
  <a href="" onclick="document.form1.submit(); return false;">新規作成</a><br />
  <form name="form1" method="POST" action="./">
   <input type="hidden" name="type" value="NewEdit">
  </form>

  <div class="leftSide">
   <?php $this->ShowElement(); ?>
  </div>

  <div class="rightSide">
   <div class="recent">
    最近の更新
   </div>
   <div class="calendar">
    カレンダー
   </div>
  </div>
 </body>
</html>
<?php
	}

	/// 日記の本体部分を表示する
	protected function ShowElement()
	{
		$sql = "select title, date, left(body, " . $this::ELEMENT_BODY_LENGTH . ") as body from diary order by date desc, title asc;";
		$this->ConnectDB();
		$result = $this->db->query($sql);

		if($result === FALSE) {
			echo ("db access error<br>\n");
			print_r($this->db->errorInfo());
			return;
		}

		foreach($result as $row) {
?>
   <div class="element">
    <div class="title">
     <?php echo($row["title"]); ?>
    </div>
    <div class="date">
     <?php echo($row["date"]); ?>
    </div>
    <div class="body">
     <?php echo($row["body"]); ?>&nbsp;
     <p>続きを読む</p>&nbsp;
    </div>
   </div>
<?php
		}
   }
}

2行目のコメントは、自分が使っているテキストエディタでこれがないと、S-JIS扱いになってしまい文字化けしたので、コメントで適当に全角文字を入れておいた。

14行目からは40行目まではHTMLの表記。
22行目から25行目までで、新規投稿画面に行けうるようにポスト送信でリンクを張っている。

28行目では、今回のメインとなる一覧表示機能の呼び出しをPHPで実行している。
47行目のSQLではタイトル、日付、本文の先頭数文字を日付、タイトルでソートしたものを取得している。
DBの初期化処理はDiaryクラスで実装した。DB接続クラスはDiaryクラスがprotectedで持っているので、それにアクセスしてSQLを実行する。
57行目から70行目で取得したデータの表示処理を行なっている。
67,68行目に&nbsp;が付いているのは、これを付けないとなぜかdivの中の背景色がきちんと下まで塗りつぶされなかったから。

ここまでの実装で、一覧の表示、新規投稿ができるようになった。

シリーズ:
PHPで日記システムを作ってみる1

「PHPで日記システムを作ってみる2」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください