webix業務アプリ ログインからメニュー画面に遷移No.018
前回の続きです。前回、紹介しましたログイン画面で認証確認ができたときにメニュー画面に遷移する実装の紹介です。実際の業務アプリでは、考慮すべき点がいくつかありますが、今回はサンプルなので機能を省略して実装しています。また、情報の理解がしやすいようにメニュー情報もJavascript上で記述しています。（実際の実装では、ログインIDからデータベースを検索して対象ユーザに公開できるメニュー情報だけでメニューを構成する処理や、該当ユーザがそのメニューで操作できる権限情報も付与する処理などが必要です。ユーザ権限によっては、閲覧のみで更新処理ができないようにするなど）
メニューの実装には、webixのコンポーネントsidebarを利用しています。詳しい動作は、webixのマニュアルを参照してください。
階層構造をもったメニューを簡単に連想配列定義で実装できます。
アイコン情報は、materialdesigniconsを使用しています。
メニューは、グループとメニューで構成しており、グループの場合は、画面遷移はせず、メニューで定義している場合に、指定URLに画面遷移します。（今回の例では、メニュー選択すると、別のタブで機能が開く実装にしています。）ログアウトだけは、メニューを閉じて、ログイン画面に戻る動作です。
但し、開いた機能画面には、閉じるボタンを現時点では、実装していません。（今までのサンプル紹介が、単独画面動作であったため）
いずれかのタイミングで、各機能に閉じるボタンを実装しますので、しばらくお待ちください。
また、スマホ操作を考慮して、ボタンアインによるメニュー実装も今後、紹介しますので、お待ちください。
No.019でメニューアイコンを実装しましたので、この記事の一部の記載は実際のサンプルと異なる表示となっていますので、ご了承願います。
現状は、以下のようなメニュー画面になります。
マスター管理メニューをクリックすると、次の階層メニューを表示します。
ログアウトをクリックすると、ログイン画面に戻ります。
現時点では、組織メニューは未実装です。
スマホでログイン操作を実施した場合、表示画面の幅が狭いので、メニューは最小表示にしています。メニュー左のアイコンクリックでメニュー名表示も可能です。
スマホでは、操作しにくいので、次回の記事では、アイコンボタンメニューの実装を紹介します。
サンプル画面の動作は、以下のURLで実施できます。ログイン画面で指定ログインIDとパスワード入力で、メニュー画面に遷移できます。
スマホでも同様の操作ができますが、メニューから選択した機能によっては、スマホ画面サイズを考慮して実装していないので、小さく表示されますのでご了承ください。
以下、メニュー画面のサンプルソースです。webix_menu_samle.php
<?php
//webix_menu_samle.php
$TITLE_INFO ="webix";
$VER_INFO ="V01L10";
define('ROOT_PATH','/home/sunsun/www/webix01'); //ソースを保存しているパス（動作環境に応じて記述する必要あり）
define('SUB_FOLDER','/webix01'); //サブフォルダを指定したURL
$userid = 'admin';
$myfilename = basename(__FILE__); //自分自身のファイル名取得
$logheader = 'userid='.$userid.', '.$myfilename.':';//ログ出力時のヘッダー情報（自ファイル名,ログインIDを付与）
if(isset($_POST['userid'])){
$userid = $_POST['userid'];
}
$devicemode = "1";
if(isset($_POST['devicemode'])){
$devicemode = $_POST['devicemode'];
}
$userdevice = "pc";
if(isset($_POST['userdevice'])){
$userdevice = $_POST['userdevice'];
}
$logheader = 'userid='.$userid.', '.$myfilename.':';//ログ出力時のヘッダー情報（自ファイル名,ログインIDを付与）
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache">
<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 href="<?php echo SUB_FOLDER; ?>/commonlib/webix_custom_css.css?<?php echo date('Ymd-H'); ?>" rel="stylesheet" type="text/css">
<link rel="icon" href="<?php echo SUB_FOLDER; ?>/image/webix_64.ico">
<script src="<?php echo SUB_FOLDER; ?>/commonlib/moment-with-locales.js"></script>
<link rel="stylesheet" href="<?php echo SUB_FOLDER; ?>/webix_GPL_1020/css/materialdesignicons.min.css" type="text/css" charset="utf-8">
<title><?php echo $TITLE_INFO.' ('.$VER_INFO.')' ?></title>
<style>
.h_title {
color: #FFFFFF;
}
.pop_style_er .webix_popup_title {
font-size: 25px;
color: red;
}
.pop_style_wr .webix_popup_title {
font-size: 25px;
color: blue;
}
<?php
echo $css_str;
?>
.button_css button.webix_button{
background: #00007C;
border:1px solid #FFFFFF;
color: #FFFFFF;
font-size: 10px;
}
</style>
</head>
<body>
<script type="text/javascript" charset="utf-8">
webix.i18n.setLocale("ja-JP");
var userid = '<?php echo $userid; ?>';
var devicemode = '<?php echo $devicemode; ?>';
var userdevice = '<?php echo $userdevice; ?>';
var menu_data = [
{id: "100", icon: "mdi mdi-logout", value:"ログアウト",menutyep:"menu",url:"/webix01/sample_login.php"},
{id: "200", icon: "mdi mdi-view-comfy", value: "マスター管理",menutyep:"group", data:[
{ id: "201", icon: "mdi mdi-collage", value: "組織",menutyep:"menu",url:""},
{ id: "202",icon: "mdi mdi-human", value: "従業員",menutyep:"menu",url:"/webix01/view/ZTEST/webix_sample08.php"}
]},
{id: "300", icon: "mdi mdi-table", value:"帳簿",menutyep:"group", data:[
{id: "301",icon:"mdi mdi-alpha-e-box-outline", value: "電子帳簿",menutyep:"menu",url:"/webix01/view/UD0010/UD0010_upload_lists.php"},
]},
{id: "400", icon: "mdi mdi-qrcode", value:"QRコード",menutyep:"menu",url:"/webix01/view/QR0010/QR0012_QRcode_read.php"},
{id: "500", icon: "mdi mdi-help", value:"HELP",menutyep:"group", data:[
{id: "501", icon: "mdi mdi-license",value: "webix Lisnce",menutyep:"menu",url:"/webix01/folder/pdf/GPL_LICENSE.pdf"},
]},
];
webix.ready(function(){
webix.ui({
rows: [
{ view: "toolbar", padding:3, elements: [
{ view: "icon", icon: "mdi mdi-menu",tooltip:"最小表示", click: function(){
$$("$sidebar1").toggle();
}
},
{ view: "label", label: "メニュー"},
]
},
{ cols:[
{
view: "sidebar",
data: menu_data,
on:{
onAfterSelect: function(id){
var item = this.getItem(id);
if(item.url == ""){
webix.alert("本メニューは、未実装です。");
return;
}
if(item.value == "ログアウト"){
webix.send(item.url,{userid:userid}, "GET"); //ログインしたログインIDを付与して開く
return
}
else{
window.open(item.url, '_blank'); //新規タブで機能を開く
$$("sidebar").unselect(id);
}
}
}
},
{ template: "ようこそ、"+userid+"さん<br><br>現バージョンでは、<br>アイコンメニューは、未実装です。<br>かつ選択したメニューから起動した画面に<br>閉じるボタンが未実装なので、<br>Xで閉じてください。"}
]}
]
});
if(userdevice == "smd"){
webix.ui.fullScreen();
$$("$sidebar1").toggle();
}
});
</script>
</body>
</html>
変数（配列）は、Javascript内で記述しており、実際には、DBを検索して構成する実装となります。また、今回のメニューへの遷移実装により、前回のログイン画面のソースが少し修正されています。（認証後に、メニュー画面を開く記述が追加になっています）
以下、修正部分だけ掲載します。sample_login.php
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/webix_menu_samle.php",$$("form1").getValues(),"POST");
}
else{
webix.send("<?php echo SUB_FOLDER; ?>/view/menu/webix_menu_samle.php",$$("form1").getValues(),"POST");
}
}
webix_menu_samle.phpを開くときに、ログイン画面上の情報をAjax通信時に渡しており、メニュー画面を構成するときPCかスマホかを判断してメニュー画面を作成するロジックになっています。
if(userdevice == "smd"){
webix.ui.fullScreen();
$$("$sidebar1").toggle();
}
スマホのときは、画面表示の変更とメニュー構成を最小表示で開始するようにしています。
この記事が気に入ったらサポートをしてみませんか？