前回、投稿機能ができたので今回は、投稿された記事を一覧表示する機能を作ってみる。
前回は、typeを指定しなかった時のメイン画面が投稿画面だったので、その画面をNewEditとし、メイン画面を今回作成する表示画面とする。
メイン画面のイメージは右のような感じにする予定だ。
まずは、DairyNone.phpをDiaryNewEdit.phpとし、クラス名もDiaryNoneからDiaryNewEditと変更する。
次に、今回作成するメインページを作成するために新しくDiaryNone.phpを作成し、DiaryNoneクラスを実装する。
<?php
//ＵＮＩＣＯＤＥ
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"]); ?>
<p>続きを読む</p>
</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行目に が付いているのは、これを付けないとなぜかdivの中の背景色がきちんと下まで塗りつぶされなかったから。
ここまでの実装で、一覧の表示、新規投稿ができるようになった。
シリーズ：
PHPで日記システムを作ってみる1
「PHPで日記システムを作ってみる2」への1件のフィードバック