自分流

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

お題で開発

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

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

前回環境構築も済み、意気揚々と開発!

あんまり頭の中で構築できておらず、

不安しかありませんがハマりながら作っていきます。

やればなんとかなるでしょうし、やらなければなんともならないですからね。

 

前置き

まず最初に、今後設計の不備などが見つかれば都度修正しますが、前の記事は修正しないように進めていきます。

最終的にどうなったのかはわかる形にしていこうと思っています。

 

開発を進めるうえで、どういうファイル名にするか、どういうレイアウトにするか。

きっとセオリーがありますが、考えすぎても仕方ないのでとりあえず手を動かして作っていきます。

気に入らなければ全部作った後に作り直せばいいんですw

 

このブログでの取り上げ方も悩むんですが、ソースの詳細を解説するというよりは、考え方やテクニックを重点的に行こうと思います。

ソースはgithubに置いてるので、がんばって読もう。

最初は読む価値ないソースですが・・・w

 

また、今回からPHPを使用して開発していくのですが、

当面の間は以下の書籍を見ながらやっていきます。

調べると答えが載ってると思われるのでGoogleもある程度縛ります!

 

今回作ろうとしてるサービス程度であれば、この本の範囲に収まってますね・・・w

 

僕が持ってるのは古い版でした。

最新版はWebセキュリティの第一人者である徳丸さんが協力しているようですね。

密かなファンで何度かセミナーを受講させていただきました。

 

前置き以上!

 

 

DB作成

まずはDB作りましょう

開発環境立ち上げてPHPMyAdminでDBに接続

 

http://localhost:8888

以下のようにさっくりと作りました。

 

usersテーブル

  • updatedフィールド:使用予定がないため削除

 

tweetsテーブル

  • updatedフィールド:使用予定がないため削除

 

commentsテーブル

  • updatedフィールド:使用予定がないため削除

 

likesテーブル

  • テーブル名:SQLの予約語だったのでlikeからlikesに変更
  • createdフィールド:使用予定がないため削除
  • updatedフィールド:使用予定がないため削除

 

新規登録機能

では新規登録を作っていきます。

 

良し悪しは置いておいて

新規登録の画面遷移は以下とします。

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

※VSCodeのPlantUMLで作りました。
VSCode上でalt+Dでリアルタイムプレビューできるよ。
画像で出力もできるよ。

 

ファイル構成は以下

PHPのというか、Webのシステムはどこがフロントでどこがバックエンドかを意識しながら作らないとこんがらがりますね。

MVCにのっとって表示部分を分ける。とかもいずれしていきます。

まずは原始的な手法で全部作ろうと考えています。

 

入力画面

ただの入力画面。header.php、footer.phpを読み込みたいがためだけに.phpファイルになっています。

 

入力チェック処理 & 確認画面

postで受け取ったIDとパスワードをサニタイズして、正当性のチェック。

IDかパスワードが入力されていない。あるいは、登録済みのIDの場合はエラーを表示。ユーザーに戻る操作を強いる仕様です。

入力値に問題がない場合は、登録処理へと進むための画面を表示します。

 

受け取ってすぐサニタイズしてるけど、サニタイズって表示の時にのみすればいいよね?

こういう疑問も追い追い解決していきたいと思っています。

※TODO: でハイライトしてくれる拡張機能入れてます。
入力値の正当性チェックはいつかかけたい。

 

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

PDOでDB操作しています。

ちゃんとしとかないとSQLインジェクションに繋がりますからね。

Webはセキュリティも考えないといけなくて大変ですね・・・

 

共通部分は外部ファイルにしました。

header.php

ヘッダー部分のHTML

 

footer.php

フッター部分のHTML

 

共通関数

DBに接続してPDOのインスタンスを返す関数と、指定したlogin_idがDBに存在しているかの確認関数。

取得したPDOのインスタンス$dbhは使い終わったらnullを代入しないといけないんだけど、それを関数使用者に強いる作り。これはよくないです。

後々クラス化します。

 

PDOはDBに接続し、SQLとデータをセットして実行。

実行した結果が$stmtに入っているので、fetch◯◯を使用してデータを取り出すんですね。

$stmt->fetchColumn();はSQL実行結果の最初の列の値を返します。

SELECT COUNT(*) FROM ~~の場合、取得件数が返ってきます。

 

今回は指定login_idの件数を取得しているので、0以外の場合はすでにDBに存在する=使用されているlogin_idなので使用できない仕様にします。

 

 

ハマりポイント

user_add_done.phpのDBにデータを追加するところで軽くハマりました。

 

ブラウザでは正常だけどDBにデータが入らない

インサート文

INSERT INTO users (login_id, password) VALUES(?, ?);

というSQL文の時、ブラウザ上では正常に登録できているような挙動だが、DBを確認するとデータが入っていませんでした。

 

それもそのはずで

usersテーブルは空を許す列がなく、全列にデータを入れる必要がある。(上記はlogin_idとpassword列しかデータを入れていない)

 

 

画面上正常なので、確認せずどんどん開発し気づくのが遅れると、どこでおかしくなっているのかわからなくなることもあるため、一つ一つ確実に動いていることを確認するのがおすすめです。

 

どうやって追いかけるのか

これはモダンなやり方があるのかもしれませんが、僕はいにしえより伝わりし手法var_dump()を使いました。

 

$stmtの中身と$dataの中身を確認

↓結果

 

var_dump()は変数だろうが配列だろうが表示するすごいやつ。

結果はブラウザのソースを見た方がわかりやすいかも。

 

今回でいうと、DBへINSERTがうまいこと動いていないっぽいので、上記情報からSQL文を組み立てます。

 

 

これをPHPMyAdminで流すと

#1364 – Field ‘name’ doesn’t have a default value

こんなエラーが出ました。

 

nameフィールドは初期値ないですよ。

 

つまりname列の値設定しろよ。なので、

設定したSQL文を作ります。

 

これを実行して・・・

 

というのを繰り返し、問題点の把握。

その後はそれをPHPのコードに反映させるわけですね。

before

after

 

nameはユーザーに入力してほしい項目ですが、初期値はユーザーIDにする。というのが新しく仕様となりました。

 

 

まとめ

いざ作り出すとわからないこといっぱいありますね。

Web特有の考え方にしくはっくしながら作っています。

 

入力 → 入力チェック → DB操作 → 結果表示

これがWebにおける基本的な流れかなって気がします。

同じ考え方で他の機能も作っていけそうなので、一気に駆け抜けようと思います!

 

 

今回の成果

github

 

機能一覧

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

 

つづく

-お題で開発
-, , , ,


comment

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

関連記事

環境構築【お題で開発:2】

前回設計が終了したので、開発していき・・・たいところですが。 開発環境をきちんと準備しておかないと、のちのち死にます。 昔であれば、XAMPPやLAMPP、MAMPでテスト環境を開発機に直に構築してい …

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

前回プロフィール編集機能を作りました。 今回は投稿(ツイート)機能を作っていきます。 メインとなる部分ですね。   今までの応用でなんとかなるのですが、せっかくなのでちょっと違うことをしてみ …

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

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

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

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

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

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

Top