自分流

なんちゃってエンジニアによる自分用メモ

お題で開発

ツイート機能の実装【お題で開発:6】

投稿日:2019年10月29日 更新日:

前回プロフィール編集機能を作りました。

今回は投稿(ツイート)機能を作っていきます。

メインとなる部分ですね。

 

今までの応用でなんとかなるのですが、せっかくなのでちょっと違うことをしてみようと思います。

ではいってみましょう!

 

投稿機能の実装

今までの処理の流れは

入力画面 → 確認画面 → 完了画面

という構成で、入力値エラー(必須項目の入力漏れなど)時は、確認画面でエラーを表示し、ユーザーが戻るボタンを押して入力画面に戻っていました。

昔はそういうフォームも多かったですが、今時そんな不便なフォームなんてありません。

 

入力値に問題があればもう一度入力画面 → 問題なければ完了画面

今回はこういう構成でいこうと思います。

 

ファイル構成は以下の通り

 

 

ツイート入力画面

後述しますがリダイレクトの兼ね合いで、ログインチェック部分のロジックを変更しました。

 

ポイントはいくつかありますが、まずはここ

 

formタグのactionに自分自身を指定しています。

送信のボタン(ここでは「わびさび」)を押すと、同じページが呼び出されるわけです。

また、フォームの送信ボタンのタグは

<input type=”submit” name=”submit” value=”わびさび”>

こうなっていて、name=”submit”になってます。

 

 

そこで最初のエラー判定

この判定は、簡単に説明するとわびさびボタンが押されてきた遷移かどうかの判定をしています。

つまり、初回呼び出し時は、後続のエラー判定はせず

わびさびボタンを押された場合はエラーチェックをしています。

同じページだけど、押されたボタンによって処理を振り替えているわけですね。

 

エラーチェックを色々としていますが

エラーがある場合は$errorsという配列にエラーメッセージを入れていきます。

全体のチェックが終了した時にエラーが存在しない場合は、ステータスコード307でDBにデータを保存するphpにリダイレクトしています。

ステータスコードはHTTPの話になるので詳しくはググってほしいのですが、307はpostやgetを引き継げるようになっています。

 

また、リダイレクトはその処理が入るまでに画面に何かを表示するとエラーとなります。

前回までのログインチェックはその場でHTMLを吐き出していましたが、そうするとログインチェック後にリダイレクトできない。という問題が発生するので、今回ログインチェックのロジックを変更したわけですね。

 

エラーチェックして、エラーがあればエラーを表示する。

初回アクセス時はエラーチェックせずformを表示する。

あとは難しいことはしていません。

 

 

 

ログイン状態の確認

今まではログイン成功時も画面にHTMLを表示していましたが、表示しないように変更しました。

また、session_regenerate_id(true);を連続で呼ぶとセッションがなくなってしまう問題が発生したので(F5連打とか)、session_regenerate_id(true);は少なくとも7秒の間隔を開けるよう変更しました。

 

 

common.php ヘッダー、フッターの表示ロジック

今まではheader.phpに処理ベタ書きしてたんで、

require_once(‘header.php’);ってした瞬間にHTMLを書いていましたが、先述の通りリダイレクトできない問題が発生したので出力タイミングを変更するように変更しました。

common.phpが相当大きくなってきたのでまた見直しが必要ですが、とりあえず全部common.phpに入れています。

common.phpってこの名前使いたくなるけど、何を意味するファイルかわからない名前なので本来使わない方がいいですよ・・・w

 

各HTML出力関数もそう難しくないかな。と

若干の制御文はありますがecho で出力してるだけですね。

 

DBにデータ追加 & 完了画面

$_SESSIONのlogin_idからuser_idを引っ張ってきて

入力されたpostの値をサニタイズ

画像を保存して

DBに各値を入れる。

 

今までしたことですよね。

 

 

 

まとめ

入力値のエラーチェックを自分自身ですることで、エラーをその場で出せるし、入力途中の値が飛ばずにそのまま入るようになる。

エラーがなかった場合はリダイレクトでその先のページに飛ばす。

そういう仕組みでエラーチェックってなされてたんですね。

 

また、リダイレクトは何か画面(ブラウザ)に表示しているとエラーで実行できないので、HTML等を表示するタイミングを考慮しないといけないのがわかりました。

 

参考書等だとうまくいくことがわかりきってる中での積み上げなんで、こうやってミスに気付いて戻って修正。って動作がないんですよね。

やっぱり自分で作ると気付きがいっぱいだし、理解していない部分が明確になっていいですね。

 

 

次はツイート一覧の表示を作っていきます!

 

今回の成果

github

 

機能一覧

  • ユーザー登録 済!
  • ログイン 済!
  • プロフィール編集 済!
  • プロフィールに画像投稿 済!
  • 新規つぶやき 済!
  • つぶやきに画像添付 済!
  • 一覧表示
  • つぶやきへのコメント
  • いいね
  • コメントへのコメント 仕様から削除
  • コメントに画像添付 仕様から削除

 

つづく

-お題で開発
-, , , ,


comment

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

関連記事

ツイート詳細・コメント機能の実装【お題で開発:8】

前回ツイート一覧機能を作りました。 今回はツイート詳細・コメント機能を作っていきます。   以前作ったツイート機能の実装と同じように作っていきます。       …

ログイン機能の実装【お題で開発:4】

前回ユーザーの新規登録を作りました。 今回は登録したユーザーでのログインを作ります。     もはやどんなサービスでも存在するログイン機能。 今更説明するまでもない機能ですが、どう …

ツイート一覧機能の実装【お題で開発:7】

前回ツイート機能を作りました。 今回はツイート一覧機能を作っていきます。   タイムライン を作ってみたいですが どういう仕組みかパッと浮かばないので、昔ながらの10件ずつ表示してページ送り …

プロフィールの編集機能の実装【お題で開発:5】

前回ログイン機能を作りました。 今回はプロフィールの編集機能を作っていきます。 これも基本的な部分ですね。     目次1 プロフィール編集機能に必要な機能1.1 画像のアップロー …

ユーザーの新規登録機能の実装【お題で開発:3】

前回環境構築も済み、意気揚々と開発! あんまり頭の中で構築できておらず、 不安しかありませんがハマりながら作っていきます。 やればなんとかなるでしょうし、やらなければなんともならないですからね。 &n …

Top