Lesson11「実践!ユーザー登録システムを作ってみよう!part1」

この練習には本入部生のみ参加できます。

本入部はこちら

学習概要

WEBサービスには欠かせない、「ユーザー登録」の機能を実際に作っていきます!

補足

ログインが必要です

この練習でわからない所を質問する※部活外の質問はできません

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson11「実践!ユーザー登録システムを作ってみよう!part1」の内容※SEO用のため読めません

Web サービスによくあるユーザー登録機能を作っていきたいと思います5回作っていくシステムの内容はこちらになりますいつまでは要件定義といったらんかいになるんですけれども要件定義というのはお客さんからこういうシステムしてほしいというような内容をまとめたものになります今回作っていくシステム内容はですねまずユーザー情報をユーザー登録フォームから入力してデータベースで保存するシステムを作っていきますユーザー登録時に入力する情報は E メールとパスワードにしますパスワードが間違って入力されることを防ぐために2回入力してもらうような形にしますそしてパスワードはですね6文字以上半角英数字のみ使えるような形にしますまたねしねこういったユーザーが入力する情報というのはユーザーによって間違った情報を入力する可能性があります6文字以内で入力してしまったり E メールの形式でないもので入力してしまったりする可能性がありますのでそういった入力された情報をこちらの方でチェックをしてあげて間違って入力されていた場合にはエラーのメッセージを表示させるようにしますもし入力された情報に問題なければユーザー情報データベースで保存してマイページ画面を遷移させる移動させるような形にしたいと思います実際のシステムの全体の流れはこちらになりますまずユーザー登録画面からユーザー情報入力されてそれが送信されますそして送信された情報を PHP で書いたプログラムで受け取りますとして受け取った情報をもとにですねその情報をチェックしますバリデーションチェックと呼ばれものですねコラ JavaScript jQuery 不でも最後でやりましたこのバリデーションチェックで引っかかって問題があればエラーを実際に画面に表示させますそして特にバリデーションチェックで問題がなければデータベースでユーザー情報を保存しますそしてデータベースでユーザー情報を登録した後にマイページ画面を遷移させますずにするとこんな感じですねまずユーザー登録画面からユーザー情報が入力されますそして送信ボタンが押されてその情報邦画送信されます送信された情報をもとにその情報が形式が間違っていないかどうかチェックを行いますもしテックにひっかかればエラーを返してユーザー登録画面にエラーメッセージを表示させます特に問題がなければデータベースで保存してあげてそのままマイページへ画面を遷移させるという流れになります実際にそのシステムを作っていくための流れとしてはまず一つ目はユーザー登録ホーム画面とマイページ画面を作ってありますそして二つ目に実際のバリデーションチェックのロジックですねプログラムを作ってあげますそしてデータベースとテーブルを実際に作ってあげますそしてその作ったデータベーステーブルにですね情報を保存するロジックプログラムを作っていきますここから実際にシステムを作っていきたいと思いますまずユーザー登録フォームとマイページの画面を作っていきますまずはシステムを保存していくフォルダを作っていきますアプリケーションを開いてその中のまんぷを選択してくださいその中に HT ロックするというフォルダがありますのでその中にフォルダを作りますこれだ名前はなんでも構いませんが今回はサンプルということになりますこの中に画面のファイルを作っていきます4回も作ってありますけれども INDEX . PHP というものとマイページ. PHP というものを作ってありますまずはユーザー登録画面を作っていきますこちらにメールをまず書いてみてください書き終わったら保存をしましょう割れ目は何でも構わないんですが今回は INDEX って名前にしてあります保存するファイル形式は PHP 形式で保存してくださいおっぱいは簡略化のために画面のスタイルに関しては CSS のファイルを作らずに HTML の中にそのまま直接変えてしまっていますこちらのスタイルタイムで囲まれたところが CSS の記述になります次に毎年の画面を作っていきますを上映しているの行動変えてみてくださいかけ終わったら保存をしますファイル名はこちらもなんでもけっこうなんですが今回はマイページというファイル名にしてありますそしてファイル形式は PHP のファイル形式で保存してください画面が出来上がったら実際にブラウザで画面を開いていますブラウザで表示されている URL こちらを入力すると画面が表示されますローカルホスト8888サンプルフォルダの中の INDEX . PHP を開きますという意味なりますとの URL を指定するとこ茶の画面が開きますそしてマイページを押すとマイページの画面が表示されますたにまいて夜中に書いてある家メールだとかパスワードこれは HTML で直接べた書きしているものなのでユーザー登録画面から入力された情報を表示してるわけじゃないので注意してくださいここからマイページで入力された情報を表示させる処理は作りませんけれども余裕のある方は作ってみましょう 今度はバリデーションのロジックを作っていきますバリデーションチェック内容は公開こんな形にしたいと思いますまずポスト送信されてるかどうかのチェックですこれはユーザー登録フォームからユーザー情報が送信されているかどうかチェックになりますそして送信された情報がすべて各フォームの中身がちゃんと入ってるかどうか入力されているかどうかチェックしますまた E メールフォームの場合は E メールの形式がどうかですねこれをチェックしていきますとしてパスワードとパスワード再入力のフォームの値が同じかどうかをチェックしますその後にそのホームの中身が半角英数字かどうかをチェックしますそして最後にそのホームの中身値が6文字以上かどうかというのをチェックしてきますたべを作ったユーザー登録画面のファイル INDEX . PHP を開いてそこに実際のプログラムを変えてきます HTML の一番上にですねこちらの行動を変えてみてください1 P のコードになります外見やすいように小さくしたいと思います書き終わったら次にフォームの中にも行動変えていきますお茶の行動変えてみてくださいほら実際にエラーメッセージを表示させるためのエリアになります HTML の Span タグの中に PHP のコードが書いてありますこのコードは E メールフォームのエラーメッセージを表示させるためのものなので同じようにパスワードのホームに対しても作ってあげますそしてパスワードの再入力フォームに対しても同じような形でエラーメッセージを表示させる行動変えてあげます次に表示させるエラーメッセージを赤色にしたいのでスタイルシートをちょっと追加します style タグの中にこちらの行動追加してみてくださいこれはクラス属性エラーメッセージの要素に対して文字色を変えるためのものですねバリデーションのロジックは完成になります全体見るとこんな感じになってますね開けたら保存押して画面を表示させてみましょう画面の更新をしますそうすると送信ボタンを押した時にこちらのようなエラーメッセージが表示されます他にも入力の内容によって色々なメッセージが表示されます入力された場合にはマイページに刺すような形になっています実際に子供中身を見ていきたいと思います今回追加したのはまずこちらの PHP のコードですね中身を見ていくとまずこちらの人形が開かれていますこれは画面にですねエラーだった場合にエラーメッセージを自動的に表示させるためのものになります HP がで自動的にコードに誤りがあればそこの部分に対してエラーメッセージを自動的に表示させてくれるというものですねエラーには軽いレベルのエラーからプログラムが止まってしまうな重大なエラーまでありますエラーレベルと呼ばれているんですがこの格好の中で実際その errorlevel 表示させたえらレベルを指定しますよかわいいよなので全てのエラーレベルのメッセージを表示させるような形になっていますそして実際にしたので画面にエラーメッセージ表示させるという設定にしてありますエラー内容実際にファイルに書き出すという方法もあります今回は画面に表示させるという形にしてありますこのように花の人は基本的にもお決まりのようなものなのでこのように書くようにしてください実際に行動に誤りがあった場合どうなるかと言うとちょっとこちらを消してみたいと思いますこの状態で保存して画面を表示させていますそうするとこのようにエラーメッセージが表示されます Notice というのは注意してねというレベルになりますプログラムは動くけども書き方にちょっと注意してねというものですね実際のエラーの内容というのはアンディファインドバリアブルというものですアンディファインドというのは定義されていないバリアブルは変数ですその名前はエラーメッセージと書いてあります何でこの場合だとエラーメッセージという変数が定義されてないけれども使われてますよ大丈夫ですかと言うなよなってますそしてその実際にエラーになっているコード赤い ファイル名がこちらに表示されていますインデックスでちょっと切れてしまってますけれども INDEX . PHP の帰るということですねそしてそのファイルの中の LINE 126日6行目にエラーメッセージが表示されているって事です実際に見てみるとじゃの INDEX . PHP のファイルの中の126行目ですねのでこちらになりますりさ2コード見てみるとエラーメッセージという変数これを表示させるようというえこうというメソッドを使っていますエラーメッセージと変数これ敵してないですけれどもを表示させてしまってます大丈夫ですかという内容ですねわしはまた後でお話ししますけれども超えた形でエラーメッセージを表示させることができますので PHP で変えたコードというのはのは間違いがあった場合にはこういった形でエラーメッセージを表示してくれるのでそこで間違いに気づくことができます5月以降の中身を見ていきたいと思いますそうすると次にはこちらのコードですね if 文が腫れていますこれはポスト送信されていた場合にその中の処理をするという部分になります実はこのフォームタブこの中でですねアクションと元メソッドというものを属性を指定することでフォームの入力された情報の送信先と送信する方法を選ぶことができますアクションというのは送信先ですからにすることで自分自身に送信することになりますたと言わマイページとすればマイページ. PHP のファイルへ値を送信することができますそしてメソッドというのは送信方法になりますこれはポストというものとゲットというものがあります詳しくはネットワーク部の方で話しますが基本的にはホストというもので送信すると覚えてください後から自分自身のファイルに送信したいのでアクションというものは空にしておいてください同じような書き方でアクションというものこれ自体消してしまっても自分自身に送信されます自分自身に送信するというのはどういうことかと言うとですね画面で例えば送信ボタンを押したとしますそうすると情報が送信されますが送信されて自分自身のファイルが開かれます面白くの INDEX . PHP のファイルは開かれるんですねそうすると上から順にまた処理がされていきます処理された時に最初にこの部分があります if 文の条件には良いというメソッドを使って変数に対してからかどうかというものを見ています反転に使っている変数はだらポストと呼ばれ者ですこれは PSP で最初から用意してある整数になります送信された情報というのはこのダラハイフンポストの中に入っています何でこのポストの変数の中に値が入っていれば情報が送信されているんだなということがわかります英語文の条件にはエンプティの前にびっくりマークをつけているのでエンプティーじゃない場合からじゃない場合という形になっていますのでポストという変数に値が入っている場合バリデーションのチェックを行っていくというものですねもし一番最初にこのユーザー登録画面を表示された場合このファイルが上から読み込まれて if 文の条件が判定されますどうすると紹介に表示した画面というのは何も情報が送信されていませんのでバリデーションのチェックというのは何も行われずに進みますそしてその後の htmlファイルが普通に読み込まれていくという形になりますそれでユーザー登録画面が表示されているというものですねそうした場合ですねだけどちょっと出てきましたエラーメッセージという変数がありますこちらですねはい列の形式にしてありますこのエラーメッセージという変数を定義しているんですが配列を定義しているんですがその IF 文の条件がありますので紹介の画面の表示してはこの IF 文の中身という処理はされませんのでエラーメッセージという事態定義されないんですね変するという箱入れ物が作られていない状態になりますその状態で紹介表示時の画面というのはその下の HTML というものを読み込んで行きますそれで画面を表示させていきますそうすると HTML で書いてあるコードの中にもこの世に PHP のコードがあるんですねこの中身を見てみると IF 文を使っていますほら日曜出かける IF 文になるんですけれども IF 文の条件を見てみると empty とやってエラーメッセージとありますエラーメッセージの配列にはキーが E メールというものが指定されていますなのでエラーメッセージと配列の中のキーが E メールというものの中に値が入ってるかどうかというのエンプティーで調べています値の入っていた場合にその中を表示させるというものですねと声の場合だとそもそも配列自体作られていません変数自体作られていませんので空かどうかと言うとそもそも変数に作られていないのでからなんですねその後の変数の表示というのはされませんただそれの一部分を消してしまうとその変数自体が空かどうかというの判定 ママになるので配列が定義されてなかったとしても表示させようとしてしまうんですねない箱を表示させようとしてしまいますなので先ほどみたいにエラーメッセージが表示されるという形になっています間内の子を表示させるということは何も表示されないので特に問題はないんですけれども基本的にない箱を表示させるというのは書き方にちょっと問題がありますのでそれ大丈夫ですからという形で Notice というレベルのエラーが表示されているというものになっています今回はここまでにしたいと思います次回また続きをやっていきます