画面遷移の検証~  365日の紙PHP(6日目)

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

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

昨日はログインフォームの体裁を整えました。

altテキスト

今日はログイン後に表示するページを作ってから、ログイン処理での画面遷移動作を検証してみたいと思います。

まず、NetBeans IDEを起動してからfirstLoginプロジェクトのソース・フォルダを右クリックし「新規」で「PHPのWebページ」を選びます。

altテキスト

index.phpの<form/>タグで action に login.php を指定したので、ファイル名に login と入力し login.php を作成します(拡張子は自動で付きます)。

altテキスト

終了をクリックすると login.php ファイルが作成され開かれます。

altテキスト

ここでは再び、<body/>タグの中にHTMLコードを記述します。

    <body>
<h1>ようこそ</h1>
<p>ログイン処理が成功しました。ようこそ●●さん。</p>
</body>

<h1/>タグは見出しです。<h1/>から<h6/>までの6段階が設定できます。<h1/>は最上位の見出しで、1ページに1つだけ設定することが推奨されています。

<p/>タグは段落タグです。1つの文章の纏まりを指定します。

今はこれだけです。では、Apacheを起動してからNetBeans IDEの画面上部の緑の▲ボタンでindex.phpを実行し、実際の画面遷移を試してみましょう。

まず、昨日作ったログイン画面が開くので、何も入力せずに「送信」ボタンをクリックしてください。画面が遷移し、今作ったログイン後の画面が表示されることと思います。

altテキスト

これで準備が整いました。では、検証していきましょう。

JavaScriptによる入力チェック

ログイン画面をもう一度開きましょう。

先ほどはIDとパスワードに何も入力していないのに「送信」ボタンをクリックしただけでログインしてしまいました。

今度はIDかパスワード欄にカーソルを立て、Enterキーを押してみてください。またログイン後の画面に遷移してしまうことと思います。これは<form/>内にsubmit(送信)を行うボタンがあると、Enterを入力しただけで自動で送信が行われるからです。

勿論、実際にはこの画面遷移の間にIDとパスワードが正しいかの判定をする処理をこの後記述することになるのですが、このようにIDとパスワードが入力されておらず明らかにログインできないことが分かっている状態でも判定を行うのは非常に無駄です。

ですから、IDとパスワードが入力されていない時は送信は行わず、エラーメッセージを表示するようにしましょう。

方法は2つあります。

  • <form/>の送信イベントが発生したらそのイベントをキャンセルし、IDとパスワードを検査して入力されていたら改めて送信を行う。
  • 自動送信を禁止し、「送信」ボタンをクリックしたらIDとパスワードを検査して入力されていたら改めて送信を行う。

違いは、Enterキーで送信を行うかどうかです。ここは好みの問題になってしまいますが、IDを入力してEnterを押したらチェックが行われてエラーメッセージが出た、というのは鬱陶しいので(そういうシステムが沢山あります)、2つ目のように自動送信を禁止してしまい「送信」ボタンをクリックしたところで検査を行うようにしましょう。

そのためには index.php の<form/>タグ内の<button/>の type を submit から button にします。

<button type="button">送信</button>

これでこのボタンは送信ボタンではなく、ただのボタンになりました。ボタンには挙動がまだ何も設定されていませんので、クリックしても画面は遷移しませんし、Enterキーを入力しても遷移しません。

このようにした上で、このボタンの挙動をプログラムで記述していきます。

このプログラムはPHPではありません。PHPはサーバーで動作するプログラムですが、ボタンはユーザーのブラウザ上にあるため、ブラウザで動作するプログラムを書く必要があります。ブラウザで動作するプログラムの種類はいくつかありますが、HTML5ではJavaScriptが一般的です。ここではJavaScriptとjQueryでの操作について説明します。

