業務アプリ（webix)ログイン画面からメニューへNo.017
Webix関連の業務アプリ用画面とサーバ機能を紹介し始めて、17回になります。今回は、そろそろ業務アプリの入り口から機能選択するメニュー関連の紹介を2回に分けて記述します。今回は、ログイン画面です。
ログイン画面は、一般的には、ログインIDとパスワードを入力し、その内容をチェックして認証処理を実施する機能です。画面デザイン上、パソコンのブラウザ画面とスマホ用画面の２つの判断し、サイズを決めています。スパホは、iphoneで判断していますので、パソコンモードになってしまうようでしたら、表示モードを自動からスマホに変更してログイン操作を実施してください。（今回は、メニュー画面への遷移は未実装なので、表示モードの選択は、関係ありませんが）
画面デザインを先に紹介します。
以下のような画面となります。（パソコン画面です）
ログインIDとパスワード入力フィールドと表示モードの選択と画像情報です。（画像情報クリックで、指定URLに遷移できますが、今回のサンプルでは同じログイン画面に遷移します）
パスワードのフィールドは、＊表示にしました。
動作確認用のURLです。
今回は、サンプルなので、ログインIDとパスワードは、画面に表示されている情報で指定してください。指定以外の情報でログイン操作をすると、エラーメッセージが表示されます。
ログインIDやパスワードが空欄のときは、UI側でチェックを実施しており、
以下のようにエラーメッセージが表示されます。
正しく入力した場合、まだメニュー画面が未実装なので、メッセージだけの
表示です。
今回のログイン画面では、認証チェックでサーバに問い合わせを実施(/rest_api/menu/sample_login_check.php)して、結果がOKならメニュー画面に遷移する実装としました。認証チェック用のリクエストは、AjaxでPOSTメソッドにしています。
サーバ側では、受信したパラメータを取り出し、ユーザIDとパスワードをチェックして応答しています。実際の実装では、データベースなどを検索してユーザIDとパスワードのチェックを実装することになります。
また、セキュリティを考慮して、画面からサーバにパスワード情報を送信するときに、暗号化して転送する実装も可能です。
サンプルでは、動作が理解しやすいように、簡単な記述になっています。
パソコンとスマホの判断は、Javascriptのnavigator.userAgentを確認し、機種名で判断しています。他の実装方法もあると思います。
以下、UIとサーバのソースです。
UI：sample_login.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<?php
define('ROOT_PATH','/home/sunsun/www/webix01'); //ソースを保存しているパス（動作環境に応じて記述する必要あり）
define('SUB_FOLDER','/webix01'); //サブフォルダを指定したURL
$userid= "";
$password= "";
$userdevice ="pc";
$devicemode = 1;
$user = "";
//ログイン処理
//sample_login.php
//https://yamasanfarm.sakuraweb.com/webix01/sample_login.php
//GETパラメータチェック
if(isset($_GET['userid'])){
$userid = $_GET['userid'];
$error_flag = 1; //パラメータあり（POST時）
}
else{
$error_flag = 0; //パラメータ無し（初期コール）
}
if(isset($_GET['userdevice'])){
$userdevice = $_GET['userdevice'];
}
if(isset($_GET['devicemode'])){
$devicemode = intval($_GET['devicemode']);
}
include('./webix01/commonlib/login_check2.php');
//ログイン画面
?>
<script src="<?php echo SUB_FOLDER; ?>/webix_GPL_1020/webix.js"></script>
<link href="<?php echo SUB_FOLDER; ?>/webix_GPL_1020/skins/compact.css?<?php echo date('Ymd-H'); ?>" rel="stylesheet" type="text/css">
<link rel="icon" href="<?php echo SUB_FOLDER; ?>/image/webix_64.ico">
<title>ログイン</title>
<style>
html, body{height:100%}
.webix_el_button.cursor button:hover{
cursor:pointer;
}
cursor: pointer;
cursor: hand;
</style>
</head>
<body>
<?php
if($userdevice =="pc"){
echo ' <div id="data_container" style="width:300px;height:1px;margin:5px"></div>'."\n";
}
else{
echo ' <div id="data_container" style="width:300px;height:1px;margin:5px"></div>'."\n";
}
?>
<script>
var form = [
{ view:"label", label:"ようこそ Webixサービスへ", height:50, align:"center" },
<?php
echo '{ view:"text", label:"ログインID", name:"userid", value:"'.$userid.'", invalidMessage:"ログインIDが空欄です" ,width:300},'."\n";
echo '{ view:"text", type:"password", label:"パスワード", name:"password",value:"'.$password.'c", invalidMessage:"パスワードが空欄です" ,width:300},'."\n";
?>
{
view:"button", css:"webix_primary", value: "ログイン", align:"center", width: 150,
click:function(){
var form = this.getParentView();
if (form.validate()){
$$("mess01").setValue("");
$$("userdevice").setValue(check_client_device($$("devicemode").getValue()));
var devicemode = $$("devicemode").getValue();
var userdevice= $$("userdevice").getValue();
webix.ajax().post("<?php echo SUB_FOLDER; ?>/rest_api/menu/sample_login_check.php", $$("form1").getValues()).then(function(data){
var resp_data = data.json();
if(resp_data.resp == "ok"){
$$("user").setValue(resp_data["user"]);
//メニュー画面へ遷移
webix.message({type:"success",text:"ログイン処理が完了したので<br>メニューに<br>次回版からは遷移します。"});
return;
if($$("userdevice").getValue() == "pc"){
//webix.send("<?php echo SUB_FOLDER; ?>/view/menu/sample_menu_form.php",$$("form1").getValues(),"POST");
}
else{
//webix.send("<?php echo SUB_FOLDER; ?>/view/menu/sample_smdmenu_form.php",$$("form1").getValues(),"POST");
}
}
else{
$$("mess01").setValue("パスワードまたはログインIDが正しくありません");
webix.message({type:"error",text:"パスワードまたはログインIDが<br>正しくありません<br>error_code="+resp_data.error_code});
}
});
}
}
},
<?php
echo ' { view:"select", value: '.$devicemode.', name:"devicemode",id:"devicemode",label:"表示モード", options:[{ value:"自動", id:1 },{ value:"スマホ", id:2 } ] ,width:300},'."\n";
?>
{ view:"label", label:"", name:"mess01", id:"mess01", align:"center",width:300},
{ view:"label",label:"<img src='<?php echo SUB_FOLDER; ?>/image/yamasanFarm1.png' style='height:96px;cursor: hand; cursor:pointer;'>", width: 200,height:100, align:"center",
click:function(id,event){
location.href = 'https://yamasanfarm.sakuraweb.com/webix01/sample_login.php';
},
onFocus:function(id,event){
}
},
{ view:"template", template:"サンプルログイン画面なので、<br>以下のように入力してください。<br>ログインID： user01<br>パスワード: abc1234",width:300},
{ view:"label", label:"",name:"userdevice",id:"userdevice"},
{ view:"label", label:"",name:"user",id:"user"},
];
webix.i18n.setLocale("ja-JP");
webix.ui({
view:"form",
id: "form1",
scroll:false,
elements:form,
width:350,
margin:3,
rules:{
"userid":webix.rules.isNotEmpty,
"password":webix.rules.isNotEmpty,
},
elementsConfig:{
labelPosition:"top",
labelWidth:140,
bottomPadding:18
}
});
<?php
echo ' $$("form1").setValues({userid:"'.$userid.'","userdevice":"'.$userdevice.'","devicemode":'.$devicemode.',"user":""});'."\n";
?>
$$("userdevice").hide();
$$("user").hide();
$$("userdevice").setValue(check_client_device($$("devicemode").getValue()));
if($$("userdevice").getValue() == "smd"){
webix.ui.fullScreen();
$$("mess01").setValue("スマホ表示モードです。");
}
else{
$$("mess01").setValue("PC表示モードです。");
}
$$("devicemode").attachEvent("onChange", function(newv, oldv){
if(newv =="2"){
$$("mess01").setValue("スマホ表示モードです。");
$$("userdevice").setValue("smd");
}
else{
if(check_client_device($$("devicemode").getValue()) == "pc"){
$$("mess01").setValue("PC表示モードです。");
$$("userdevice").setValue("pc");
}
else{
$$("mess01").setValue("スマホ表示モードです。");
$$("userdevice").setValue("smd");
}
}
});
function check_client_device(devicemode){
var device_type ="pc";
if(devicemode == "2"){
device_type ="smd";
}
else{
var agent = navigator.userAgent;
if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
device_type ="smd";
}
}
return device_type;
}
</script>
</body>
</html>
サーバ：sample_login_check.php
<?php
//sample_login_check.php
$myfilename = basename(__FILE__); //自分自身のファイル名取得
if($_SERVER["REQUEST_METHOD"] != "POST"){
header("HTTP/1.0 404 Not Found");
$resp_val = '{"resp":"REQUEST NG"}';
echo $resp_val;
return;
}
$userid_prm = ''; //名前
$password_prm = '';
//POST情報からパラメータ取得
if(isset($_POST['userid'])){
$userid_prm = $_POST['userid'];
}
if(isset($_POST['password'])){
$password_prm = $_POST['password'];
}
$logheader = 'userid='.$userid_prm.', '.$myfilename.':';//ログ出力時のヘッダー情報（自ファイル名,ログインIDを付与）
error_log($logheader.' userid='.$userid_prm);
error_log($logheader.' password_prm='.$password_prm);
if($userid_prm == "" || $password_prm == ""){
header("HTTP/1.0 404 Not Found");
$resp_val = '{"resp":"PRM NG"}';
echo $resp_val;
return;
}
if($userid_prm != "user01"){
$resp = "ng";
$error_code= -1;
}
else{
if($password_prm != "abc1234"){
$resp = "ng";
$error_code= -2;
}
else{
$resp = "ok";
$error_code= 0;
}
}
$json_data = json_encode(compact("resp","error_code"),JSON_UNESCAPED_UNICODE);
echo $json_data;
?>