後期第03回 - oddmutou/jugyo-2025kyototech GitHub Wiki

やること

この授業では、セッション機能を用いて、ログイン機能を実装してみます。

ログイン機能を実装するために、先に簡単な会員登録機能も実装します。

会員登録/ログイン機能はSNSなどでもよくある機能ですよね。みなさんがよくつかうサービス、InstagramやTwitterなどの会員登録やログインのフローを思い浮かべながら進めてもらうと理解しやすいとおもいます。

(かなり簡単にパスワードの暗号化もせず進めます。暗号化については次の授業でやります。)

会員登録

まず簡単に、会員情報を保存するテーブルをデータベースに作ります。

MySQLに接続 (mysqlコンテナ内で mysql コマンドを実行) して、以下のようなSQLを実行します。

CREATE TABLE `users` (
  `id` INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `name` TEXT NOT NULL,
  `email` TEXT NOT NULL,
  `password` TEXT NOT NULL,
  `created_at` DATETIME DEFAULT CURRENT_TIMESTAMP
);

会員情報用テーブルを作成できたら、そのテーブルにINSERTする画面、つまり会員登録フォームを作りましょう。

実際のサービスで会員登録機能を作成する際は、登録されるメールアドレスに対する所有確認作業を行いますが、この授業ではスキップします。

vim public/signup.php

内容はこんなかんじ https://github.com/oddmutou/jugyo-2025kyototech/blob/ae34a5ff445cdd1937238c094b9ca953470b9ae0/koki_03/public/signup.php

会員登録完了画面も作ります。

vim public/signup_finish.php

内容はこんな感じ https://github.com/oddmutou/jugyo-2025kyototech/blob/ae34a5ff445cdd1937238c094b9ca953470b9ae0/koki_03/public/signup_finish.php

ログイン

メールアドレスとパスワードを入力し送信できるログインフォームを作ります。

ログインフォームから送られてきた情報を元に、該当のメールアドレスは会員情報テーブルに登録されているか、パスワードが合っているか、をチェックします。

会員情報が存在し、またパスワードがあっている場合は、セッションにログイン情報を保持させます。

ログイン画面を作成します。

vim public/login.php

内容は https://github.com/oddmutou/jugyo-2025kyototech/blob/89678469d8f51d6defe408b2f3235195646c69df/koki_03/public/login.php

ログイン完了画面も続けて作成します。現在ログインしている会員の情報を閲覧できるようにもしてみます。

vim public/login_finish.php

内容は https://github.com/oddmutou/jugyo-2025kyototech/blob/89678469d8f51d6defe408b2f3235195646c69df/koki_03/public/login_finish.php

演習

動作例: http://52.87.186.22/signup.php , http://52.87.186.22/login.php , http://52.87.186.22/edit_name.php

演習1

今回作った会員登録画面では、同じメールアドレスで複数の会員情報を登録できてしまいます。

既に登録してあるメールアドレスで登録しようとした場合は会員登録を中断し、「既にこのメールアドレスは登録されています」と表示するように改修してみましょう。

実装例: https://github.com/oddmutou/jugyo-2025kyototech/commit/460f70eabb5d6a1e8bf915f3d7216bcca09fe7cc

演習2

ログインしている状態で、ログインしている自分自身の会員情報の「名前」(name カラム) を変更できる機能を持つ画面を作ってみましょう。

実装例: https://github.com/oddmutou/jugyo-2025kyototech/commit/2b4eb86b5c094815a49a093375980102560ebca7