HTML PHP

PHPで会員登録&ログイン機能を作成してみた

2020年8月27日

PHPで会員登録&ログイン機能を作成してみた

PHPを使って会員登録機能とログイン機能を実装しました。

重複登録防止の機能も追加しております。

参考にしていただけたら幸いです。

今回のテーマ

  • PHPとMySQLを使って会員登録機能を実装
  • PHPとMySQLを使ってログイン機能を実装

当サイトではウェブサイトやブログに関する記事を毎日投稿しています。
他の記事も合わせて読んでいただけると嬉しいです。

PHPで会員登録機能を作成

まずは会員登録機能についてご説明します。

ビジュアルの作成

ビジュアル

完成画面はこんなかんじ



ここでは新規会員登録機能を作成しますので上画像の下半分のビジュアルを作成しています。

まずHTMLコードでテキスト入力欄とボタンを作っていきます。

ここではフロントエンドの操作だけですのでPHPを使うこともないのでそんなに時間を掛けなくても実装できると思います。

*完成形ではCSSライブラリを使用しています。

データの追加

続いてconfig.phpにデータベース接続に必要な情報を記載しておきます。

接続情報をこのファイルに書いておけば、それ以降はconfig.phpを参照するだけでデータベース接続をカンタンに済ませることが出来ます。

注意ポイント

データベース名とテーブル名を間違えないようにしましょう。

データベースの中にテーブルが複数存在するイメージです。

続いてデータベース接続情報を元にMySQLに接続し、入力してもらった情報を追加する処理を行います。

PHPとHTMLを組み合わせたコードですので長いですが少しずつ解いていけばそんなに難しくありません。

1~15行目ではデータベース(MySQL)に接続して、メールアドレスやパスワードといった追加するデータを設定します。
データベースに接続できなかった場合はエラーメッセージが表示されます。

16~20行目では、入力されたメールアドレスのバリデーション処理。

21~27行目ではパスワードの正規表現を行っており、半角英数字を1文字以上含んだ8文字以上のパスワードを設定してもらうための処理です。
条件に合わないパスワードを設定した場合アラート文が表示されるようになっています。

28~36行目ではデータベース内のメールアドレスを取得して、重複していない場合のみデータを登録します。
データベースの登録にはinsert into構文を使います。
このコードはPHPでは頻繁に使用する言語ですのでぜひ覚えておきましょう。
PHPの構文はこれで完了です。

HTMLコードではメールアドレスを新しく登録する場合と既に登録されている場合とで処理を分けています
(処理を分ける際はPHPのif文を使います)

37~52行目ではメールアドレスを新規登録する際に表示させる画面
56~72行目ではメールアドレスが重複している場合に表示させる画面
となっております。

PHPでログイン機能を作成

新規会員登録機能でデータベースにデータを追加できるようになったら、ログイン機能を実装していきます。

ビジュアル

完成画面はこんなかんじ

ビジュアルの作成

ここではログイン機能を作成しますので上画像の上半分のビジュアルを作成しています。

こちらに関してもHTMLでビジュアルを作成しているだけですので難易度は低めです。

ログイン機能

ログイン機能でもconfig.phpを使用していきます。

新規会員登録機能のときに作成したもので問題ありません。

こちらに関してもデータベースとの接続によってログインをしていきます。

1~10行目ではconfig.phpを使ってデータベース接続をしています。
もし接続に失敗した場合はアラート文が表示されます。

11~19行目ではPHPを使って入力されたメールアドレスがデータベース内に存在するか検索しています。
検索する際に使用しているselece from where構文はSQLで頻繁に使われる表現ですので覚えておきましょう。

20~38行目では入力したメールアドレス・パスワードが間違っているかに応じて処理を分けています。

31~33行目では唯一JavaScriptを使用しています。
history.go(-3)とは3つ前のページに戻る処理を意味しています。

つまりログインが完了した状態でログインする前のページに移動する処理になります。

必要のない方は削除しても大丈夫です。

まとめ:PHPで会員登録&ログイン機能を作成してみた

PHPではフォームを使って会員登録機能やログイン機能を実装できます。

みなさんもぜひ実装してみてください!

なお、MySQLなどのデータベースを用いたコードを実装するにはVPSサーバー構築専用ドメインを取得する必要があります。

私は普段VPSサーバーはさくらのVPSを、専用ドメインはお名前.com愛用しています。

よかったら下のリンクからご利用してみてください!

 

わからない部分がある方はお問合せフォームで質問して貰えばすぐに返信します。

今サイトではこれからもウェブサイト運営やプログラミング関連の情報を発信しております。

他の記事も合わせてご覧いただければ幸いです。

  • この記事を書いた人(執筆者情報)

wagtechblog

プログラミングとWordPressに溺れた私立大学生。フリーランスのiOSエンジニアとしてアプリ開発しています。その傍らWeb集客のベンチャー企業で勤務。主にフロントエンドエンジニア・WebアプリケーションエンジニアとしてWebアプリケーション開発、SEOマーケティング、データビジュアライゼーションといった業務もしてます。好きな言語はSwiftとPythonとPHPとRuby。趣味はApex Legendsとゲーミングデバイス集め。

-HTML, PHP

Copyright © wagtechblog All Rights Reserved.