前回、投稿機能ができたので今回は、投稿された記事を一覧表示する機能を作ってみる。
前回は、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"]); ?> <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件のフィードバック