目的

今回の作業目的は以下です。

• PHPコード記述
• PHP実行確認

今後、上記作業の繰り返しとなりますので、具体的には

管理画面の作成

を行っていきます。

フォルダ・ファイルの作成

現状のディレクトリ構成は

portfolio/
├── index.php
├── post.php
├── header.php
├── footer.php
├── style.css
└── data/
　 └── posts.php

となっています。

そこへ

フォルダ「admin」を作成し、

portfolio/
├── index.php
├── post.php
├── header.php
├── footer.php
├── style.css
├── data/
│ └── posts.php
└── admin/

フォルダ「admin」の中に、

ファイル

• index.php
• new-post.php

を作成していきます。

PHPコード記述

簡単なイメージを作成

index.php

<?php include '../header.php'; ?>

<h2>管理画面</h2>

<p>キミマチラボCMS 管理画面</p>

<ul>
    <li>
        <a href="new-post.php">
            新規投稿
        </a>
    </li>
</ul>

<?php include '../footer.php'; ?>

new-post.php

<?php include '../header.php'; ?>

<h2>新規投稿</h2>

<form>

    <p>タイトル</p>

    <input type="text">

    <p>本文</p>

    <textarea rows="10" cols="50"></textarea>

    <br><br>

    <button type="submit">
        投稿する
    </button>

</form>

<?php include '../footer.php'; ?>

動作確認

https://kimimachilab.com/portfolio/admin

へアクセス。

https://kimimachilab.com/portfolio/admin/new-post.php

へアクセス。

正しく表示されていることを確認。

フォーム送信（POST）機能　実装

ここは WordPress の

「投稿」ボタンを押す
↓
サーバーへ送信
↓
保存処理

の最初の再現です。

具体的には

入力した

• タイトル
• 本文

を送信し、

画面に表示する。

new-post.php

<?php include '../header.php'; ?>

<h2>新規投稿</h2>

<form method="post">

    <p>タイトル</p>

    <input
        type="text"
        name="title"
    >

    <p>本文</p>

    <textarea
        name="content"
        rows="10"
        cols="50"
    ></textarea>

    <br><br>

    <button type="submit">
        投稿する
    </button>

</form>

<?php

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    $title = $_POST['title'] ?? '';

    $content = $_POST['content'] ?? '';

    echo '<hr>';

    echo '<h3>送信結果</h3>';

    echo '<p>タイトル：' . htmlspecialchars($title) . '</p>';

    echo '<p>本文：' . nl2br(htmlspecialchars($content)) . '</p>';
}

?>

<?php include '../footer.php'; ?>

動作確認

https://kimimachilab.com/portfolio/admin/new-post.php

へアクセス。

タイトル「CMS開発日記」

本文「今日は投稿フォームを作った」

「投稿する」ボタンを押す。

正しく表示されていることを確認。

学びの整理

<form method="post">

フォーム送信。

$_POST['title']

入力値取得。

$_SERVER['REQUEST_METHOD']

送信されたか確認。

htmlspecialchars()

XSS対策として実務でも必須。HTML特殊文字をエスケープ（無害化）する関数。

単なる文字列として表示され、JavaScriptは実行されないようにする。

最後に

ここまで読んでいただき、ありがとうございます。

意図した動作をしてくれることを確認できました。

次は、記事一覧と記事ページの作成時に倣って、投稿内容を data/posts.php へ保存する流れの作成をしたいところですが、本来の構成に修正することを優先します。

つまり、

data/posts.php　→　MySQL　への移行

ここからは、「配列CMS」から「本物のCMS」への進化を目指していきます。

＼ 最新情報をチェック ／

@Kimimachilab