その前にjQueryとは何かということについて簡単に説明します。jQueryはJavaScriptで簡単にHTMLページを操作するためのライブラリです。JavaScriptで書かれていて、JavaScriptよりも解りやすくずっと少ないコードで同じ事が実現できます。ただ、JavaScriptをラップしているので、動作はJavaScriptよりも少し遅くなります。(ラップというのは色々な用法の事を指しますが、多く使われる例としては必ず行われる複数行の処理を1つに纏めて1つの命令で実行できるようにするものがあります)

それからJavaScriptですが、Javaとは全く別物です。よくJavaScriptの事をJavaと呼ぶ人がいますが、それはレッサーパンダの事をパンダと呼ぶのと同じくらい物事を分かっていません。インドネシアの事をインドと呼ぶのと同じです。「ああ、この人全然知識が無いな」と思われないためにも、絶対にJavaScriptをJavaと呼んではいけません。ちなみにJavaScriptという名前は、当時流行り始めていたJavaにあやかって付けられたといいます。長い物には巻かれろ、という事ですね。

ではこれからJavaScriptとjQueryでのボタンの挙動を設定していきます。

まず、JavaScriptとjQueryからボタンの入力を検知し、IDとパスワード欄の値を調べて<form/>の送信を行うため、それぞれに識別子を設定していきます。

<form/>タグ内のコードを以下のようにします。

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

変更箇所は<form/><input/><input/><button/>タグにそれぞれ別のidを指定しています。

idはJavaScriptでHTMLを扱う上で、一番簡単な識別子です。理由は、idはページ内でユニーク(他に同じものがない事)であるため、簡単かつ高速に要素を特定できるからです。

idと似たものにclassやnameがありますが、これらは複数ある事が許容されているので少し処理が複雑になります。これらにもそれぞれ使い方があるのですが、今回はidでの指定が適切です。

さて、下準備ができましたのでこのidを使って値の検査とフォームの送信を行うプログラムを書いていきましょう。

firstLoginプロジェクトを右クリックし「新規」から「JavaScriptファイル」を選びます。

altテキスト

ファイル名は login.js にしましょう(拡張子は自動で付きます)。

altテキスト

終了をクリックすると login.js ファイルが作成され開かれます。ここにJavaScriptかjQueryのコードを書いていくことになります。

その前に、login.cssの時と同じようにlogin.jsもindex.phpの<head/>内で読み込みを行います。login.cssとは違って<script/>タグで読み込みます。

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="login.css" media="screen">
<script src="login.js"></script>
</head>

これで login.js ファイルが読み込まれるようになりました。

JavaScriptでの検査と送信

ではJavaScriptのコードを書いてみましょう。

まず、ボタンがクリックされた事を判定します。そのためには、ボタンをJavaScriptで認識しなければいけません。

認識するためのコードは次のようになります。

document.getElementById("submit-button");

これがJavaScriptでの送信ボタンの認識です。submit-button は<button/>タグにつけたidです。つまりidで要素を特定しています。「このドキュメントで、エレメントをID "submit-button"で取得する」という意味です。英語そのままですね。

こうして特定した要素にイベントリスナーを登録します。イベントリスナーというのは、その要素に何かイベントが起きるとそれを検知して指定された処理を行うための機能です。

ここではボタンがクリックされたことを検知したいので、clickイベントを登録しましょう。

window.onload = function()
{
document.getElementById("submit-button").addEventListener("click", checkAndSubmit, false);

function checkAndSubmit(){
alert("clickされました。");
}
};

altテキスト

まず、window.onloadですが、ページ読み込みが完了したらfunction(){}内を実行するという意味です。

login.jsはページの表示に先立って読み込みの段階で評価されます。その段階ではまだ<form/>も<button/>も認識されていないため、document.getElementById("submit-button")で値が取得できません。ですから、ページ全体の読み込みが終わるのを待って処理する必要があります。

ページの読み込みが終わった段階で晴れて、addEventListener()でイベントとその処理を登録します。

addEventListener( )内のカンマで区切られた値のことを引数(ひきすう)と呼びます。

