w2ui.form関連情報

このページのテスト環境には、Xserver(MySQL＆PHP)を使っています

ユーザーＩＤ:

パスワード:

このページの作成経緯、Xserver上で、w2uiのフォームとPHPを使ってMySQLと連動して実際に動くサンプルプログラムを作成してみました

セキュリティー的には、現状のPHPの実装は、甘いので参考程度に見て下さい

PHPのコードには、デバッグの痕跡が残っています。不必要な部分は取り除いて下さい

このサンプルでは、ID:test、PASSWORD:TESTtest1234でset.phpに変遷するようにしています。一応クッキーにrecidを書き込みするようにしてあります。

認証後のページ変遷は、実装するときに各自変更して下さい

認証テストサンプルフォーム作成方法

基本的な記述は、このページのHTMLソースを見て下さい

jquery(バージョンは2.1.3使用)とw2ui(バージョン1.5r使用)のcssとjsをFTPでサーバーの適当な場所に置く

htmlのヘッダに次の文(例)を記述する

bodyの<div>タグでHTMLのフォームを記述する(このページのソースかサンプルプログラム参照)

script type="text/javascript"のタグの間に次の文(例)を記述する

//w2utils.locale('ja-jp.json'); のかわり
w2utils.locale({
"dateFormat" : "yyyy/mm/dd",
"timeFormat" : "h24",
"currency" : "^[\\$]?[-+]?[0-9]*[\\.]?[0-9]+$",
"currencyPrefix" : "￥",
"currencySuffix" : "",
"currencyPrecision": 0,
"groupSymbol" : ",",
"float" : "^[-]?[0-9]*[\\.]?[0-9]+$",
"shortmonths" : ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
"fullmonths" : ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
"shortdays" : ["月", "火", "水", "木", "金", "土", "日"],
"fulldays" : ["月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日", "日曜日"],
"phrases" : {
"Save": "閉じる",
"Hide": "隠す",
"Add New": "追加",
"Edit": "編集",
"Delete": "削除",
"Confirmation": "確認",
"Yes": "はい",
"No": "いいえ",
"Reload data in the list": "一覧を再表示します",
"Edit selected record": "選択した行を編集します",
"Required field": "入力必須項目です",
"Add new record": "新規に行を追加します",
"Delete selected records": "選択した設定を削除します",
"Are you sure you want to delete selected records?": "選択した行を削除します。よろしいですか？",
"All Fields": ""
}
});

$(function () {
$('#form').w2form({
name : 'form',
header : 'テストフォーム',
url : 'w2uiform.php',
data: $(this).serialize(),
dataType: 'json',
fields: [
{ field: 'user', type: 'text', required: true },
{ field: 'pass', type: 'password', required: true },
],
actions: {
reset: function () {
this.clear();
},
save: function () {
this.save(function (data) {
if (data.status == 'success') {
$(location).attr("href", "set.php");
}
// if error, it is already displayed by w2form
});
}
}
});
});

PHPのファイル記述方法(ここではw2uiform.php)

<?php

ini_set("allow_url_fopen", true);
header("Content-type: application/json; charset=UTF-8");

// POSTメソッドでリクエストした値を取得
$json = file_get_contents('php://input');
$jsons = urldecode($json);
$str = mb_convert_encoding($jsons, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');

//頭から８文字目以降を収納
$str2 = substr($str, 8);

//JSONデータデコード
$cs = json_decode($str2);

//コマンド取得
$cmd = $cs->cmd;

//recid取得
$recid = $cs->recid;

//レコードデータ取得
$recids = $cs->record->recid;
$user = $cs->record->user;
$pass = $cs->record->pass;

//ステータス
$res = Array();
$res['status'] = 'error';
$res['message'] = 'Command "'. $cmd .'" is not recognized.';
$res['postData']= $str2;

// データベース接続
// $host = localhostで動かなければipアドレスを記載
$host = 'mysql9999.xserver.jp';
// データベース名
$dbname = 'suzukia0129_test';
// ユーザー名
$dbuser = 'suzukia0129_testuser';
// パスワード
$dbpass = 'hogehoge';

// データベース接続クラスPDOのインスタンス$dbhを作成する
try {
$dbh = new PDO("mysql:host={$host};dbname={$dbname};charset=utf8mb4", $dbuser, $dbpass);
// PDOExceptionクラスのインスタンス$eからエラーメッセージを取得
} catch (PDOException $e) {
// 接続できなかったらvar_dumpの後に処理を終了する
var_dump($e->getMessage());
exit;
}

//コマンドで処理をわける
switch ($cmd) {

//データ取得処理
case 'save':

// リストデータ取得用SQL
// 値はバインドさせる
$sql = "SELECT recid, user, pass FROM users WHERE user LIKE '" . $user . "' AND pass LIKE '" . $pass . "' ORDER BY recid ";
// SQLをセット
$stmt = $dbh->prepare($sql);
// SQLを実行
$stmt->execute();

// あらかじめ配列$dataを作成する
// 受け取ったデータを配列に代入する
// 最終的にhtmlへ渡される
$data = array();

// fetchメソッドでSQLの結果を取得
// 定数をPDO::FETCH_ASSOC:に指定すると連想配列で結果を取得できる
// 取得したデータを$dataへ代入する
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
$data[] = array(
'recid' => $row['recid'],
'user' => $row['user'],
'pass' => $row['pass']
);
}

$ress = Array();

if (empty($data) != FALSE) {
$ress['status'] = 'error';
} else {
$ress['status'] = 'success';
$codes = $data[0]['recid'];
setcookie('mycookie',$codes,time()+60*60*24*7);
}

header("Content-Type: application/json;charset=utf-8");
//echo json_encode($cs);
echo json_encode($ress);
break;
}

?>

MySQLデータベースの設定

本来ならPHPを記述する前に設定しておくこと

データベース名　suzukia0129_test
テーブル名　users
項目　recid int 11 自動連番　主キー
項目　user varchar 255 NULL
項目　pass varchar 255 NULL

サンプルプログラムのダウンロード(jquery.w2uiのフォルダ付き)

sample.zipをダウンロードする