CMSを自作してオリジナル動的ホームページをフルスクラッチ開発してみよう！①CMSのログイン、ログアウト、トップページ画面の作成

2021年3月11日

今回より複数回に分けてhtml/css、javascript、PHP/MySQLを利用した「CMSと動的ホームページの完全自作」についてまとようと思います。

簡単に言えば、ワードプレス(CMS)と、テーマの双方を全て自作するような内容です。（もちろんワードプレスには及びませんが、、）

けっこうなボリュームがありますが、フロントからサーバーサイドまでの幅広い範囲で知識を得られるかと思いますので、少し大変かもしれませんがこれからプログラミングを勉強しようとしている方々の参考になれば幸いです。

※過去に、ここのブログにて「ECサイトのフルスクラッチ開発」をまとめているので、そちらの方を一通り進めてもらえれば、今回のCMS自作にとっかかりやすいかと思います。↓

ヘルニアクソ野郎エンジニアblog

PHPとMySQLでECサイトをフルスクラッチ開発！⑮カテゴリ別ページの作成、html/cssで...

https://denkenmusic.com/phpとmysqlでecサイトをフルスクラッチ開発！⑮カテゴリ

前回、ECサイトの商品購入決定画面を作成しました。↓　今回は、カテゴリ別ページの作成、html/cssでスタイリングしてECサイトを完成させたいと思います。星マークはすでに作成済みのページになります。雲マークの商品カテゴリページを、今回作成します。今商品のカテゴリは５つとしているので、５つのファイルを作成します。内容的にはデータベースのSELECTする部分が変わるだけですので、１つのカテゴリを抜粋して説明しようかと思います。商品カテゴリ別ページshop_list_book.php

はじめに、これから作成する「CMSと動的ホームページの完全自作」の完成形を載せておきます。前半がCMSで、後半がCMSで作成した動的WEBページになります。↓

今回、自作CMSで作成した動的サイトは下記URLにて公開していますので、是非ご覧ください。

※CMSは操作できません。

自作CMSで作るフルスクラッチ動的サイト

それではまず、これから作成するサイトの概要から説明いたします。

1 概要
- 1.1 全体像
- 1.2 開発環境
2 CMS画面作成の流れ
- 2.1 データベース、テーブルの作成
- 2.2 cmsのPHPファイルの作成場所
3 CMSログイン画面
- 3.1 set_login.php
4 ログインチェック画面
- 4.1 login_check.php
- 4.2 common.php
5 CMSトップ画面
- 5.1 set_top.php
6 ログアウト画面
- 6.1 logout.php

概要

全体像

おおまかに分けると、３つのブロックから成り立ちます。

１つは、「公開する動的サイトのページ」個人ブログのような形式とします。

2つ目は「CMS」動的サイトの管理ページ。

3つ目は「データベース」

になります。

ユーザーが閲覧するサイトの内容は、ユーザーのリクエストに対して、１つのページをデータベースの情報によって動的に変化させる「動的ページ」なります。

全体の仕組みとしては、

①管理者がCMSで記事の投稿、各種メニューの配置などサイトに必要な内容を入力。

②CMSで入力した内容がデータベースに反映。

③公開ページは、ユーザーのリクエストの応じてデータベースに登録された情報を反映。

ざくっとですが、このような流れの仕組みをhtml/css、javascript、PHP/MySQLで作ります。

それでは、まず「CMS」の作成を進めて行こうと思います。CMSが完成後、動的ページの作成に移りたいと思います。

今回は、CMSの「ログインページ」と、「トップ」ページを作成します。

開発環境

PCはWindowsを使用する事前提で進めますが、Macでもほぼ同じだと思います。

WEBサーバーとデータベースは「XAMPP」を使用し、ローカルで開発します。

XAMPPについては過去記事でインストール方法をまとめていますので、分からなければ参照してください。↓

ヘルニアクソ野郎エンジニアblog

PHPとMariaDB(MySQL)の基礎②「作業環境構築とPHPの基本的な文法について」

https://denkenmusic.com/phpとmariadbmysqlの基礎②「作業環境構築とphpの基本的な文法