第1引数は待ち受けするイベントです。今回はクリックを待つので"click"を指定します。

第2引数は、そのイベントが発生した時に実行する処理を記述します。checkAndSubmitは、後ろに書かれてあるfunction(関数)の名前です。この名前は何でも構いませんが、実行する内容を端的に表した名前が良いでしょう。

ちなみにJavaScriptでは英数字だけでなく、function 値の検査(){ } のように、日本語を指定する事も出来てしまいます。あまりそのようにすべきではありませんので、知識だけにとどめておきましょう。

第3引数はイベントの伝播(でんぱ)形式です。今回はfalseにしましたが、trueにすると上位のHTML要素にイベントを伝播します、という事ですが、今は意味がわからなくても構いません。

さて、では例によってindex.phpを実行して送信ボタンをクリックしてみましょう。"clickされました。"というアラートが表示されたでしょうか?

altテキスト

無事表示されたらここまでのプログラムは適切に動作している事が確認できたので、実際のIDとパスワードの入力を検査するプログラムを書いていきます。

ID欄の識別子は"id-field"ですので、JavaScriptで認識するためのコードは document.getElementById("id-field") になります。同様にパスワード欄は document.getElementById("pass-field") ですね。

このそれぞれの入力値は value というプロパティで取得できます。

document.getElementById("id-field").value;
document.getElementById("pass-field").value;

これが空でないかを検査します。

    function checkAndSubmit(){
if(
document.getElementById("id-field").value === "" ||
document.getElementById("pass-field").value === ""
){
alert("IDとパスワードを入力してください。");
return;
}
}

altテキスト

if( ){ } は、( ) 内の条件の通りであれば { } 内を実行する、という意味です。( ) 内の === は「左辺と右辺が同じであれば」という意味です。=は2つでもこの場合は構いませんが、1つではダメです。=が1つだと代入になってしまいます。

2つの時と3つの時の違いについてはここではまだ説明しません。

||というのは「または」という意味です。こちらのシステムの都合上この行では全角で記載していますが、プログラムでは半角で入力して下さい。キーボードの一番右上にあるキーをShiftキーと一緒に押すと入力できるはずです。「パイプライン(またはパイプ)」と呼びます。

つまり ( ) 内の意味は「IDフィールドが空、またはパスワードフィールドが空の時は」となります。この場合に { } 内が実行され「IDとパスワードを入力してください。」が表示されます。

その後の return は、そこでこの関数 checkAndSubmit() を抜ける、という意味です。

では実際に実行してみましょう。IDかパスワードのどちらかが空の状態で送信ボタンを押してみると、アラートメッセージが表示されるはずです。また、IDとパスワードを両方入力した場合はアラートが出ない事を確認してください。

altテキスト

ここまできたら後は、両方入力されていたら送信を行うコードを書くだけです。フォームの送信(submit)を行うので、フォームを識別しましょう。

document.getElementById("login-form");

これに対し、submitを実行します。

document.getElementById("login-form").submit();

altテキスト

では、IDとパスワードの両方を入力して送信してみましょう。無事ログイン後の画面が表示されれば成功です。

これで、サーバーにはIDフィールドのname値:user_idでその値、パスワードフィールドのname値:passでその値が送信されています。

jQueryでの検査と送信

次はjQueryでの検査と送信をしてみましょう。

まず、jQueryライブラリの読み込みを行います。jQueryライブラリファイルをダウンロードしてきて配置しても良いですが、CDNで提供されているのでこれを読み込んでしまいましょう。

jQuery CDN

CDNというのはコンテンツ・デリバリー・ネットワークの略で、ウェブコンテンツの配信を高速化する仕組みということになりますが、詳しい意味についてはここでは説明しません。

上記のCDNのページのjQuery 1.xのminifiedを右クリックしてリンクアドレスをコピーしましょう。クリックしてコードをブラウザで開き、アドレスバーのURLをコピーするのでも構いません。

なお、jQuery 2.x (IE <9 not supported)の方を選んでも大抵は構いません。こちらはより新しいもので、IE8以前をサポートしないバージョンです。IE8はMicrosoftがサポートを終了しているので、これからはjQuery 2系に切り替えてしまうのが理想的です。

こうして取得したURLを<head/>の login.js の前に読み込みます。login.jsではjQueryライブラリを呼び出すのでかならずその前にjQueryが読み込まれている必要があります。

    <head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="login.css" media="screen">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="login.js"></script>
</head>

読み込みのための記述が終わったら実際にコードを書いてみましょう。

まず、先ほど書いたJavaScriptコードを/* */で囲ってコメントアウトしましょう。

altテキスト

これでこのコードはコメント扱いになり、動作しなくなりました。

次にJavaScriptの時と同じように、ページの読み込みが終わったら処理を実行するコードを書きます。

$(document).ready(function(){

});

altテキスト

ドキュメントが準備出来たら function(){ } 内を実行するという意味です。

次は<button/>がクリックされたら、というコードです。<button/>には submit-button というidが指定してありますので、やはりこのidを使って識別します。

$("#submit-button").on("click", function(){

});

altテキスト

この"#submit-button"のような表記を、jQueryでは「セレクタ」と呼びます。#は続く文字列がidであることを指しています。classを指定したい時は . で始め、".some-class"のように書きます。nameで指定する場合は少しめんどくさいですが、"[name=some-name]"のように書きます。

これで、"#submit-button"に"click"イベントが起きた時はfunction(){ }が実行されるという意味になります。詳しく説明すると、on()メソッドの第1引数に"click"、第2引数にfunction(){} を指定しています。

このようにfunction(){} を渡す方法をクロージャと呼びます。最初の $(document).ready() でも function を第1引数に渡していました。jQueryでは特別意識していなくても、このクロージャを頻繁に利用する事になります。

後はfunction(){ } 内にイベント時の処理を記述します。

IDフィールドとパスワードフィールドを識別する方法は上記のセレクタを使い、

$("#id-field");
$("#pass-field");

となります。その値はJavaScriptでは value プロパティを直接参照していましたが、jQueryでは val() というメソッドで取得します。value の短縮形ですね。val()メソッドでは内部的に、value プロパティの値を参照してそれを返しています。プロパティではなくメソッドなので最後に()を記述するのを忘れないで下さい。

こうして取得した値がそれぞれ空でないかを検査します。

$(document).ready(function(){
$("#submit-button").on("click", function(){
if(
$("#id-field").val() === "" ||
$("#pass-field").val() === ""
){
alert("IDとパスワードを入力してください。");
return;
}
});
});

if文、||、return はJavaScriptと同じです。これはJavaScriptの決まりごとで、jQueryはJavaScriptのラッパーですから普通のJavaScriptがそのまま使えるということです。

後はIDとパスワードが入力されていたら<form/>のsubmitを行うだけです。

<form/>のidは"login-form"ですので、これをセレクタで指定し、submitを行います。

$(document).ready(function(){
$("#submit-button").on("click", function(){
if(
$("#id-field").val() === "" ||
$("#pass-field").val() === ""
){
alert("IDとパスワードを入力してください。");
return;
}

$("#login-form").submit();
});
});

以上がjQueryでの検査と送信です。

コメントアウトしたJavaScriptのコードと見比べてみましょう。jQueryの方がずっとコードが少ないことに気づくはずです。

jQueryは非常に便利です。今では全世界の全てのサイトの60%近くでjQueryが導入されているそうです。ギリギリの速度を求められるのでなければjQueryを積極的に使っていくのが今風の開発になります。

お疲れ様でした、今日はここまでです。

次はいよいよ、送信された値を使って認証を行うPHPコードを書いていきます。

この記事へのコメント

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


この記事に返信

このコメントに返信