Portfolio作成 ② 記事一覧と記事ページ編
管理者
目的
今回の作業目的は以下です。
- index.php ファイル作成
- PHPコード記述
- ファイル保存
- ブラウザで /portfolio アクセス確認
- PHP実行確認
1-1 index.php ファイル作成
Portfolio作成 ①にて /portfolio アクセス確認 の際に適当に作成したとお伝えしたこのページは
ファイル管理内の
/自分のドメイン/public_html/portfolio/index.php
へ記述したページです。
しかし、開発においてすべて index.php へ記述するのは健全ではありません。
なので、 /portfolio/ に index.php を含め、以下を作成します。
portfolio/
├── index.php
├── header.php
├── footer.php
├── style.css
目標
WordPressテーマのように共通部分を分離する。
作成完了！
1-2 PHPコード記述
順を追って、確認していくために一旦 index.php の中身を真っ新にして
index.php
<?php include 'header.php'; ?>
<h2>記事一覧</h2>
<?php include 'footer.php'; ?>header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>キミマチラボCMS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>キミマチラボCMS</h1>
</header>footer.php
<footer>
<p>© KimimachiLab</p>
</footer>
</body>
</html>それぞれ表示されているか確認
問題なく、認識されていますね。
1-3 さらにファイル分割
学習という面では、再現することを優先してこのまま書き込んでいくのも、まず慣れるという意味で問題ないと思います。
ですが、現実的な環境構築として「データ」と「表示」を分ける考え方 を学ぶのが重要です。
WordPressを再現する学習としては、早い段階で分離してみましょう。
portfolio/
├── index.php
├── post.php
├── header.php
├── footer.php
├── style.css
└── data/
└── posts.php「post.php」ファイル と「data」フォルダ を作成
「data」フォルダ配下に「posts.php」ファイルを作成
data/posts.php → データ置き場（データ）
index.php → 一覧表示（表示）
post.php → 詳細表示（表示）
さらに将来的に
data/posts.php → MySQL（データ）
へ置き換えるだけで済みます。
実際のWordPressでも、
MySQL
↓
PHP配列
↓
画面表示
という流れで動いています。
1-4 ディレクトリに合わせたコード記述
data/posts.php
<?php
$posts = [
[
'id' => 1,
'title' => '最初の記事',
'content' => 'CMS開発開始'
],
[
'id' => 2,
'title' => 'PHP学習',
'content' => '配列を使ってみる'
]
];index.php
<?php
include 'data/posts.php';
include 'header.php';
?>
<h2>記事一覧</h2>
<?php foreach($posts as $post): ?>
<h3>
<?php echo $post['title']; ?>
</h3>
<?php endforeach; ?>
<?php include 'footer.php'; ?>これを記述することで
おぉ！
記事一覧（index.php）に「data/posts.php」へ書き込んだ記事タイトルが認識されていますね。
記事詳細ページ（post.php）
次は 記事詳細ページ（post.php）です。
目指す形は、一覧の記事タイトルをクリックすると、記事詳細ページへ遷移して、
記事タイトル
記事本文
を表示する状態です。
index.php修正
<h3><?php echo $post['title']; ?></h3>この部分を
<h3>
<a href="post.php?id=<?php echo $post['id']; ?>">
<?php echo $post['title']; ?>
</a>
</h3>に変更。
post.php
<?php
include 'data/posts.php';
?>を記述。
そこへ、URLのID取得のため
$id = $_GET['id'];を追加して
<?php
include 'data/posts.php';
$id = $_GET['id'];
?>の形へ。
URLのID取得について認識を共有すると
kimimachilab.com/portfolio/post.php?id=2
というURLなら$idには2が入ります。
data/posts.php
<?php
$posts = [
[
'id' => 1,
'title' => '最初の記事',
'content' => 'CMS開発開始'
],
[
'id' => 2,
'title' => 'PHP学習',
'content' => '配列を使ってみる'
]
];へ記述している通り、id=2を指定すれば、
PHP学習
配列を使ってみる
が表示されるということです。
さらに、対象記事を探す
$targetPost = null;
foreach ($posts as $post) {
if ($post['id'] == $id) {
$targetPost = $post;
break;
}
}も追加で記述。
<?php
include 'data/posts.php';
$id = $_GET['id'] ?? null;
$targetPost = null;
foreach ($posts as $post) {
if ($post['id'] == $id) {
$targetPost = $post;
break;
}
}の形へ。
さらにさらに、記事詳細ページ（post.php）の表示指定を追加して
<?php include 'header.php'; ?>
<h2><?php echo $targetPost['title']; ?></h2>
<p>
<?php echo $targetPost['content']; ?>
</p>
<?php include 'footer.php'; ?>post.php（完成版）
<?php
include 'data/posts.php';
$id = $_GET['id'] ?? null;
$targetPost = null;
foreach ($posts as $post) {
if ($post['id'] == $id) {
$targetPost = $post;
break;
}
}
?>
<?php include 'header.php'; ?>
<h2><?php echo $targetPost['title']; ?></h2>
<p>
<?php echo $targetPost['content']; ?>
</p>
<?php include 'footer.php'; ?>段階を経て、盛っていきましたが一旦の形になったのでは？ 確認♪確認♪
おー！
リンク化されてるー！
それぞれクリックしてみると・・・
きちんと、記事詳細ページ（post.php）が表示され、指定されている記事タイトルや記事本文（data/posts.php）が読み込まれています！
補足
途中でサラッと
$id = $_GET['id'];から
$id = $_GET['id'] ?? null;へ書き換えられていますが、これは安全上の処置です。
もし、データ（data/posts.php）で指定されていないidへアクセスした場合、もちろん$_GET['id']は存在しません。
その場合
Undefined array key "id"
（未定義の配列キー「id」）というエラーが出ることがあります。
そこで、
$id = $_GET['id'] ?? null;と書くと
?id=1→$id = 1?id=2→$id = 2?idが無い →$id = null
となり、未定義ではなくなるので安全です。
最後に
ここまで読んでいただき、ありがとうございます。
まだまだ、サイトの体を成していない段階ですが、構造として形になっていっている感覚があり、とてもワクワクしますね。
現段階は、記事一覧と記事ページができた状態です。
次は、管理画面の作成です。
CMS ＝ 管理画面でデータを管理するシステム なので、ここからより本質へ進んでいきます。
次回の記事も、よろしくお願いいたします。
