管理画面のHTMLを作成

更新:2017/01/02

ここまでの実習では、ホームページを訪れた閲覧者向けのページを開発してきました。
しかし、ブログの運営に関しては、記事を投稿する管理画面が必要です。
そこでこのページでは、記事の管理画面を作成するために必要な、ベースとなるHTMLの準備について説明します。

実際のWebアプリケーションの開発工程は、
「画面遷移の設計」→「画面仕様の設計」→「画面HTMLの制作」→「プログラミング」
と進んでいきます。
今回はそれほど複雑なアプリケーションではないので、「画面HTMLの制作」からはじめます。

完成した管理画面のイメージ

当ページの工程を完了すると、以下のような管理画面が完成します。
あまり格好よくありませんが、いきなり凝りすぎると大事なことがわからなくなってしまいますので、まずはこれで我慢してください。

管理画面ログイン

管理画面トップページ

記事管理画面

記事編集画面

管理画面用のファイルを作成

以下のファイルを作成していってください。
(文字コードはくれぐれもutf-8にしてください)

system以下への追加

管理画面からの処理を切り分けるため、common_admin.phpを経由してcommon.phpを呼び出します。今後、ここに認証ロジックなどを記載します。
そこでまず、以下をsystemの中に作成してください。

system/common_admin.php
<?php
// 関連ファイルをロード
require_once "common.php";

管理画面で共通利用するプログラム

ルートディレクトリ(一番根元の階層)に「admin」というディレクトリを作成してください。
admin以下に、下記のファイルを作成していきます。

共通ヘッダ

admin/header.php
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title><?=$page_title?> | 管理画面</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1><?=$page_title?></h1>

共通フッタ

admin/footer.php
    <hr>
    <a href="./">トップへ戻る</a>
  </body>
</html>

スタイルシート

admin/style.css
body{
  padding: 10px;
}
h1{
  border-bottom: 2px solid #333333;
  margin-top: 0;
  margin-bottom: 20px;
}
.attention{
  color: red;
}

管理画面の個別ページ

管理画面ログイン

admin/login.php
<?php require_once "../system/common_admin.php";?>
<?php $page_title = "ログイン";?>
<?php require "header.php";?>
    <form action="login.php" method="post">
      <div>
        ログインID<br>
        <input type="text" name="user_loginid" size="30" value="">
      </div>
      <div>
        パスワード<br>
        <input type="password" name="user_password" size="30" value="">
      </div>
      <div>
        <input type="submit" name="send" value="ログインする">
      </div>
    </form>
<?php require "footer.php";?>

管理画面トップページ

admin/index.php
<?php require_once "../system/common_admin.php";?>
<?php $page_title = "トップページ";?>
<?php require "header.php";?>
    <ul>
      <li>
        <a href="post_list.php">記事管理</a>
      </li>
    </ul>
<?php require "footer.php";?>

記事管理

admin/index.php
<?php require_once "../system/common_admin.php";?>
<?php $page_title = "記事管理";?>
<?php require "header.php";?>
    <a href="post_edit.php">記事を追加する</a>
    <hr>
    <table border="1" width="100%">
      <tr>
        <th></th>
        <th>タイトル</th>
        <th>本文</th>
        <th>更新日時</th>
        <th>作成日時</th>
        <th></th>
      </tr>
      <tr>
        <td><a href="post_edit.php?mode=change">編集</a></td>
        <td>記事タイトル(ダミー)</td>
        <td>記事本文(ダミー)</td>
        <td>2000-01-01 00:00:00</td>
        <td>2000-01-01 00:00:00</td>
        <td><a href="post_edit.php?mode=delete">削除</a></td>
      </tr>
      <tr>
        <td><a href="post_edit.php?mode=change">編集</a></td>
        <td>記事タイトル(ダミー)</td>
        <td>記事本文(ダミー)</td>
        <td>2000-01-01 00:00:00</td>
        <td>2000-01-01 00:00:00</td>
        <td><a href="post_edit.php?mode=delete">削除</a></td>
      </tr>
    </table>
<?php require "footer.php";?>

記事編集

admin/index.php
<?php require_once "../system/common_admin.php";?>
<?php $page_title = "記事編集";?>
<?php require "header.php";?>
    <form action="post_edit.php" method="post">
      <div>
        記事タイトル <span class="attention">[必須]</span><br>
        <input type="text" name="post_title" size="30" value="">
      </div>
      <div>
        記事本文<br>
        <textarea name="post_content" rows="5" cols="20"></textarea>
      </div>
      <div>
        <input type="submit" name="send" value="送信する">
      </div>
    </form>
<?php require "footer.php";?>

作成後のディレクトリ

上記を作成すると、以下のような状態になります。

今回のコンテンツについては以下よりダウンロードできます。

step3-020.zip

このページをシェア Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn