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

~ヘルニアでHell near~

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

calendar

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

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

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

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

 

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

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

※CMSは操作できません。

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

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

 

スポンサーリンク

概要

全体像

CMS概要

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

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

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

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

になります。

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

全体の仕組みとしては、

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

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

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

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

 

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

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

 

開発環境

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

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

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

CMS画面作成の流れ

cms login

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

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

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

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

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

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

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

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

login_tb

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

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

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

カラム名データ型その他
codeintAI
namevarchar 値50
passwordvarchar 値32

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

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

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

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

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

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

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

cms login画面

ログインチェック画面

login_check.php

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

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

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

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

common.php

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

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

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

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

CMSトップ画面

set_top.php

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

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

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

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

cms top画面

ログアウト画面

logout.php

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

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

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

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

cms ログアウト

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