php ユーザー情報画面をつくろう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

ユーザー情報画面をつくろう

php|2018年11月24日

2018年11月24日
  • このエントリーをはてなブックマークに追加

WEBアプリには、ほぼ必ず存在する機能があります。
それが、会員登録、ログイン、ログアウト、会員情報ページです。

今回は、これら4つを組み合わせて作ってみましょう。

といっても、新しくすべきことは、ほとんどありません。
これまで、やってきた技術を使い、組み合わせることで、ほとんど実現できます。

ポイントとしては、会員登録しないと見れないユーザーページの作り方です。
ログインしていない状態でアクセスしたら、ログインページにリダイレクトされるようにしましょう。

ミッションの内容

下記のファイルを再現してみてください。

基本的には、前回までのファイルを修正して組み合わせると完成します。
ログイン、会員登録、会員ページ、ログアウト、4つのファイルが必要です。

とは言え、ほとんど、前回までの内容の応用で完成します。
これまでの復習も兼ねて、開発してみてください。

■ ミッション

会員登録ページ ( resist.php )
https://base91.net/mission/php/11/resist.php

ログインページ ( login.php )
https://base91.net/mission/php/11/login.php

会員情報ページ ( index.php )
https://base91.net/mission/php/11/index.php

ログアウトページ ( logout.php )
https://base91.net/mission/php/11/logout.php

■ 解答ファイル

以下が、解説になります。

ソースコードの解説

まず、会員登録ページは、前回作った内容から、ほとんど変わっていません。
一箇所、全ページ共通で各ページへのリンクを作っただけです。

resist.php

<div>
    <a href="https://base91.net/mission/php/11/login.php">ログイン</a>
</div>
<div>
    <a href="https://base91.net/mission/php/11/resist.php">新規追加</a>
</div>
<div>
    <a href="https://base91.net/mission/php/11/index.php">ユーザー画面へ</a>
</div>
<div style="padding-bottom:15px;">
    <a href="https://base91.net/mission/php/11/logout.php">ログアウト</a>
</div>

補足ですが、現状、会員登録ページに会員情報がすべて表示されています。
当然ですが、本番では、このページに会員情報が出ている時点でアウトです。
個人情報やプライバシーなど、大きな問題になってしまいます。

今回は練習ということもあり、そのままにしてあります。
実際のサービスとして作る際は、会員情報一覧は表示してはいけません。

login.php

ログインページもほとんど変わっていません。

ただ、一箇所違うのは、ログインが成功したら、ユーザーページにリダイレクトすることです。
前回作った内容は、ログインしたら、ログイン完了の文字を表示させました。
下記が変更箇所になります。

//メールアドレスとパスワード、ともに問題なければ、、
if($mailresult!=="false"&&$passresult!=="false"){
    //セッションにtrueを入れてログイン済みの印を残します。
    //セッションにtrueが保存されていればログイン済み、という意味です。
    $_SESSION["login_pass"] = "true";
    //よく利用するuseridも別のセッションに保存しておきましょう。
    $_SESSION["userid"] = $userid;
    //ログインが成功したら、ユーザーページにリダイレクト。
    header('Location: https://base91.net/mission/php/11/index.php');
};

headerと書かれた箇所が変更箇所です。
ログインしたら、すぐにユーザーページに遷移が基本です。

logout.php

ログアウトはファイルに「セッションを破棄するコード」を書くだけです。
$_SESSION[“login_pass”]がtrueなら、ログインされていると判断します。
なた、$_SESSION[“login_pass”]を破棄すれば、ログアウトになります。

<?php
	session_start();
	session_destroy();
	header('Location: https://base91.net/mission/php/11/login.php');
	exit();
?>

セッションを破棄したら、ログインページにリダイレクトさせましょう。
上記のソースコードだけで、ログアウトが完了します。

index.php

そして、今回肝となるユーザーページです。
今までの内容と比べれば、そんなに難しいことはありません。

<?php
    //データベースを読み込み、
    require_once "functions/db.php";
    //セッションをスタート
    session_start();
     
    //セッション$_SESSION["login_pass"]にtrueが入っていたら、
    if($_SESSION["login_pass"] == "true"){
        //$_SESSION["login_pass"]内のユーザーidを基準にユーザーデータを読み込みます。
        $userdataEdit = "select * from userdata where id = '".$_SESSION["userid"]."' order by id DESC"; 
        $userdataEdit = mysqli_query($mysqli,$userdataEdit);            
        while ($userdataEditArray = mysqli_fetch_assoc($userdataEdit)) {
            $name = $userdataEditArray["name"];
            $age = $userdataEditArray["age"];
            $skill = $userdataEditArray["skill"];
            $mail = $userdataEditArray["mail"];
        };
    }else{
        //もしログインされてなければ、ログインページに移動。
        header('Location: https://base91.net/mission/php/11/login.php');
    }
?>

ログインする時に、$_SESSION[“login_pass”]にtrueの文字列を入れています。
セッションにtrueが入っているかどうかで、ログインしているかどうか、判断しているんですね。

もしtrueが入っていたら、データベースにアクセスしてユーザー情報を呼び出します。
入っていなければ、headerでログインページにリダイレクトしています。

あとは、ユーザー情報をHTMLで表示させるだけですね。

<h1>ユーザー情報</h1>
<ul>
    <li>お名前 : <?php echo $name; ?></li>
    <li>年齢 : <?php echo $age; ?></li>
    <li>スキル : <?php echo $skill; ?></li>
    <li>メール : <?php echo $mail; ?></li>
</ul>

これで、ユーザー情報を閲覧できるページができました。
もしユーザー情報を編集したい場合は、以前作った編集の内容を参考にしてみてください。

これで、WEBサービスの基本である、会員登録のページを作ることができました。
ご自身でアレンジして、自分の好きなサービスを作ってみてください。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら