Lesson14「実践!ログインシステムを作ってみよう!part1」

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

本入部はこちら

学習概要

WEBサービスに必ずある「ログイン機能」を作っていきます!
今回では「Cookie」や「Session」といったデータを保持する機能もイラストで分かりやすく説明します!

補足

ログインが必要です

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

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson14「実践!ログインシステムを作ってみよう!part1」 の内容※SEO用のため読めません

今回からはログインシステムを作っていきましょう前回ユーザー登録のシステムを作りましたがそのファイルを元にして今回作っていきたいと思います前回作ってサンプルフォルダをそのままコピーしてサンプル2を作ってください今回作るファイルが二つになります前回作った INDEX . PHP 名前を変えて login . PHP にして下さいそしてマイページ. PHP これはファイル名様で使いたいと思いますこれ使えるはこちらの二つになります前回作ったこちらのファイル二つを今回は修正していきたいと思いますまた login . PHP からですねまた HTML から見ていきます HTML 内で STYLE CSS を指定していますがこちらは前回と全く同じ内容になっています特に修正する必要ありません HTML で修正した箇所はこちらのフォームタグの中になります前回バリデーションなども表示も含めていたのでかなりごちゃごちゃしてましたけれども今回バリデーションなどはやりませんのでお茶の E メールとパスワードあとは送信ボタンですねお茶だけ表示するようにしています form タグの中身をごちゃのないように変えてください他に修正するところは一番先頭の PHP タグで囲まれたところになります PHP ブロック内の先頭に行こちらは前回と同じになりますエラーを表示させるための記述ですねそしてその下押すと送信がされた場合の分岐こちらも前回と同じになりますを抱えている点はポスト送信された場合の中の処理になりますお茶の中の処理に関しては今回大幅に変更されてますのでこちらの方を変更しておいてくださいね会話ユーザ登録フォームから送信された情報に対して変な文字だとか記述がないかどうかバリデーションというチェックをしていましたけれども岡谷簡素化のために歩いていますコードかけ終わったら保存をしましょう次マイページのソースを見ていきます前回と違って決して見るだけではなくて銭湯の方にこちらのような PHP のブロックを作っていますお茶の PSP ブロックの中最初の2行はさくらの下同じですねリラを表示するための記述になりますそしてマイページ内の BODY タグ内ですねこちらをちょっと変更していますこちらも PHP ブロックを作って if ELse という形で if ELse 分岐を作っていますこれはもしログインしていた場合していなかった場合にマイページの内容の表示を変えるためにこういた書き方をしていますこちらの内容に変えてください終わったら保存しましょう日産2 login . PHP をブラウザで開いていますそうするとこちらのような画面が出てくるはずです僕は前回作ったデータベースの情報と合っているかどうかを判定したいと思います前回作った users Table をひらいてくださいそうすると前回登録した E メールパスワードという情報が出てきます E メールパスワードに合ってるかどうかをチェックしていればマイページを表示するという処理をしたいと思いますまずは今ログインしていない状態でマイページ. PHP を開いてみたいと思いますこのようにログインしていないと見れませんという表示がされます実際にログインしてみたいと思います E メールパスワードを入力して送信ボタンを押しますそうするとこのようにマイページが表示されます表示したマイページと同じページですけれども表示されてる内容が変わってますねこの世にログインしてるかしていないかを判定して同じページでもページの内容を変えたいだとかページ自体を表示しないということもできます一度ログインした状態で先のと同じように直接 URL でマイページを指定していきたいと思いますそうすると作業とは違ってマイページをちゃんと見ることはできますねこの世に一度ログインした情報を保存しておくという機能も今回作っていきますよ実際のコードの説明をしていきたいと思いますまたはログインページのコードからですね今回送信される値は二つになりますお茶のホームから送信された値ですね送信する form の name 属性は E メールというものとぱすーというものを指定しています PHP ブロックの中を見ていきます最初の2行はさけども説明しましたが エラーを表示するかの人形になりますそしてそのした部分で前回と同じくポスト送信された場合の処理を変えています前回 Post 送信された勝利の中ではまず最初にバリデーションのチェックを行っていましたが後から観測のために歩いていますまず最初にやっているのは送信されたポストの中身を取り出して変数へ保存していますそしてその次はデータベースで接続する準備ですこれは前回と全く同じものですね接続先のデータベースは前回と同じく PHP サンプル01というデータベースに接続していますそしてその情報をもとにこれも前回と全く同じですね pdo オブジェクトを生成してデータベースに接続していますそしてその次も前回と同じ手順ですが SQL 文を作っています私中身の SQL が前回と異なります SELECT というものを使っていますこれはデータベースのテーブルの中を検索するための SQL ですねセレクトの後に検索で引っ張って期待大将のカラムを指定します米印てやるとすべてのカラムを取得するような形になりますそして from と続けてその後に検索したい対象のテーブル名を指定します僕は users Table を検索するのでユーザーズですねとしてメアド変えてその後に検索したい条件を指定しますまだ E メールのカラムに合ってるかどうかということで E メール=という形にしますそして and という形で条件をさらに追加しますぱすーとよからむと同じかどうかですね安納つけると勝つという意味になりますのでその場合メールカラムとパスワードカラム両方同じかどうかという形の検索条件していますそしてその SQL を実行します実行する際にプレースホルダを使って虫食いだったら何また入れてあげます E メールにはホームで送信された E メールの値ですね Email の変数を入れてあげますそしてコロンパスには変数 path を入れてあげますそして検索した結果を取り出します検索した結果を取り出したい場合には先の実行した SQL 変数ステートメントに対して返事というメソッドを実行しますそして引数としてかっこの中に TD 用として設置あそくというものを指定しますこれはお決まりのパターンなのでそのままで覚えてくださいをすることで検索した内容を取り出すことができます内容取り出したら Result という中に変数の中に詰めています検索した結果というのは検索にマッチしていた場合にはその情報が入っていますそして検索に引っかからなかった場合そういった場合には検索結果には何も返ってきませんのでこちらの if 文を使ってその検索結果が0かどうかという判定をしています0でなかった場合検索の経過が入っていた場合中の処理を行います検索結果が入っているということは入力した E メールパスワードがあっているということになりますあっていた場合に行う処理はまずセッションというものを使っていきますセッションというのはブラウザに情報を保存する仕組みになりますセッションを知るためにはまずクッキーという仕組みを知る必要があります Cookie というのは裏技にちょっとした情報を保存しておけるものになりますデータベースに保存するほどでもないちょっとした情報を保存しておけるものですね例えばショッピングサイトなんかでブラウザを閉じてまた立ち上げてサイトを訪れたとしてもパートに前回追加した商品が残っている場合がありますを言ったものはクッキーを利用してブラウザに商品の情報を保存しておくことで実現していますイメージが湧きにくいかと思うので図で説明したいと思います小にブラウザとサーバーというものがあります私たちはページを見る時にはブラウザからサーバへこのページが欲しいとリクエストというものが出ていますブラウザから容器を受け取ったサーバーは要求されたページをレスポンスという形で返しますこの時にサーバーはクッキーというものを作ってそれも一緒にくっつけてブラウザい返しますそのクッキーにはさけどちょっとお話ししたカートの商品情報だとかログインした際のユーザー情報なんかを保存しておきますそしてそのクッキーを受け取ったブラウザは次のリクエスト地からもらったクッキーを一緒にくっつけてリクエスト投げますそしてサーバーはその受け取ったクッキーの中身を取り出してその情報をもとにいろいろな処理を行うことができます私たちの日常に例えるとクッキーとは病院の診察券のようなものになりますた私たちが病院を訪れたとして を発行しますその診察券には名前だとかいろんな情報が書き込まれてますね診察券を使って次回から病院に来た際にはその診察券を受付に提示しますそうすることで病院側この人が誰かということが分かってそういった情報をもとにいろいろな業務を行うことができますもしこういった診察券という機能がなかった場合には毎回病院を訪れる場合に過去の診察日だとか名前というもの伝えなければいけません大分手間を省くことはできるというのはクッキーという仕組みになります5回使うのはそのクッキーを応用したセッションという気になりますたけどのクッキーというのはブラウザとサーバ間で値を直接やり取りしますサーバーリクエストを投げるために診察券を出しているわけですね他のでもしその診察券を第三者の誰かに見られてしまった場合には名前だとか個人情報がバレてしまいますその他セキュリティ観点から考えられたものがセッションという機能になりますセッションというのはセッション ID というものさバーガーで発行してセッション ID をおくっきー内に保存してそれを提示するやり方になります例えばログインページからユーザー情報をサーバーへ送信したとしますリクエストを受け取るサーバーはセッション ID というものを発行して受け取った情報をセッション ID とともに Web サーバー内に保存しますそして発行したセッション ID を送っ機の中に詰めて次のページマイルとともにそのクッキーを渡しますクッキー受け取ったブラウザは次のリクエスト力とのもらったクッキーをさばい渡しますそしてブラウザからクッキーを受け取ったサーバーはそのクッキー形セッション ID が入ってますのでそのセッション ID を元にサーバーに保存しておいたユーザー情報を取り出すことができますたどんな銀行の整理券のようなイメージですね私たちは銀行に行って何か講座などを開くとしますそうすると名前だとか連絡先の情報を記入しますね受け付けた銀行は整理券を発行しますそしてその整理券の番号とともに受け取った顧客情報保管しておきますそして私たちで整理券を渡しますねそしてその後は私たちは受付行くたびに整理券を見せることになります受付の人はその整理券の番号を元にして自分たちで保存しておいた顧客情報を検索してその情報をもとにいろんな業務を行うことができますこの情報をブラウザの方で保存をしないでサーバーの方で保存しておいてセッション ID という ID を発行するというものがセッションという仕組みになりますもしそのセッション ID のやり取りを第三者が盗み見たとしても入りしか分かりませんので何の情報かというものがわからないんですねこの2セキュリティ的にも安心できるのがセッションという仕組みになります元のソース説明に移りますが今までに説明したセッションというものを使うのでこのセッションスタートというメソッドを使ってセッションを使う準備をしていますこれはセッションを使う前に必ず実行しなければいけませんそして誰がセッションとして角括弧の中にソーセージを指定します岡谷ログインという名前にしましたこれはセッション取れば入れるという形式になっているんですねセッション配列の中に着いログインというものを作ってその中に2ルートで与えられていますもうすることで Web サーバー内にあるセッションという領域に値を保存することはできますそして前回もこれやりましたがマイページへ移動するヘッダーという雌を使っていますちなみにこの人なんですが減ったメソッドを使う前にこうだとか画面に文字を表示する兄のメゾット後は全角の空白なんかですねいったものはダメに先に表示されてしまうのでそういったものを使ってしまうとエラーになってしまうので注意してください画面に何か表示される前にヘッダメスを使わなければいけないということでセッションを使うことでセッションに値を保存して自動的にセッション ID というものが発行されます僕はここまでにして次回はマイページを好みていきたいと思います