WEBサイトは、365日24時間、全世界に向けて公開されているのが一般的です。

通常のWEBページの場合はいつでも誰でも見られる事を前提として提供されますが、WEBシステムの場合は利用者を制限したい場合が殆どです。

この章からは、PHPでのアクセス制限実装の基礎を勉強していきましょう。

※この記事は執筆・公開から3年以上経過しています。記事の情報が古くなっている場合がありますのでご注意ください。

公開日時:2016/02/11 17:33
最終更新:2019/12/10 00:35

最初のPHPプログラム「ログインフォーム」~ 365日の紙PHP(4日目)

そろそろ「こう毎日インストールばかりじゃつまらない」と思い始めた頃かと思います。

では、今日からコードを書いていきましょう。ただし、今日はまだPHPは書きません。モックアップを作るためのHTMLです。

これから作るのはログインフォームです。インターネットは誰でもアクセスできるので、決められた人だけがアクセスできる仕組みが欲しくなることも沢山ありますね。アクセスを制限する方法は様々ありますが、これから数日に渡ってPHPを使った初歩的かつ、実用的なログインフォームの作り方を学んでいきましょう。

画面イメージ

まず画面のイメージをお見せします。1枚目はログインフォーム。

ログイン画面ラフスケッチ

2枚目はログイン後の画面です。

ログイン後の画面ラフスケッチ

イメージ掴めたでしょうか?

モックアップ制作

イメージが掴めたらモックアップを制作します。モックアップとは実物とほぼ同様に似せて作られた模型のことです。プログラム製品は作るのに手間暇がかかるので、いきなりプログラムコードを書き始めるのではなくモックアップを作って使用感を確認し、プログラミング段階で無駄な手戻りが起こらないようにします。

まず、NetBeans IDEを起動しましょう。

NetBeansの起動

ファイルメニュー > 新規プロジェクト を選択してください。PHPを選択して「次 >」をクリックします。

新規プロジェクトの作成

プロジェクト名は「firstLogin」にしましょうか。最初のログインプログラムです。

ソースフォルダは

Mac OS Xの方はMAMPフォルダ内にwwwフォルダを作って指定してください。(参照でファイルブラウザで目的の場所を開いてからフォルダを作ります)

/Applications/MAMP/www/firstLogin

Windowsの方はXAMPPフォルダ内にwwwフォルダを作って指定してください。 (参照でファイルブラウザで目的の場所を開いてからフォルダを作ります。ドライブとxamppフォルダへのパスはインストール時に指定したものに合わせてください)

C:\xampp\www\firstLogin

プロジェクトのディレクトリ設定

プロジェクト名とfirstLoginへのディレクトリパスを指定したら「終了」でプロジェクトを作成します。

プロジェクト作成直後の画面

index.phpが開いており、そこにHTMLの雛形が作られているはずです。

では、モックアップを制作していきましょう。

記述するのは

    <body>
        <?php
        // put your code here
        ?>
    </body>

このタグの中です。

タグはHTMLの内容を記述するタグです。その上のタグはHTMLの記述言語やタイトル、必要な外部ファイルといったそのページのメタ情報を記述するタグです。メタ情報とはデータがどんな内容なのかを説明するデータのことです。

まず、次の赤枠の部分のHTMLコードを書きます。

制作箇所

    <body>
        <div id="login-panel">
        </div>
    </body>

タグはそれ自身は特に意味を持っていませんが、タグに囲まれた内容をひとかたまりとして扱うことができるコンテナのようなものです。

idを指定する事でこの<div/>タグの識別子で好きな名前をつけることができ、プログラムからこの<div/>タグを操作するときに利用します。

似たものに、classとnameというものがあります。

違いですが、idは1つのページの中で同じ値を2つ以上作ってはいけませんが、classはいくつでも同じ値を指定できます。

nameも同じ名前を複数指定できますが、この値でサーバーに送ったデータを取り扱うので、配列を利用する場合を除いては1つのフォームの中に同じnameを指定すべきではありません。

id="login-panel"を囲う記号はダブルクオーテーションを利用しましたが、囲いの前と後ろが同じであればシングルクオーテーション ' でも構いません。

この<div/>タグの中に、入力値をサーバーに送信するための<form/>タグを記述します。

    <body>
        <div id="login-panel">
            <form action="login.php" method="POST">
            </form>
        </div>
    </body>

タグのactionは、入力された内容の送信先を記入します。この後で、login.phpというファイルを作成することになります。

methodは、HTTP通信で規定されているメソッドのうち、POSTまたはGETが利用できます。

英語の通り、GETは何らかの情報を取得する場合、POSTは情報を送信してサーバーに反映する場合に用いられるべきですが、実際にはGETで情報をサーバーに送ることもありますし、POSTで何も送信せずに取得だけすることもできます。

