AngularjsIonic framework

การสร้างระบบ Login สำหรับ ionic framework ด้วย AngularJS

ตัวอย่างการสร้าง Template ของ ionic framework แบบ Side Menu เพื่อดึงหน้า Login เข้าสู่ระบบมาพัฒนาเงื่อนไขการทำงานร่วมกับ AngularJS สำหรับผู้เริ่มต้นพัฒนา Cross-Platform Apps 

ทบทวนบทเรียนย้อนหลังได้ที่ http://www.daydev.com/category/developer/angularjs

บทเรียนนี้จะเป็นการสร้างระบบ Login เบื้องต้นอย่างง่ายโดยไม่เชื่อมต่อฐานข้อมูลแบบ APIs ด้วย AngularJS บน ionic framework โดยเลือก Template ของแอพพลิเคชันที่เราจะเตรียมสร้างนั้นเป็นรูปแบบ sidemenu ครับ เริ่มต้นให้รัน ionic command line ดังนี้

ionic-1

หากเสร็จเรียบร้อยเราจะได้แอพพลิเคชันแบบ Side Menu ที่เมนูด้านข้างมีหน้า Login มาให้พร้อมแล้ว แค่ยังไม่สามารถ Login เข้าระบบทำอะไรได้กับแอพพลิเคชัน

ionic-2

หน้าแอพพลิเคชัน

ionic-3

กดปุ่มเพื่อเปิด เมนูด้านข้าง แล้วทำการ Login

ให้เราเปิดไฟล์ใน Path “c:/xampp/htdocs/LoginSample/www/js/” เรียกแก้ไขเพียง 1 ไฟล์คือ controller.js ครับ โดยการแก้ไขส่วนของการทำงานของ Modal form เด้งจากล่างขึ้นบน ที่ $Scope.Function ชื่อว่า “doLogin()” โดยให้แก้ไขฟังก์ชันดังกล่าวให้เป็นดัง code ข้างล่าง ใช้ข้อมูลว่า username คือ admin และ password คือ admin เช่นกัน

เป็นการกำหนดว่าหาก user และ pass ที่ใส่เข้าไปจาก Form หน้า login.html ผ่าน ng-model นั้นถูกให้ console.log แจ้งว่า ‘success’ แต่ถ้าไม่ถูกให้แจ้งว่า ‘invalid’ โดยใช้ $Scope เรียกฟังก์ชันเพิ่มเติมที่เราต้องเขียนเพิ่มคือ

และ

ให้เราไปแก้ไขส่วนของ .controller(‘AppCtrl’) ข้างบนดังนี้

เป็นการเพิ่ม function เสริมในส่วนของ $ionicPopup เพิ่มเข้ามาเพื่อทำหน้าจอ Popups แจ้งเตือนสำหรับ showAlertSuccess() และ showAlertFail() หากเพิ่มแล้วให้เราเขียนฟังก์ชันเพิ่มเติมดังนี้

ภาพรวมของไฟล์ controller.js จะเป็นดังนี้ครับ

ทดสอบระบบกันหน่อย โดยการใส่ข้อมูลผิดก่อน

ionic-5

สังเกตที่ส่วนของ Console Log บนบราวเซอร์

ionic-6

ทีนี้ลองใส่รหัส Username และ Password เป็น admin และ admin เราก้จะเข้าระบบได้พร้อมการแจ้งเตือนที่ดึงเอา Username จาก $scope.loginData มาโชว์ครับ

ionic-7

คงไม่ยากเกินไปใช่ไหมครับ ทบทวนบทเรียนเก่าๆ ได้ที่: http://www.daydev.com/category/developer/angularjs

Tags

Banyapon Poolsawasd

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button
Close
Close

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน