ログインフォーム~  365日の紙PHP(4日目)

近代的なPHP開発を行うために

おススメ!記事
Raspberry Pi 用「HAL」で、
カップラーメン・タイマーを作ってみよう!
ラズパイDIYの決定版! ソケットサーバー「HAL」をご紹介します。

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

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

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

画面イメージ

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

altテキスト

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

altテキスト

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

モックアップ制作

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

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

altテキスト

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

altテキスト

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

ソースフォルダは

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

/Applications/MAMP/www/firstLogin

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

C:\xampp\www\firstLogin

altテキスト

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

altテキスト

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

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

記述するのは

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

この<body/>タグの中です。

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

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

altテキスト

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

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

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>

<form/>タグの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 サーバタブを選択し、「ドキュメントのルート」の右矢印をクリックしてください。

altテキスト

altテキスト

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

altテキスト

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プロジェクトを右クリックしてください。一番下に「プロパティ」というメニューがありますのでこれを開いてください。

altテキスト

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

altテキスト

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

altテキスト

どうでしょうか?

altテキスト

こんな画面が表示されれば設定は成功です。見ての通り、最初のイメージとは随分かけ離れていますね。

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

お疲れ様でした。

この記事へのコメント

※現在コメントはMarkdown記法が強制です。>>Markdown の書き方


この記事に返信

このコメントに返信