前回、PHPとMariaDBについてそれぞれの役割や動作原理について簡単にまとめました。↓　今回は、PHPとMariaDBを使ってWEBアプリを作成するために必要な「作業環境の構築」と、PHPの基礎的な文法についてまとめたいと思います。MAMP、XAMPPのダウンロードApache、MariaDBが利用できるソフトウェアローカルでのテスト環境構築にあたり、Apache（WEBサーバー）、MariaDB（データベース）、PHP、が必須になります。それらを１つずつ準備するには苦労するので、一括でまとめて「Apache」「MariaDB」「PHP」を利用することができるソフトウェ...

CMS画面作成の流れ

図のような流れの登録画面を作成します。

各ファイルの作成にあたり、基礎的な内容については端折っていきますので、説明足らずな部分があれば、冒頭の過去記事「ECサイトのフルスクラッチ開発」を先に、参考にしてもらえれば幸いです。

とりあえず今回は、星マークのset_login.php～set_top_done.phpまでを作成します。

まだdbに管理者情報がないので、とりあえず1人作成します。

データベース、テーブルの作成

それではまず、データベースを作成します。

XAMPPのMySQLを立ち上げて、データベースを作成します。データベース名は「test」とします。

続いてtestの配下に、管理者情報のテーブルを作成します。テーブル名は「login」とします。

カラムは３とし、下図のように「code」「name」「password」のカラム名、データ型、AI(AUTO_INCREMENT)を設定します。

ちなみに、今回管理者の登録ページは作成していないので、php myadminからsqlで直接管理者情報を登録しておいてください。

※パスワードはmd5で暗号化させた値を登録させておきます。今気づきましたが、上の画像ではpasswordのデータ型がintになってますが、正しくは下記表のvarcharになります。

カラム名	データ型	その他
code	int	AI
name	varchar 値50	–
password	varchar 値32	–

cmsのPHPファイルの作成場所

ここからphpファイルの作成に入ります。

xamppのApache（WEBサーバー）のドキュメントルート（サーバーのアクセス先）は図の通りxamppフォルダのhtdocs配下になります。

デフォルトでindex.htmlが入っていると思うので、ローカルホストのipをブラウザで打ち込めばそれが開くはずです。ちなみにローカルホストは「127.0.0.1」でもアクセス出来ます。

今回はここに「cmsディレクトリ」を作成し、その配下に公開サイトのphpファイルを今後作成していきます。

cmsのファイルは、cmsディレクトリ配下に「settingディレクトリ」を作成し、その配下にphpファイルを格納していきます。今回はまず「set_login.php」～「set_top_done.php」のファイルを作成します。

CMSログイン画面

set_login.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cmsログイン</title>
<link rel="stylesheet" href="../style.css">
</head>
    
<body>

ログイン情報を入力してください。
<br><br>
管理者名<br>
<form action="login_check.php" method="post">
<input type="text" name="name">
<br>
パスワード<br>
<input type="password" name="pass">
<br>
パスワード再入力<br>
<input type="password" name="pass2">
<br><br>
<input type="submit" value="OK">

    
</form>
</body>
</html>

<!DOCTYPE html>

<head>

<title>cmsログイン</title>

</head>

<body>

ログイン情報を入力してください。

管理者名

パスワード

パスワード再入力

</form>

</body>

</html>

settingディレクトリ配下にset_login.phpを作成します。

特に説明はいらないかと思います、ただformタグで管理者の名前、パスワード、パスワードの再入力欄を作っているだけです。

submitボタンで、次ページのlogin_check.phpに値をpostします。

このページ、拡張子はhtmlでも問題ありませんね。

Apacheを起動させて、127.0.0.1/cms/setting/set_login.phpにアクセスするとこのような画面が出るはずです。↓

ログインチェック画面

login_check.php

