ラボ > PHP:HTML、Javascript絡み、Javascript関連:form

PHP+FORMの処理の流れ

いまだにベストな処理の流れにたどり着かない。

作成日:2018-03-30, 更新日:2019-05-09

基本

下記のときが面倒。

▼登録フォーム等のページ構成
・入力画面
・確認画面
・保存後の完了画面

間に確認画面があると色々と面倒・・・。

▼面倒な状況
・パスワードや、あまり見せたくない情報があるとき
・「新規登録」と「既存データの更新」の「入力画面」を1ファイルでどうにかしたいとき
・ファイルを送信したいとき
・バリデーションしたいとき

対策:ファイルのアップが無いとき

色々と対応策はある。でも、どれがベストなのかが分からない。

hidden属性にする

確認画面では、入力されたデータをhidden属性にする。手っ取り早い方法ではある。

パスワードがあると・・・HTMLソースを見るとわかってしまうので注意が必要。

確認画面なし

一番手っ取り早い方法。

▼ajaxを使ってバリデーションチェックをしてから、form送信。

$.ajax({
  〇〇〇
}).done(function(data) {
  if ( data.〇〇〇(バリデーションチェックした結果) ) {
    // バリデーションでエラーあり
    ~ エラー出力させる処理 ~
  }
  else {
    // バリデーションでエラーなし
    〇〇.submit();
  }
}).fail(function(jqXHR, textStatus, errorThrown) {
  // 失敗
});

A.入力画面:送信→(ajaxでバリデーションチェック:エラー無し)→form送信。
B.入力画面:送信→(ajaxでバリデーションチェック:エラーあり)→入力画面にエラー

単純にform送信できるので何も気にしなくていい。

入力データに間違いがあると気付いたときは、登録後に更新処理をしてもらうって感じ。
問合せフォームだと・・・ダメな感じ。

セッション利用

確認画面で入力されたデータをセッションに保存させる。
ちと面倒だけど無難な方法。

面倒なのは下記のとき。
・「新規登録」と「既存データの更新」の「入力画面」を1ファイルでどうにかしたいとき

新規登録時、更新時の既存データとセッション保存した入力データなどで、ゴニョゴニョしてあげないと「入力画面」でエラーになる。

jqueryで確認画面を用意する

面倒。

A.入力画面:送信→(ajaxでバリデーションチェック:エラー無し)→確認画面を出力→form送信。
B.入力画面:送信→(ajaxでバリデーションチェック:エラーあり)→入力画面にエラー

入力画面を確認画面に変換が面倒。

inputタグなどを「readonly」にすればいいっていう話ではあるけど・・・チェックボックスなどが面倒。
それに「確認」ボタンを「保存」ボタンに変更したり、「修正」ボタンの表示・非表示も作るのが面倒。

対策:ファイルのアップがあるとき

確認画面を用意するときファイルにセッションは意味がない。

確認画面を用意するときのファイルの処理
1.確認画面でファイルをどこかにアップ。
2.確認画面→データ保存時にアップしたファイルを任意の場所に移動する

注意点
・「確認画面→入力画面」のとき「どこかにアップ」したファイルは削除する必要あり
・「確認画面→ページから離脱」したとき「どこかにアップ」したファイルが残る

対応としては・・・
・cronか何かで定期的に「どこかにアップ」した場所をチェックして「〇日前のファイル」を削除

ajax、jqueryで確認画面を用意する

面倒だけどjqueryで確認画面を用意するのが良さげ。
※javascriptを無効にしているユーザーは・・・対象外。

A.入力画面:送信→(ajaxでバリデーションチェック:エラー無し)→確認画面を出力→form送信。
B.入力画面:送信→(ajaxでバリデーションチェック:エラーあり)→入力画面にエラー

重いファイルのupとform送信

サーバの設定やPHPで一時的にメモリ割り当ての変更がNGの場合。
→重いファイルのupは分割して送信させたい。

1.重いファイルを仮フォルダにup→up成功したら、ファイル名をformにセット
2.form送信時、upされたファイルを任意の場所に移動

ファイルをup後、ブラウザを閉じたりした人たちの対応
・cronで定期的にファイルをチェックして削除
・任意の処理実行時にファイル削除を行う

ファイルのup無し、セッション・確認画面アリのたたき台

関連項目

jqueryでフォームの有効・無効化
PHP+FORM(ファイルあり)の処理の流れ