2021/12/15 よりサイトリニューアルしました

CMSを自作してオリジナル動的ホームページをフルスクラッチ開発してみよう!②CMSのカテゴリー追加画面の作成

親カテゴリ入力画面

前回、CMSのログイン画面、CMSのトップ画面を作成しました。↓

 

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

blogなどのホームページでは、投稿記事がカテゴリ別で管理されているので、CMSには必須の項目といっても良いでしょう。

最終的には下のような感じで、親カテゴリに、子カテゴリが並ぶように設計します。

カテゴリ追加

星マークが前回作成した項目です。今回は雲マークの親カテゴリと、子カテゴリのページを作成します。

cms構成カテゴリ

 

テーブルの作成

o_menu(親カテゴリ)

親カテゴリテーブル

初めに、親カテゴリのテーブルをtest(データベース)に作成します。

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

カラム名データ型その他
codeintAI
namevarchar 値30

k_menu(子カテゴリ)

子カテゴリテーブル

続いて子カテゴリのテーブルも作成します。

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

カラム名データ型その他
codeintAI
o_codeint 値20
namevarchar 値30

親カテゴリ入力画面

o_menu_add.php

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

このファイルは、追加したい親カテゴリを入力するページになります。

初めにデータベースに接続し、親カテゴリの有無を確認。登録されている親カテゴリがあれば、一覧を表示させます。なければ無し、と表示させています。

formタグにてテキストボックスに任意のカテゴリ名を入力し、submitでカテゴリ名が次ページへpost送信されます。

CMSトップ画面から親カテゴリ追加をクリックすると、下記のような画面に移ります。

親カテゴリ入力画面

親カテゴリ追加画面

o_menu_add_done.php

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

このファイルは、入力した親カテゴリをデータベースへ追加するページになります。

postデータをエスケープ後、入力が空でないかのチェックをしています。

その後、一旦データベースに接続し、親カテゴリテーブルに、入力したカテゴリ名が既に登録されていないかチェックしています。2重登録を防ぐためのチェックですね。

問題なければ、親カテゴリが追加されます。

それでは適当に3つ程登録してみます。登録後、データベースに反映しているかチェックします。

親カテゴリ追加登録
親カテゴリデータベース

子カテゴリ入力画面

k_menu_add.php

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

このファイルは、親カテゴリを選択し、子カテゴリを入力するページになります。

初めにデータベースに接続後、親カテゴリの一覧をプルダウンで表示させています。

もし親カテゴリが存在しなければ、子カテゴリは入力できないようにしています。

親カテゴリがあれば、任意の親カテゴリを選択し、テキストボックスに任意の子カテゴリ名を入力します。

submitで次ページへ値がpost送信されます。

子カテゴリ入力画面

子カテゴリ追加画面

k_menu_add_done.php

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

このファイルは、子カテゴリをデータベースに登録するページになります。

postデータをエスケープ後、入力が空でないかを確認しています。

その後データベースに接続し、子カテゴリのテーブルに、入力したカテゴリ名が無いかチェックをかけます。2重登録の防止です。

問題なければ、選択した親カテゴリのコード(プライマリkye)を取得し、子カテゴリ名と、親カテゴリのコードをデータベースに登録します。

これで、子カテゴリ名と、親カテゴリが紐づけされます。

それでは、各親カテゴリに適当に子カテゴリを追加してみます。

追加後、データベースを確認し、ちゃんと反映しているか確認します。

子カテゴリデータベース

次回は、記事投稿ページ(HTMLエディタ)を作成します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です