Web Studioでページを追加すると、２つのファイル、HTMLファイルとクラスファイル「File name.class」が作成されます。
クラスファイルはページアクセス時に読み込まれ、LIB PHP Frameworkのセキュリティーフィルターやイベント駆動など基本的な機能が発動します。
イベント駆動型プログラミングは、ユーザーのアクションによって処理を決定するプログラミング手法です。
LIB PHP Frameworkには２種類のイベント定義があります。
（POSTイベント）
ページアクセス時のPOSTデータ（HTTPリクエストのメッセージボディ）によって実行する関数を切り替えます。
例えば、ユーザーが「ログイン」ボタンをクリックした際に、ログインIDとパスワードを検証する処理を定義します。
（ロードイベント）
ロードイベントは、POSTデータを送信せずにページアクセスした際に実行させる処理（デフォルト処理）を定義します。
例えば、ユーザーがログインしているかどうかを検証し、ログインしていない場合にはログインページへリダイレクトさせます。
ページ編集画面で「Event」をクリックしてイベント編集画面を開きます。
Events欄の「+Add」をクリックしてイベントを追加します。
Type of eventにLodingを選択し、Enable（有効）を選択します。
ログインが必要なページのロードイベントには、下記のようにセッションデータのチェックと、
ログインセッションが存在しない場合にはログインページへのリダイレクト処理を記述します。
if (!$_SESSION["member.profile"]) {
header("Location: /member/login.html");
exit();
}
前項のセッションチェック処理によって、ログインしていない場合にはログインページへリダイレクトされますので、ログインページを作成していきます。
Chapter1. ログインと基本操作を参考にログインページを作成し、下記のようなログインフォームを記述します。
<form>
<h2>サインイン</h2>
<p>登録ユーザーの方は、ご登録のE-mailアドレスでサインインしてください。</p>
<dl>
<dd><input type="text" name="email" placeholder="E-mail"></dd>
</dl>
<dl>
<dd><input type="password" name="passwd" placeholder="Password"></dd>
</dl>
<button id="signin">Sign in</button>
<input type="hidden" name="action" value="signin">
</form>
「Singn in」ボタンクリック時の動作をjQueryコードで記述します。
ここでは、ボタンクリック時にページ遷移を発生させず、バックグラウンド通信で自ページへアクセスし、通信結果によって処理を切り分けます。
このようなバックグラウンドでの通信方法をAjax（エイジャックス）と言います。
まず始めに、$.ajaxSetup()でAjaxの通信エラー時の処理を記述します。
サーバー側の準備が完了していない場合などにはエラーとなりますので、alert()でエラーステータスを表示し、コンソールに詳細を出力します。
次に、「Singn in」ボタンクリック時の動作を記述しますが、
<form>内にある<button>は、submit（サブミット）といって、クリック時に自動的にページ遷移しようとしますので、最後にfalseを返して処理を終了させます。
$.post()に、送信先と送信データを渡し第３引数に通信結果の処理を記述します。
送信先は自ページですのでlocation.hrefとし、送信データはform要素をserialize()でPOSTデータに変換します。
送信結果は引数「res」にjson形式で返ってきますので、res.statusを検証して失敗の場合はalert()でres.textを表示し、成功の場合はres.urlへページ遷移させます。
$(function() {
$.ajaxSetup({
error: function(xhr, status) { console.log(xhr.responseText); alert("データ送信エラー： " + status); }
});
$("#signin").on("click", function() {
var $form = $(this).closest("form");
$.post(location.href, $form.serialize(), function(res) {
if (res.status != "SUCCEED") alert(res.text);
else location.href = res.url;
}, "json");
return false;
});
});
イベント編集画面を開き、Use class欄で「Rule」をチェックし、下部の「保存」をクリックします。
これは、POSTデータにセキュリティーフィルターを追加する場合に必要な設定です。
「Singn in」ボタンクリック時に、Ajaxバックグラウンド通信によってPOSTデータが送信されますが、
ユーザー入力値の「email」と「passwd」については、セキュリティーフィルターを適用する必要があります。
イベント編集画面ををスクロールし、Rules欄の「+Add」をクリックしてルールを追加します。
ユーザー入力値の「email」と「passwd」それぞれに適切なルールを設定します。
name： POSTデータの名前（input、select、textareaの要素名）を入力
Length： 最大文字長
Constraint： 制約の方法
Select constraints： 許可する文字の種類
Convert： 文字変換の方法
Select convert option： 文字変換の種類
emailの入力値は、最大100文字とし、半角英数、ｱﾝﾀﾞｰｽｺｱ、ｱｯﾄﾏｰｸ、ﾄﾞｯﾄ、ﾊｲﾌﾝのみを許可し、全角での入力値は自動的に半角英数字に変換させます。
passwdの入力値は、最大20文字とし、半角英数、ｱﾝﾀﾞｰｽｺｱ、ﾄﾞｯﾄ、ﾊｲﾌﾝのみを許可し、文字変換は行いません。
イベント編集画面でEvents欄の「+Add」をクリックしてイベントを追加します。
Type of eventにPOSTを選択し、Nameに「action」、Valueに「signin」を入力し、Enable（有効）を選択します。
これで、「action=signin」が送信された場合に、追加したこのイベントが実行されるようになります。
送信されたPOSTデータは、$_POSTグローバル変数で取得することができます。
$_POSTは$_SESSIONと同じく、スーパーグローバル変数と呼ばれる、PHPによって自動生成される連想配列で、フォームの要素名と要素値が連想配列となって受け取れるようになっています。
さらに、LIB PHP Frameworkによって$_POSTは安全な値に変換されています。
ログインイベントでは、下記のようなコードを記述してログイン処理を実行します。if (!$_POST["email"]) $this->response("E-mailアドレスを入力してください。", false);
if (!$_POST["passwd"]) $this->response("パスワードを入力してください。", false);
// note: E-mailアドレスとパスワードをチェックする
if ($_POST["email"] != "member" || $_POST["passwd"] != "password") $this->response("E-mailアドレス・パスワードが違います。", false);
// note: セッションにデータを追加する
$_SESSION["member.profile"]["email"] = $_POST["email"];
// note: 遷移先のURLを出力する
$res["url"] = "/member/index.html";
$this->response($res, true);
$this->response()はフレームワーク関数で、渡された文字列や連想配列をjsonフォーマットに変換してメッセージボディとし、HTTPレスポンスを返して終了します。
フレームワーク関数の使用方法については、PHP基礎学習のChapter5以降で学習します。
これで、E-mail入力欄に「member」パスワード入力欄に「password」を入力し場合に「/member/index.html」へ遷移するようになりました。
このように、セッションデータの取得と代入によってログイン機能を実装することで、メンバーページを作成できるようになります。
参考画像ではパスワードチェックにデータベースからデータを取得する処理が記述されています。
データベースアクセスについてはPHP基礎学習のChapter7以降で学習します。
