作品タイトルは前回と同じものとその管理画面

伊丹の梅の木はどこに消えた？及び管理画面
Who moved our trees of plum in Itami?

コンセプト、ポイント

  • aside画面のコンテンツをMySQLDB化、PHPで取り出しJSのAjaxで非同期通信で受け取り表示
  • お問い合わせページをPHP化し、フォームデータをMySQLDBに登録
  • お問い合わせはjsで内容チェックし確認画面で表示してからDB登録、確認画面から入力画面に戻せるようにする
  • 管理画面は管理者ユーザー登録画面と操作画面は分離する。登録画面からのみリンクできるように。
  • 管理操作画面ではログインによる権限管理を実施
  • 管理操作画面では問い合わせ情報一覧画面が表示でき、さらに各問い合わせ内容詳細を別画面で表示できる
  • 問い合わせ内容詳細画面ではメール返信画面を用意するが、実際にはメール機能は実装できないので
    メール返信している想定で扱い、返信記録をMySQLDBに保存する

各対応内容

01.aside画面のコンテンツをMySQLDB化、PHPで取り出しAjaxで通信

asideコンテンツの各パーツをDBのフィールドにあらかじめ保存。PHPのPDOでSELECTクエリーで取得して指定
されたデータかランダムデータを渡す。Ajax通信で受け取りプレースフォルダへJavaScriptのinnerHTML等で表示

02.お問い合わせページPHP化、MySQLDBに登録

フォームデータをPOSTのsubimitで自分自身のPHPファイルに送り、PDOのINSERTでMySQLDBに登録

03.お問い合わせページのjs内容チェック、確認画面、DB登録、入力画面戻り機能

フォームデータをPOST時onsubmitのJavaScript関数で内容チェックし、よければPOSTして確認画面表示し
hiddenフォームにデータをコピー、だめならPOSTしないでアラート表示。確認画面でよければhiddenデータで
さらにPOSTしDB登録する。修正したい時は戻るボタンでPOSTしフォームを表示しhiddenデータを書き戻す。
すべて1つのPHPファイルで実現。

04.管理画面は管理者ユーザー登録画面と操作画面

管理画面は全てPHPで作成。ユーザー登録はDBにユーザーID、パスワードを登録。ニックネームをクッキー保存。
登録画面からのみ操作画面へリンクするが逆からのリンクはせずに分離する。

05.管理操作画面のログインによる権限管理

セッションで常にログイン状態をチェックし、操作の可不可を管理。ログイン時クッキーからニックネーム、
前回ログアウト時刻を表示。ログアウト時、セッション削除し、ログアウト時刻をクッキーに保存。

06.管理操作画面では問い合わせ情報一覧画面表示と内容詳細画面表示

お問い合わせページフォームからDBへ登録したデータをPDOのSELECTクエリーで取得、5件ずつ一覧表示し、
次へ前へページ切替させる。各リスト行に詳細リンクを用意し、複数の新規別ページで内容詳細画面表示させる。
すべて1つのPHPファイルで実現。

07.問い合わせ内容詳細画面ではメール返信画面を用意

問い合わせ内容詳細画面では選択した1件の問い合わせ詳細内容を表示し下にメール返信画面を表示。
実際にはメール機能は実装できないのでメール返信している想定で扱い、POSTで返信記録をPDOのUPDATEで
DBへ登録。既に記録済みの場合は記録表示画面にする。すべて1つのPHPファイルで実現。

苦労した点、困った点

1.自宅のRaspberry Piサーバー環境が最初エラー表示しない設定で画面が真っ白に。
2.自宅のRaspberry Piサーバー環境のPHPパッケージがVersion5.4でpassword_hushやfinallyが使えずエラーに。
（password_hushはライブラリーで実現。いずれもver5.5から）
3.aside表示のAjaxはググってもjQueryによる方法の情報ばかりでJavaScriptネイティブの
情報が少なく実現が難しかった。たまたま見つけたページとテキストとは別の本で実現できた。
4.1つのPHPでのifelseの分岐でHTMLを分けるとコードが複雑になりわかりにくくなった。
5.echoのHTMLやJavaScriptでダブルクォーテーションの二重打ちやエスケープ抜けをしやすかった。
6.PHPで取ったPOST値や変数をJavaScriptに渡すのが難しく、その部分は外部JavaScript化できなかった。
7.textareaの改行付き複数行データをPHPのPOST値からJSに渡してhiddenのinputのvalueに入れるとエラーになった。
nl2br関数でbrタグを入れて改行コードを削除するとエラーにならないが、修正画面に戻る際にtextareaに元のように
書き戻せなくなってしまう。色々調べた結果JSONデータに変換してやり取りする事で対応できた。
8.各詳細画面を複数表示できるようにするため、選択した問い合わせNoのデータをセッションで受け渡しすると
常に新しいものに書き変わってしまうのでセッションは使えなかった。なので一覧からはGETで渡し、詳細画面で
submitした時はPOSTで受け渡しで解決できた。
9.MySQLをPDOで扱うPHPファイルが増えると自宅と学校のPCローカルと学校のサーバで環境毎にホスト、ユーザー名、
パスワードが異なるためDB名テーブル名等を共通化してもコードが少しずつ異なってしまいとても混乱したが、
ホスト、ユーザー名、パスワード部分のみ外部PHP化してrequireし、そのファイルの差し替えのみで対応させて
扱い易くなった。

感想、まとめ

今までの課題の題材をそのまま利用したためにMySQLをもっと活用できるものがあまりできず、今までより
コンテンツ不足となり見た目がしょぼくなってしまったが代わりに結構PHPのコードやJavaScriptとのやり取り、
Ajax等がわかりにくく手間がかかった。
メニューのnavやfooterのnav、JavaScript外部ファイル化、フレームワーク化していたので通常画面では問い合わせ
ページのみPHPとなったがリンクの修正はそれぞれ1カ所のJavaScriptの修正ですんで楽だったので、前回フレーム
ワーク化しておいてよかったと思った。
Eコマース等に関連した内容ならもっとPHPやMySQLを使ってできたと思うが期間内にできなかったかもしれない。