nicepaper @ ウィキ
nicepaper @ ウィキ

前回記事PHPとMySQLを使いGETメソッドで受け取ったデータを取得＆表示の続きです。新規投稿ページできたぁと思っても、その記事を再編集できなければ、利用者は極めてビクビクしながら、新規投稿しなけれびなりません。人間はミスする生き物ですから、再編集機能も設ける必要があります。今回はそれを作っていきます。6月5日記事




編集ページ取得イメージ

こんな感じにしましょうか？もっと見る的のローディング機能を作るか、次ページ、前ページというようにページング機能を作るか迷いました。どっちをやってもいいのですが、やはりページング機能から実装していきます。ローディング機能に関してはまた後日行っていきたいと思います。

イメージは以下。



まずは、[最新のページ一覧]、[過去のページ一覧]的なリンクを作っていきます。

書いてみる

クエリの条件

削除以外の状態のページ、「公開」と「下書き」のページを取得していく必要があります。 ５件分取得し（あとでも取得件数を変えられるようにしておく）。

ページング機能

個人的には、もっと見るもっと読むボタン（ローディング）より、次へや前へのボタン（ページング）の方が好きです。ページング機能から行っていきます。

概要

まず、GETメソッドで受け取った変数をフィルターします。

  1. 1ページあたりの表示件数を設定する。
  2. ページ数を取得する
  3. もし、ページ数を取得していない状態なら、1ページ目とする
  4. 総件数を取得する。
  5. 初めて呼ばれたときには総件数を数え、ページ数を１にする
  6. 総件数を1ページあたりの表示数で割り、小数点を切り上げた整数値にする。
  7. ページサイズ×ページ-1からページサイズ×ページまでのデータを取得する
  8. 表示する。
  9. フォームで自身のファイルに－１や＋１するページ数を投げる。

    というようにやっていきますが、PDOで総件数を取得するのがあいまいらしい。PDOではrowCount() という関数が使えるが、色々な情報を見ると正しい行数を返すかはあやしいらしい・・・・。 なんでやｗ結構使う関数だと思うのに。ということで調査が必要です。
    ・
    ・
    ・
    調べました。
    "SELECT COUNT(*) FROM テーブル名 WHERE status = '1' OR status = '2'";
    と
    fetchColumn();
    を使い、取得していきたいと思います。


コードを書いていきます。

ページング機能のコード 

<?php
require('config.php');

$dsn = 'mysql:dbname='.DB_NAME.';host='.DB_HOST.';port='.DB_PORT.'';
$user = DB_USER;
$password = DB_PASSWORD;

try{
	$dbh = new PDO($dsn, $user, $password);
}catch (PDOException $e){
	print('Connection failed:'.$e->getMessage());
	die();
}

		$pagesize = 5;//1ページあたりの表示件数
		if(isset($_GET["page"])) $page = filter_var($_GET["page"],FILTER_SANITIZE_NUMBER_INT,FILTER_NULL_ON_FAILURE);
		if(empty($_GET["page"])) $page = 1;
		if($page == NULL) $page = 1; 
		
		
		$offset = $pagesize*($page -1);
		$sql = "SELECT * FROM テーブル名 WHERE status = '1' OR status = '2' ORDER BY id DESC LIMIT ".$offset.",".$pagesize;
		//print $sql;
		
		$news = array();
		
		foreach ($dbh->query($sql) as $row){
			array_push($news, $row);
		}
		//トータル件数取得
		$sql = "SELECT COUNT(*) FROM テーブル名 WHERE status = '1' OR status = '2'";		
		$stmt = $dbh->query($sql);
		$total = $stmt->fetchColumn();
		//print $sql;
		
		$totalpage = ceil($total/$pagesize);	
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link href="reset.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">

<title>タイトルcontents Manager</title>
</head>

<body>
<div id="page">
    <div id="head">
    <header>
    	<h1>CONTENTS MANAGER</h1>
    </header>
    </div>
    <div id="container">
        <div id="menu">
        	<nav>
            <li id="current"><a href="setting.php">新規作成</a></li>
            <li><a href="editlist.php">編集</a></li>
            <li><a href="http://www.hoge.net">サイトトップへ</a></li>
            <li><a href="javascript:;" onclick="window.close();">ウインドウを閉じる</a></li>
            </nav>
        </div>
        <div id="contents">
        <!-- ここから　-->
	<section id="edit_list">
        <h1>投稿一覧</h1> 		
        <dl>
        	<dt id="dthead">ID</dt>
            <dd id="ddhead">
            	<ul>
                	<li class="date">公開(予定)日付</li><li class="title">タイトル</li><li class="status">状態</li><li class="edit">編集</li><li class="delete">削除</li>
                </ul>
            </dd>
        	<?php foreach($news as $new): ?>
            <dt><?php echo htmlspecialchars($new['id'],ENT_QUOTES,"UTF-8"); ?></dt>
            <dd>
            	<ul>
                	<li class="date"><?php echo htmlspecialchars($new['info_date'],ENT_QUOTES,"UTF-8"); ?></li>
                    <li class="title"><?php echo htmlspecialchars(mb_convert_encoding($new['title'],"UTF-8","EUC-JP"),ENT_QUOTES,"UTF-8"); ?></li>
                    <li class="status"><?php 
					switch($new['status']){
						case 2:
							echo "公開";
							break;
						case 1:
							echo "下書き";
							break;
						default:
							echo "削除";
							break;
					}?></li>
                    <li class="edit"><form action="edit.php" method="post"><input type="hidden" name="id" value="<?php echo htmlspecialchars($new['id'],ENT_QUOTES,"UTF-8"); ?>"><input type="submit" name="submit" value="編集"></form></li><li class="delete"><form action="delete.php" method="post"><input type="hidden" name="id" value="<?php echo htmlspecialchars($new['id'],ENT_QUOTES,"UTF-8"); ?>"><input type="submit" name="submit" value="削除"></form></li>
                </ul>
            </dd>
            <?php endforeach; ?>
        	<!--ループ-->         
        </dl>
        <?php
        if($page >= 2){
            echo '<a href="editlist.php?page='.($page-1).'">[最新ページへ]</a>';
        }else{
            echo '[最新ページ]';
        }
        if($page < $totalpage){
            echo '<a href="editlist.php?page='.($page+1).'">[過去のページへ]</a>';
        
        }
        ?>
		</section>
        <!-- ここまで-->
        </div>
    </div>
    <footer>
    <p>フッター</p>
    </footer>
</div>

<br>
<br>
</body>
</html>

CSS部 

section#form dl{
	margin-top: 30px;
}
section#form dl dt{
	width: 180px;
	float:left;
	clear:both;
	padding: 10px;
	border-top: 2px solid #EEE;
}
section#form dl dd{
	width: 400px;
	float:left;
	padding: 10px;
	border-top: 2px solid #EEE;
}
section#edit_list dl{
	margin-top: 30px;
	min-height: 300px;
/*	background: #FFC;*/
}
section#edit_list dl dt{
	width: 30px;
	float:left;
	clear:both;
	padding: 5px;
	border-bottom: 2px dotted #EEE;
}
section#edit_list dl dd{
	float:left;
	border-bottom: 2px dotted #EEE;

}
section#edit_list dl dt#dthead,section#edit_list dl dd#ddhead{
	border-top: 2px solid #EEE;
	border-bottom: 2px solid #EEE;
}
section#edit_list dl dd ul{
	width: 640px;
}
section#edit_list dl dd li{
	display:inline-block;
	height:16.5px;
	float:left;
	padding: 5px;
}
section#edit_list dl dd li.date{
	width: 120px;
}
section#edit_list dl dd li.title{
	width: 320px;
}
section#edit_list dl dd li.status{
	width: 50px;
}
section#edit_list dl dd li.edit{
	width: 50px;
}
section#edit_list dl dd li.delete{
	width: 50px;
}



まとめ

ユーザが見るページと似たように見えますが、公開日が新しい順にソートするのではなく、ID順にソートしていくクエリを投げれば行けると思います。

以上

「PHPとMySQLを使って更新情報の再編集ページを作る」をウィキ内検索
最終更新：2015年07月30日 17:50
添付ファイル