<?php
try{
    
require_once("../common/common.php");
    
$post = sanitize($_POST);
    
$name = $post["name"];
$pass = $post["pass"];
$pass2 = $post["pass2"];
    
if(empty($name) === true or empty($pass) === true or $pass != $pass2) {
    print "ログイン情報が間違っています。<br><br>";
    print "<form>";
    print "<input type='button' onclick='history.back()' value='戻る'>";
    print "</form>";
    exit();
}
    
    $dsn = "mysql:host=localhost;dbname=test;charset=utf8";
    $user = "root";
    $password = "";
    $dbh = new PDO($dsn, $user, $password);
    $dbh -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    $sql = "SELECT name FROM login WHERE name=? && password=?";
    $stmt = $dbh -> prepare($sql);
    $data[] = $name;
    $data[] = $pass;
    $stmt -> execute($data);
    
    $rec = $stmt -> fetch(PDO::FETCH_ASSOC);
    if(empty($rec["name"]) === true) {
        print "ログイン情報が間違っています。<br><br>";
        print "<form>";
        print "<input type='button' onclick='history.back()' value='戻る'>";
        print "</form>";
        exit();
    }
    session_start();
    $_SESSION["login"] = 1;
    $_SESSION["name"] = $rec["name"];
    header("Location:set_top.php");
}
catch(Exception $e) {
    print "只今障害が発生しております。<br><br>";
    print "<a href='set_login.php'>戻る</a>";
}
?>

<?php

try{

require_once("../common/common.php");

$post = sanitize($_POST);

$name = $post["name"];

$pass = $post["pass"];

$pass2 = $post["pass2"];

if(empty($name) === true or empty($pass) === true or $pass != $pass2) {

print "ログイン情報が間違っています。 ";

print "<form>";

print "<input type='button' onclick='history.back()' value='戻る'>";

print "</form>";

exit();

}

$dsn = "mysql:host=localhost;dbname=test;charset=utf8";

$user = "root";

$password = "";

$dbh = new PDO($dsn, $user, $password);

$dbh -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$sql = "SELECT name FROM login WHERE name=? && password=?";

$stmt = $dbh -> prepare($sql);

$data[] = $name;

$data[] = $pass;

$stmt -> execute($data);

$rec = $stmt -> fetch(PDO::FETCH_ASSOC);

if(empty($rec["name"]) === true) {

print "ログイン情報が間違っています。 ";

print "<form>";

print "<input type='button' onclick='history.back()' value='戻る'>";

print "</form>";

exit();

}

session_start();

$_SESSION["login"] = 1;

$_SESSION["name"] = $rec["name"];

header("Location:set_top.php");

}

catch(Exception $e) {

print "只今障害が発生しております。 ";

print "<a href='set_login.php'>戻る</a>";

}

settingディレクトリ配下にlogin_check.phpを作成します。

このページで、入力に誤りがないかをチェックします。

先頭のrequire_onceで、エスケープの関数（sanitize）をインクルードしています。

今後、この関数は頻繁に使用するので、このファイルを１つ上の階層「cms」に、「commonディレクトリ」を作って、その中に関数ファイルとなる「commonファイル」を格納します。

common.php

<?php

function sanitize($before) {
    foreach($before as $key => $value) {
        $after[$key] = htmlspecialchars($value, ENT_QUOTES,"UTF-8");
    }
    return $after;
}

?>

<?php

function sanitize($before) {

foreach($before as $key => $value) {

$after[$key] = htmlspecialchars($value, ENT_QUOTES,"UTF-8");

}

return $after;

}

sanitizeの引数に$_POSTが入ります。foreachで、$_POSTの各添え字の値を順番に抜き出し、htmlspecialcharsでエスケープさせて、仮の変数の同じ添え字に戻します。つまり、この結果をリターンすれば、＄＿POSTの値が全てエスケープ処理される事になります。

postの値を受け取った後、名前の入力の有無、パスワードの有無、再入力の不一致を確認しています。

入力に問題が無ければデータベース接続し、loginテーブルの管理者情報と、入力された値が一致するかを確認します。

ログイン情報が一致すれば、セッションを開始させて、headerでCMS管理のトップページへ遷移させます。

CMSトップ画面

set_top.php

<?php

session_start();
session_regenerate_id(true);
if(isset($_SESSION["login"]) === false) {
    print "ログインしていません。<br><br>";
    print "<a href='set_login.php'>ログイン画面へ</a>";
    exit();
}
?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cms</title>
<link rel="stylesheet" href="style.css">
</head>
    
<body>
    
