เนื้อหานี้เป็นตอนแรก ในการสร้างระบบสมาชิกใน app ที่สร้างด้วย ionic material
โดยในตอนนี้ จะเพียงแค่กำหนด การวางโครงหน้า app ที่เกี่ยวข้อง เช่น การแสดง
หรือไม่แสดงเมนู สำหรับสมาชิก ฟอร์มหน้าล็อกอิน ฟอร์มหน้าสมัครสมาชิก และ
หน้าโพรไฟล์หลังจากล็อกอินหรือสมัครสมาชิก เป็นต้น
เนื้อหานี้เป็นเนื้อหาต่อเนื่อง สามารถดูบทความย้อนหลังได้ที่
โหลดฟรี ionic material ตัวปรับแต่ง สำหรับประยุกต์เพิ่มเติม
https://www.ninenik.com/content.php?arti_id=729 via @ninenik
ลำดับวิธีการที่จะใช้เป็นแนวทางสำหรับสร้างระบบสมาชิกใน app เป็นดังนี้
1. กำหนดการซ่อนหรือแสดงเมนู สำหรับสมาชิก
2. กำหนดส่วนของฟอร์มล็อกอิน ส่วนของการสมัครสมาชิก และส่วนของหน้าโพรไฟล์
3. กำหนดในส่วนของ controller ควบคุบการแสดงเมนูสมาชิก และข้อมูลสมาชิก
1. กำหนดการซ่อนหรือแสดงเมนู สำหรับสมาชิก
เปิดไฟล์ menu.html ในโฟลเดอร์ templates แล้วทำการเพิ่มค่า ng-show เข้าไปดังนี้
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar class="bar-dark" ng-class="{expanded: isExpanded, 'has-header-fab-left': hasHeaderFabLeft, 'has-header-fab-right': hasHeaderFabRight}" align-title="left">
<!--<ion-nav-back-button class="no-text">-->
<!--</ion-nav-back-button>-->
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="fabContent"></ion-nav-view>
<ion-nav-view name="menuContent" ng-class="{expanded: isExpanded}" ></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar expanded dark-bg">
<span class="avatar" style="background: url('img/crown.jpg'); background-size: cover;"></span>
<h2>Demo App</h2>
</ion-header-bar>
<ion-content class="stable-bg has-expanded-header">
<ion-list>
<ion-item ng-show="!showMemberMenu" nav-clear menu-close ui-sref="app.login">
Login
</ion-item>
<ion-item ng-show="!showMemberMenu" nav-clear menu-close ui-sref="app.register">
Register
</ion-item>
<ion-item ng-show="showMemberMenu" nav-clear menu-close ui-sref="app.profile">
Profile
</ion-item>
<ion-item ng-show="showMemberMenu" nav-clear menu-close ui-sref="app.map">
Map
</ion-item>
<ion-item ng-show="showMemberMenu" nav-clear menu-close ui-sref="app.listpage">
List Page
</ion-item>
<ion-item ng-show="showMemberMenu" nav-clear menu-close ui-sref="app.login">
Logout
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
การใช้ ng-show เพื่อเป็นการกำหนดให้แสดง หรือไม่แสดง menu นั้น เช่น
ng-show="showMemberMenu" ก็คือ เมนูนี้ให้แสดงเมื่อค่า showMemberMenu ที่เป็น true
ng-show="!showMemberMenu" กฺ็คือ เมนูนี้ให้แสดงเมื่อค่าที่ตรงข้าม showMemberMenu ที่เป็น false
นั่นก็คือ เมนู Login และ Register จะแสดงเมื่อเข้า app มาครั้งแรก เพราะเราจะกำหนดให้ showMemberMenu
เป็น false ส่วนเมนูอื่นๆ ให้ซ่อนไว้ก่อน จนกว่าเราจะกำหนดให้ค่า showMemberMenu เป็น true
2. กำหนดส่วนของฟอร์มล็อกอิน ส่วนของการสมัครสมาชิก และส่วนของหน้าโพรไฟล์
ให้ปรับแต่งในส่วนของไฟล์ login.html ในโฟลเดอร์ templates เป็นดังนี้
<ion-view view-title="Login" align-title="left">
<ion-content style="background-size: cover;" class="dark-bg">
<div class="hero no-header flat">
<div class="content">
<div class="app-icon"></div>
<h1>Demo App</h1>
</div>
</div>
<div class="list padding">
<ion-md-input ng-model="login.input_user" placeholder="Username"
highlight-color="balanced" type="text"></ion-md-input>
<ion-md-input ng-model="login.input_pass" placeholder="Password"
highlight-color="energized" type="password"></ion-md-input>
</div>
<div class="padding">
<div class="button-bar">
<button ng-click="loginMember(login)" class="button button-full
button-energized-900 ink">Login</button>
<button ui-sref="app.register" class="button button-full
button-energized ink">Register</button>
</div>
</div>
</ion-content>
</ion-view>
สังเกตว่าเราได้กำหนดค่าตัวแปรให้กับ input username และ input password เป็น
ng-model="login.input_user" ng-model="login.input_pass"
การกำหนดค่าในลักษณะ object ข้างต้น เพื่อให้สะดวกในการส่งค่าที่กรอกไปใช้ในฟังก์ชั่น
ng-click="loginMember(login)" โดยเมื่อกดที่ปุ่ม login ผ่าน ng-click ก็จะเรียกฟังก์ชั่น loginMember()
และส่งค่า object ชื่อ login เข้าไป
ให้ปรับแต่งในส่วนของไฟล์ register.html ในโฟลเดอร์ templates เป็นดังนี้
<ion-view view-title="Register" align-title="left">
<ion-content style="background-size: cover;" class="dark-bg">
<div class="padding" style="padding-bottom: 0px !important;">
<h1 class="light text-center">
Register
</h1>
</div>
<div class="list padding" style="padding-top: 0px !important;">
<ion-md-input ng-model="reg.input_user" placeholder="Username" highlight-color="balanced" type="text"></ion-md-input>
<ion-md-input ng-model="reg.input_pass" placeholder="Password" highlight-color="energized" type="password"></ion-md-input>
<ion-md-input ng-model="reg.input_phone" placeholder="Phone number" highlight-color="energized" type="text"></ion-md-input>
</div>
<div class="padding">
<div class="button-bar">
<button ng-click="registerMember(reg)"
class="button button-full button-energized-900 ink">Register</button>
<button ui-sref="app.login"
class="button button-full button-energized ink">Back</button>
</div>
</div>
</ion-content>
</ion-view>
ในตัวอย่างหน้าฟอร์มการสมัครสมาชิก เราจะเก็บแค่ 3 ค่า คือ username password และ phone number
ทั้งนี้เพื่อให้รูปแบบการทำงานง่ายขึ้น โดยแต่ละค่า เรากำหนดตัวแปรด้วย ng-model ดังนี้
ng-model="reg.input_user" ng-model="reg.input_pass" ng-model="reg.input_phone"
โดยกำหนดในชื่อ object ว่า reg เพื่อจะได้นำค่าดังกล่าวส่งไปยังฟังก์ชั่น
ng-click="registerMember(reg)" โดยเมื่อกดที่ปุ่ม Register ผ่าน ng-click ก็จะเรียกฟังก์ชั่น registerMember()
และส่งค่า object ชื่อ reg เข้าไป
ให้ปรับแต่งในส่วนของไฟล์ profile.html ในโฟลเดอร์ templates เป็นดังนี้
<ion-view view-title="Profile">
<ion-content ng-class="{expanded:$scope.isExpanded}">
<div class="hero slide-up" style="background-image: url('img/profile-bg.jpg');">
<div class="content">
<div class="avatar" style="background-image: url('img/daenerys.jpg');"></div>
<h3><a class="light">{{member_user}}</a></h3>
<h4>{{member_phone}}</h4>
</div>
</div>
</ion-content>
</ion-view>
ในหน้าโพรไฟล์ เราจะเพียงค่าแสดงค่าตัวแปร ที่เป็นชื่อ username และเบอร์โทร ซึ่งเราจะดึงมาจาก
database นำค่ามาโชว์เท่านั้น ผ่านตัวแปร {{member_user}} และ {{member_phone}}
3. กำหนดในส่วนของ controller ควบคุบการแสดงเมนูสมาชิก และข้อมูลสมาชิก
ในส่วนของ controller ให้เปิดไฟล์ controllers.js ในโฟลเดอร์ js ขึ้นมา และส่วนของ
controller ที่เราจะปรับแต่งได้แก่
AppCtrl ส่วนของ controller หลัก ที่เราจะกำหนดค่าตัวแปร showMemberMenu เพื่อซ่อนหรือแสดงเมนู
ส่วนของโค้ดที่เราจะเพิ่มเข้าไปใน AppCtrl
// ตัวแปรสำหรับกำหนด การซ่อนหรือแสดงเมนูสมาชิก false คือซ่อนเมนูสมาชิก
$scope.showMemberMenu = false;
// สร้างฟังก์ชั่น สำหรับเรียกใช้ เพื่อกำหนดการ กำหนดค่าตัวแปรเพื่อซ่อนหรือแสดงเมนู
$scope.setMemberMenu = function(status){
$scope.showMemberMenu = status;
};
จะได้ AppCtrl ทั้งหมดเป็นดังนี้
.controller('AppCtrl', function($scope, $ionicModal, $ionicPopover, $timeout, $ionicPopup) {
$scope.loginData = {};
$scope.isExpanded = false;
$scope.hasHeaderFabLeft = false;
$scope.hasHeaderFabRight = false;
var navIcons = document.getElementsByClassName('ion-navicon');
for (var i = 0; i < navIcons.length; i++) {
navIcons.addEventListener('click', function() {
this.classList.toggle('active');
});
}
////////////////////////////////////////
// Layout Methods
////////////////////////////////////////
$scope.hideNavBar = function() {
document.getElementsByTagName('ion-nav-bar')[0].style.display = 'none';
};
$scope.showNavBar = function() {
document.getElementsByTagName('ion-nav-bar')[0].style.display = 'block';
};
$scope.noHeader = function() {
var content = document.getElementsByTagName('ion-content');
for (var i = 0; i < content.length; i++) {
if (content[i].classList.contains('has-header')) {
content[i].classList.toggle('has-header');
}
}
};
$scope.setExpanded = function(bool) {
$scope.isExpanded = bool;
};
$scope.setHeaderFab = function(location) {
var hasHeaderFabLeft = false;
var hasHeaderFabRight = false;
switch (location) {
case 'left':
hasHeaderFabLeft = true;
break;
case 'right':
hasHeaderFabRight = true;
break;
}
$scope.hasHeaderFabLeft = hasHeaderFabLeft;
$scope.hasHeaderFabRight = hasHeaderFabRight;
};
$scope.hasHeader = function() {
var content = document.getElementsByTagName('ion-content');
for (var i = 0; i < content.length; i++) {
if (!content[i].classList.contains('has-header')) {
content[i].classList.toggle('has-header');
}
}
};
$scope.hideHeader = function() {
$scope.hideNavBar();
$scope.noHeader();
};
$scope.showHeader = function() {
$scope.showNavBar();
$scope.hasHeader();
};
$scope.clearFabs = function() {
var fabs = document.getElementsByClassName('button-fab');
if (fabs.length && fabs.length > 1) {
fabs[0].remove();
}
};
$scope.noShadow = function() {
var headerBar = document.getElementsByTagName('ion-header-bar');
for (var i = 0; i < headerBar.length; i++) {
if (!headerBar[i].classList.contains('no-shadow')) {
headerBar[i].classList.add('no-shadow');
}
}
};
$scope.hasShadow = function() {
var headerBar = document.getElementsByTagName('ion-header-bar');
for (var i = 0; i < headerBar.length; i++) {
if (headerBar[i].classList.contains('no-shadow')) {
headerBar[i].classList.remove('no-shadow');
}
}
};
// ตัวแปรสำหรับกำหนด การซ่อนหรือแสดงเมนูสมาชิก false คือซ่อนเมนูสมาชิก
$scope.showMemberMenu = false;
// สร้างฟังก์ชั่น สำหรับเรียกใช้ เพื่อกำหนดการ กำหนดค่าตัวแปรเพื่อซ่อนหรือแสดงเมนู
$scope.setMemberMenu = function(status){
$scope.showMemberMenu = status;
};
})
LoginCtrl ส่วนของ controller หน้า login
.controller('LoginCtrl', function($scope, $timeout, $stateParams, ionicMaterialInk) {
$scope.$parent.clearFabs();
$scope.$parent.hasShadow();
$timeout(function() {
$scope.$parent.hideHeader();
}, 0);
// เรียกใช้ฟังก์ชั่นจาก AppCtrl หลัก เพื่อซ่อนเมนูสมาชิก โดยส่งค่า false เข้าไป
$scope.$parent.setMemberMenu(false);
ionicMaterialInk.displayEffect();
})
RegistCtrl ส่วนของ controller หน้า register
.controller('RegistCtrl', function($scope, $timeout, $stateParams, ionicMaterialInk) {
$scope.$parent.clearFabs();
$scope.$parent.hasShadow();
$timeout(function() {
$scope.$parent.hideHeader();
}, 0);
// กำนหดค่าเริ่มต้นของฟอร์มหน้าสมัครสมาชิก ให้เป็นค่าว่าง
$scope.reg = {
input_user:'',
input_pass:'',
input_phone:''
};
// เรียกใช้ฟังก์ชั่นจาก AppCtrl หลัก เพื่อซ่อนเมนูสมาชิก โดยส่งค่า false เข้าไป
$scope.$parent.setMemberMenu(false);
ionicMaterialInk.displayEffect();
})
ProfileCtrl ส่วนของ controller หน้า profile
.controller('ProfileCtrl', function(
$scope, $stateParams, $timeout,
ionicMaterialMotion, ionicMaterialInk) {
$scope.$parent.showHeader();
$scope.$parent.clearFabs();
$scope.isExpanded = false;
$scope.$parent.setExpanded(false);
$scope.$parent.setHeaderFab(false);
$scope.$parent.hasShadow();
// กำหนดตัวแปรสำหรับค่าเริ่มต้นของข้อมูลหน้าโพรไลฟ์
$scope.member_user = '';
$scope.member_phone = '';
// กำหนดให้แสดงเมนูสมาชิก
$scope.$parent.setMemberMenu(true);
$timeout(function() {
ionicMaterialMotion.slideUp({
selector: '.slide-up'
});
}, 300);
$timeout(function() {
ionicMaterialMotion.fadeSlideInRight({
startVelocity: 3000
});
}, 700);
ionicMaterialInk.displayEffect();
})
ทั้งหมดข้างต้น เป็นการเตรียมพร้อมหน้า app ต่างๆ ในเนื้อหาตอนต่อไป เราจะพูดถึงในส่วนของการ
เรียกใช้งาน plugin ที่เกี่ยวข้อง รวมถึงการใช้งาน plugin นั้น โดยเฉพาะ SQLite ที่จะเป็นตัวที่ใช้สำหรับ
บันทึกข้อมูลจากฟอร์มการสมัครสมาชิก และการเรียกข้อมูลจาก database มาแสดงอย่างง่าย