HTTP/1.1 では他にもPUT、DELETE、HEAD、OPTIONS、TRACE、CONNECTを規定しているようですが、HTMLの<form/>ではGETとPOSTしかサポートされません。

さて、<form/>タグができたら、次は中にIDとパスワードの入力欄、そして送信ボタンを入れましょう。

    <body>
        <div id="login-panel">
            <form action="login.php" method="POST">
                ID : <input type="text" name="user_id" value=""><br>
                パスワード : <input type="password" name="pass" value=""><br>
                <button type="submit">送信</button>
            </form>
        </div>
    </body>

<input/>タグは様々な入力項目を作るためのタグです。type="text"で、1行のテキストを入力するフィールドを作成します。複数行の入力が必要な場合は<textarea/>タグを用います。

先ほど説明しましたが、ここでname属性が出てきました。IDフィールドに入力された値を、user_idという識別用の名前で送信することを意味しています。

valueに文字列を指定すると、ページ表示をした段階でその値が入力フィールドに表示されます。IDはページが表示された後でユーザーが入力するので、まずは""として空にしておきます。

<br/>タグは改行タグです。

パスワードの<input/>タグのtypeはtextではなくpasswordです。こうすると、入力した文字がマスクされ画面上で識別できなくなります。パスワードは重要な情報なので他人に見られてはまずいですからこのようにします。

勿論、サーバーに送られるデータはマスクされていない生データです。このタグのnameはpassなので、passという識別用の名前で入力された値が送信されます。

<button/>タグは<input type="submit">や<input type="button">のように<input/>タグを使うこともできますが、ボタンの表示内容の自由度が高いので<button/>タグの使用を推奨します。

これで<form/>タグは終了です。

あとはコピーライトを記述しましょう。ご自分のコピーライトに変更して構いません。

        <div id="login-panel">
            <form action="login.php" method="POST">
                ID : <input type="text" name="user_id" value=""><br>
                パスワード : <input type="password" name="pass" value=""><br>
                <button type="submit">送信</button>
            </form>
        </div>

        <div id="footer">
            Copyright c 2016 feijoa.jp All rights reserved.
        </div>

さて、ここまでできたら内容を確認します。

まず、Apacheサーバーの公開ディレクトリをこのプロジェクトに設定しましょう。

Apacheのドキュメントルート設定

MAMPの場合

MAMPの方はMAMPの設定からWEB サーバタブを選択し、「ドキュメントのルート」の右矢印をクリックしてください。

MAMPのコントロールパネル

MAMPのサーバ設定画面

矢印をクリックするとファイルブラウザが開くので、最初に指定したこのプロジェクトソースのフォルダ /www/firstLogin フォルダをドラッグアンドドロップしたあとOKで反映させてください。

MAMPのドキュメントルート設定

XAMPPの場合

XAMPPの方はXAMPPのコントロールパネルからApacheのConfigボタンでApache (httpd.conf) を選んでください。

Apacheの設定ファイルであるhttpd.confが開きますので以下のような箇所を探して下さい。ドライブとXAMPPのディレクトリパスについては、インストールの時に変更していた場合それが反映されています。

DocumentRoot "C:/xampp/htdocs"
<Directory "C:/xampp/htdocs">

これを、今回のプロジェクトのソースディレクトリに書き換えます。

DocumentRoot "C:/xampp/www/firstLogin"
<Directory "C:/xampp/www/firstLogin">

書き換えたら保存してください。Apacheを再起動すると設定が反映されます。

これで、Apacheのドキュメントルートがこのプロジェクトのフォルダに設定されました。ブラウザを開いて http://localhost/ と入力することで、いま作成してるプロジェクトのファイルが見られるようになっています。

プロジェクトURLの設定

次は、NetBeansでのプロジェクトURLの設定です。

NetBeansのプロジェクトタブでfirstLoginプロジェクトを右クリックしてください。一番下に「プロパティ」というメニューがありますのでこれを開いてください。

プロジェクトのURL設定

「プロジェクトURL」が http://localhost/firstLogin/ になっていると思います。先ほどドキュメントルートを/www/firstLoginに設定したのでhttp://localhost/と入力するだけでfirstLoginディレクトリにアクセスで出来るようになっていますから、ここをhttp://localhost/ に書き換えます。

プロジェクトURLの設定

さて、ではこのモックアップを表示してみましょう。左の赤枠でお使いのブラウザを選択し、右の赤枠で実行です。

WEBブラウザの起動

どうでしょうか?

表示されたログイン画面

こんな画面が表示されれば設定は成功です。

見ての通り、最初のイメージとは随分かけ離れていますね。

明日はこの画面にスタイルシートを適用させてデザインを最初のイメージに近づけていきます。

お疲れ様でした。

記事リンク