<strong>カテゴリー追加</strong><br><br>
<a href="o_menu_add.php">親カテゴリ追加</a>
<br><br>
<a href="k_menu_add.php">子カテゴリ追加</a>
<br><br><br>
<strong>記事投稿</strong><br><br>
<a href="../edit_single.php">新規記事作成</a>
<br><br><br>
<strong>メニュー追加</strong><br><br>
<a href="../edit_page.php">固定ページ作成</a>
<br><br><br>
<strong>プロフィール</strong><br><br>
<a href="pro.php">プロフィール作成</a>
<br><br><br>
<strong>スポンサー</strong><br><br>
<a href="sp.php">スポンサーリンク作成</a>
<br><br><br>
<strong>コメントチェック</strong><br><br>
<a href="comment_check.php">コメント認証・削除</a>
<br><br>
<a href="comment_list.php">コメントリスト・返信</a>
<br><br><br>
<strong>ログアウト</strong><br><br>
<a href="logout.php">ログアウト</a>
    
    
</body>
</html>

<?php

session_start();

session_regenerate_id(true);

if(isset($_SESSION["login"]) === false) {

print "ログインしていません。 ";

print "<a href='set_login.php'>ログイン画面へ</a>";

exit();

}

<!DOCTYPE html>

<head>

</head>

<body>

カテゴリー追加

<a href="o_menu_add.php">親カテゴリ追加</a>

<a href="k_menu_add.php">子カテゴリ追加</a>

記事投稿

<a href="../edit_single.php">新規記事作成</a>

メニュー追加

<a href="../edit_page.php">固定ページ作成</a>

プロフィール

<a href="pro.php">プロフィール作成</a>

スポンサー

<a href="sp.php">スポンサーリンク作成</a>

コメントチェック

<a href="comment_check.php">コメント認証・削除</a>

<a href="comment_list.php">コメントリスト・返信</a>

ログアウト

<a href="logout.php">ログアウト</a>

</body>

</html>

settingディレクトリ配下にset_top.phpを作成します。

ここがCMSの管理画面トップになるので、各メニュー画面へのリンクを貼りつけていきます。

先頭のセッションIDの確認は、ログイン後のCMS関連のすべてのページで実施します。権限がないのに、CMSをいじくられるのは非常にまずいからです。

それでは、ログインしてみましょう。下のような画面になるはずです。

ログアウト画面

logout.php

<?php

session_start();
$_SESSION = array();
if(isset($_COOKIE[session_name()]) === true) {
    setcookie(session_name(), "", time()-42000, "/");
}
session_destroy();
?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ログアウト</title>
<link rel="stylesheet" href="style.css">
</head>
    
<body>
    
ログアウトしました。<br><br>
<a href="set_login.php">ログイン画面へ</a>

</body>
</html>

<?php

session_start();

$_SESSION = array();

if(isset($_COOKIE[session_name()]) === true) {

setcookie(session_name(), "", time()-42000, "/");

}

session_destroy();

<!DOCTYPE html>

<head>

<title>ログアウト</title>

</head>

<body>

ログアウトしました。

<a href="set_login.php">ログイン画面へ</a>

</body>

</html>

settingディレクトリ配下にlogout.phpを作成します。

cmsログアウトの画面になります。

セッションの解除、ブラウザに残っているcookieの情報を消去しています。

それでは、トップ画面の下部にあるログアウトをクリックしてみます。下記のようになればOKです。

次回は、カテゴリー追加画面を作成します。

11 COMMENTS

k 2022年2月2日

初めまして。kといいます。
phpを独学で習得しているものです。

こちらのcmsを、コードを見ながら手打ちしているのですが、ローカル環境にて
「Warning: Undefined variable $after in C:\xampp\htdocs\cms\common\common.php on line 7

Warning: Trying to access array offset on value of type null in C:\xampp\htdocs\cms\setting\login_check.php on line 7

Warning: Trying to access array offset on value of type null in C:\xampp\htdocs\cms\setting\login_check.php on line 8

Warning: Trying to access array offset on value of type null in C:\xampp\htdocs\cms\setting\login_check.php on line 9」

このように表示されます。
dlしたコードを直接コピペしても、同様の結果でした。

調べたところ、phpのバージョンアップによるローカルでのみの現象でした。
valueをarrayを使って配列宣言して回避するとのことですが、記述の仕方が分かりません。

図々しいとは思いますが、記述を教えていただけませんか？
恐縮ですが、何卒よろしくお願いします。

返信する

ketunorobio 2022年2月2日

