Portfolio作成 ⑥ 管理画面 - 記事一覧画面編
管理者
目標
管理画面での記事一覧画面の作成
この画面から記事の編集や削除へ繋がっていく予定の画面です。
記事一覧画面のファイル作成
/独自ドメイン/public_html/portfolio/admin
へ移動。
そこへ記事一覧画面（posts.php）ファイルを作成
記事一覧画面（posts.php）ファイルへ書き込んでいきます。
記事一覧画面の作成
/独自ドメイン/public_html/portfolio/admin/posts.php
記事一覧画面（posts.php）
<?php
// データベース接続ファイル（database.php）を読み込む
// require_once は同じファイルの重複読み込みを防ぐ
// ファイルが見つからない場合はエラーで処理を停止する
require_once '../config/database.php';
// SQLを実行する
// postsテーブルの全記事を取得し、
// idの降順（新しい記事が上）で並べる
$stmt = $pdo->query("
SELECT *
FROM posts
ORDER BY id DESC
");
// 取得した記事データをすべて配列として取得する
$posts = $stmt->fetchAll();
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- ブラウザのタイトル -->
<title>記事一覧</title>
</head>
<body>
<!-- ページ見出し -->
<h1>記事一覧</h1>
<p>
<!-- 新規投稿ページへのリンク -->
<a href="new-post.php">新規投稿</a>
</p>
<!-- 記事一覧を表示するテーブル -->
<table border="1" cellpadding="10">
<tr>
<!-- テーブルの見出し -->
<th>ID</th>
<th>タイトル</th>
<th>投稿日</th>
</tr>
<?php
// 記事データを1件ずつ取り出して表示する
foreach ($posts as $post):
?>
<tr>
<!-- 記事IDを表示 -->
<td><?= $post['id'] ?></td>
<td>
<?php
// 記事タイトルを表示
// htmlspecialchars()でHTMLタグを無効化し、
// XSS（クロスサイトスクリプティング）を防ぐ
?>
<?= htmlspecialchars($post['title'], ENT_QUOTES, 'UTF-8') ?>
</td>
<!-- 投稿日時を表示 -->
<td><?= $post['created_at'] ?></td>
</tr>
<?php endforeach; ?>
<!-- foreachループ終了 -->
</table>
</body>
</html>/独自ドメイン/public_html/portfolio/admin/index.php
管理画面トップ（index.php） へ、記事一覧画面（posts.php）へのリンク追加
<?php include '../header.php'; ?>
<h2>管理画面</h2>
<p>キミマチラボCMS 管理画面</p>
<ul>
<li><a href="new-post.php">新規投稿</a></li>
<li><a href="posts.php">記事一覧</a></li>
</ul>
<?php include '../footer.php'; ?>動作確認 記事一覧画面（posts.php）
https://kimimachilab.com/portfolio/admin/posts.php
へアクセスして、ログイン。 または
https://kimimachilab.com/portfolio/admin/index.php
に作成したリンクから記事一覧画面（posts.php）へ遷移。
今回は管理画面トップ（index.php）から遷移して確認してみます。
記事一覧画面へ遷移するためのリンクは反映されていますね。
では、「記事一覧」ボタンを押してみます。
OK！想定通りの表示。
ここで記述した内容が表示されていますし、MySQLからきちんとデータも持ってこれていますね。
さらに！！動作確認 記事一覧画面（posts.php）
念のため複数の記事の場合も確認したいと思ったので、システムの流れに沿って動作確認をしてみます。
スタートは新規投稿画面（new-post.php）から
https://kimimachilab.com/portfolio/admin/new-post.php
へアクセス。
タイトル「OGP・Xカード表示テスト記事①」
本文
「このページはOGPおよびXカードの表示確認を目的としたテスト記事です。
確認項目
・アイキャッチ画像の表示
・タイトルの表示
・説明文の表示
・URLプレビューの表示
正常に設定されている場合は、SNS投稿時にアイキャッチ画像付きのカードが表示されます。」
投稿。
タイトル「SNSシェア動作確認用テスト記事②」
本文
「本記事はSNSシェア機能の動作確認用に作成したテストページです。
チェック内容
・X（旧Twitter）でのカード表示
・OGP画像の取得
・説明文の反映
・URL共有時の表示確認
問題なく設定されていれば、シェア時にアイキャッチ画像が表示されます。」
投稿。
これで MySQL に保存されたはずなので確認しに行きます。
https://kimimachilab.com/portfolio/admin/posts.php
へアクセス。
よしよしよしよし！！
自分の手で、記事投稿・MySQLに保存・記事一覧に表示までできていることに感動も一入！
もちろん記事を閲覧する表側の画面にも反映されています。
記事一覧画面（portfolio）
記事詳細画面（post.php?id=2）
最後に
ここまで読んでいただき、ありがとうございます。
CMS（コンテンツ管理システム）としての機能をやっと実感を持って実装できました。
開発の業務はもちろんすべての流れを一手に担えるエンジニアが強いですが、実際の業務は細かく担当し構築していきます。
今回の学びも少しずつ積み重ねで、コンテンツの投稿・DBへの保存・保存されたコンテンツを呼び出して表示のシステムを自分で構築できるようになったという実感は自信になりました。
まだまだWordPressで構築しなければいけない機能はたくさんありますが、根幹の機能構築ができますと求められた場面で言えるようになったことを嬉しく思います。
