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

~ヘルニアでHell near~

CMSを自作してオリジナル動的ホームページをフルスクラッチ開発してみよう!⑤CMSのプロフィール、スポンサーリンク追加画面の作成

calendar

前回、CMSの固定ページ作成画面を作成しました。↓

 

今回はCMSのプロフィール、スポンサーリンク追加画面を作成します。

cms構成プロフィール

星マークが作成済みのページです。今回は雲マークのページを作成します。

後ほど作成する公開用の動的ページで調整しますが、プロフィールとスポンサーリンクは、公開ページのサイドメニュー部に表示させるようにします。↓

 

それでは初めに、プロフィールとスポンサーリンクの情報を保存するテーブルから作成します。

 

スポンサーリンク

テーブルの作成

pro(プロフィール情報のテーブル)

プロフィールテーブル

データベース名「test」に「pro」テーブルを作成します。

カラムは4とし、詳細は下記の通りとします。

名前データ型その他
codeintAI
namevarchar 値50
imgvarchar 値100
honbunvarchar 値200

 

sp(スポンサーリンク情報のテーブル)

スポンサーテーブル

データベース名「test」に「sp」テーブルを作成します。

カラムは4とし、詳細は下記の通りとします。

名前データ型その他
codeintAI
namevarchar 値50
imgvarchar 値100
urlvarchar 値50

 

プロフィール入力画面

pro.php

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

このページはプロフィール情報を入力する画面になります。

formタグで名前、画像、紹介文を入力して次ページへpostするだけですね。

プロフィール作成画面

プロフィール登録画面

pro_check.php

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

このページは入力されたプロフィール情報のチェック、プレビュー表示、テーブルに登録、する画面になります。

入力に誤りが無ければ、まず画像ファイルをimgディレクトリにアップロードさせています。

続いてデータベースに接続し、proテーブルに情報が無ければ、そのまま入力情報を登録。

proテーブルに情報がすでに存在していれば、UPDATEのSQLで既存の情報を上書き修正しています。

つまり、プロフィールは1つしか要らないので、追加で登録できない仕組みにしています。

テーブルに登録後は、プレビュー表示させています。

プレビューの表示が味気ないですが、これは後で作成する公開用ページのCSSでまとめてスタイリングさせます。

プロフィールプレビュー

テーブルに情報が反映されているか確認します。

proテーブル確認

 

スポンサーリンク入力画面

sp.php

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

このページはスポンサーリンク情報を入力する画面になります。

formタグで名前、画像、リンク先となるURLを入力して次ページへpostするだけです。

スポンサーリンク入力画面

スポンサーリンク登録画面

sp_check.php

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

このページは入力されたスポンサーリンク情報のチェック、プレビュー表示、テーブルに登録、する画面になります。

入力に誤りが無ければ、まず画像ファイルをimgディレクトリにアップロードさせています。

続いてデータベースに接続し、spテーブルに情報を追加します。

その後、spテーブルに保存されているスポンサーの一覧をプレビューさせます。

スポンサーリンクについては、登録されている情報をすべて公開ページに表示させたいので、このようにしました。

それでは2つ程登録してみます。

こちらもプレビューの表示が味気ないですが、これは後で作成する公開用ページのCSSでまとめてスタイリングさせます。

スポンサーリンク保存画面

テーブルに情報が反映されているか確認します。

 

次回は、コメントの認証チェック、登録可否のページを作成します。