ｋさま、はじめまして管理人です。
問い合わせ頂きました内容をこちらの環境で試してみましたが、エラーは出ておりません。（PHP ver 7.4.27）
PHP 7.4以降は配列は初期指定しないとエラーとなる（しないと変数を連想配列として参照できない）、との情報がありますが、上記common.phpでは該当する箇所が無い気が。。申し訳ありませんが、同じ環境でないためエラーの原因は分からないです。
見当違いのアドバイスになるかもしれませんが、以下コードをforeachの前に記述すれば、一応valueとafter変数を連想配列として初期設定できます。（関係ないと思われますが。。）
う～ん、、値はpostされてきてますかね？そっちの方があやしいかもです。
パッとしない答えですみません。(-_-;)

返信する

ketunorobio 2022年2月2日

$value = array(“test”=>null);
$after = array(“test”=>null);

返信する

k 2022年2月3日

＞ketunorobioさま

詳しいご回答、ありがとうございます。
ketunorobioさまの環境、またコードに問題ないとのこと。

こちらで手打ちしたときに、ミスをしているかもしれません。
もう一度、dlしたコードとの比較・ローカル動作を確認してみます。
また、小規模のプログラムを作って、コードの動きを把握できるよう学習していきます。

丁寧かつ迅速なご回答、心から感謝いたします。
本当にありがとうございました。

返信する

k 2022年2月3日

すみません、追加です。
自分の環境はphp8です。
一度バージョンを落として、ketunorobioさまと同じ環境で試してみます。
結果が出たら、またこちらにコメントさせていただきます。

返信する

k 2022年2月5日

kです。

ログイン出来るようになりました！
sqlにて、管理者情報を登録出来ていなかったのが原因でした。
お手数おかけして申し訳ありませんでした。

返信する

ななし 2022年11月15日

初めまして。
PHPの勉強をしており、初めての自作WEBアプリでCMSを作りたいと思いこの記事にたどり着きました。
CMS作成にとりかかるとき、どのように調べて作業を進めていますか？
例えば、親カテゴリと子カテゴリの作り方など、自身で考えて作られたのか、作り方がどこかに載っていて参考にされたのか知りたいです。
参考にしている書籍や記事がありましたら、教えていただきたいです。
お手数ですが、よろしくお願いいたします。

返信する

ketunorobio 2022年11月26日

ななし様はじめまして、管理人です。
お返事がおくれてしまい申し訳ありません(-_-;)
CMSにつきましては、基本自力で考えて作成しました。（のでかなりコードとかは汚いと思います汗）
お役に立てるか分かりませんが、下記にてご質問に対しての回答をまとめます。

下地１：簡単な静的WEＢページを作成できるレベル（HTML/css,js）を身につけました。
書籍はあまり見てなかったきがします。ググって調べてました。

下地2：簡単な動的ページ（ECサイト）を作成できるレベルを身につけました。参考にしたのは「気づけばプロ並みPHP」です。
私は未だに基礎しか知りませんが、PHPやデータベースに関する基礎知識はほぼこの書籍で学びました。

この２つの下地があれば、オリジナルのCMSを作成できるかと思います。
あとは自分で作成したいCMSの全体像を決めて、それを作りこんでいくだけですが、
なにかと躓くポイントか出てきますので、そこはその都度ググって解決していく感じでした。
（ググったサイトはたくさんあるので忘れてしまいました、スイマセン）
親カテゴリ子カテゴリも自力で作成しましたが、下地があれば実装方法のアイデアも思い浮かぶかと思います。

以上でございます。
。。
なんか回答になってないですね、申し訳ないです(;^ω^)

返信する

ななし 2023年1月3日

ふわっとした質問にご丁寧にお答えいただき有難うございました！！！
参考にさせていただきます！

返信する

テト 2023年10月3日

コメント失礼します。
こちらgithubなどでデータは公開していないでしょうか？

返信する

ketunorobio 2023年10月3日

コメントありがとうございます。

githubに公開はしておりませんが、当該cms記事の12にてデータをDL出来るようリンクを貼り付けております。

もし宜しければそちらのデータをお使いください。

管理人

返信する

概要

全体像

開発環境

CMS画面作成の流れ

データベース、テーブルの作成

cmsのPHPファイルの作成場所

CMSログイン画面

set_login.php

ログインチェック画面

login_check.php

common.php

CMSトップ画面

set_top.php

ログアウト画面

logout.php

11 COMMENTS

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル