ionic3 Login-Logout แบบมี SideMenu

ภาพที่ 1 : เพจ Login ไม่อยู่ในแทบ และไม่แสดงเมนู (เพจอื่นๆนอกจาก Login แสดงเมนูได้)
ภาพที่ 2 : เพจ Home, About และ Contact อยู่ในแทบ
ภาพที่ 3 : กดด้านบนซ้าย หรือรูทจากหน้าจอด้านซ้ายมาด้านขวา แสดงเมนู
ภาพที่ 4 : เพจ Help ไม่อยู่ในแทบ
ภาพที่ 5 : เพจ More มีหน้าจอ logout

login UI2

Continue reading

ionic3: การสร้าง SideMenu (tabs)

ภาพที่ 1 : เพจ Home, About และ Contact อยู่ในแทบ
ภาพที่ 2 : กดด้านบนซ้าย หรือรูทจากหน้าจอด้านซ้ายมาด้านขวา แสดงเมนู
ภาพที่ 3 : เพจ Help ไม่อยู่ในแทบ

สร้างโปรเจ็กส์ชื่อ blog

ionic start blog tabs

สร้างเพจชื่อ help

ionic g page help

หน้า Home, About และ Contact อยู่ในแทบ แต่หน้า Help ไม่อยู่ในแทบ

Continue reading

ionic: จำการ login ของผู้ใช้

เปิดมาครั้งแรกจะขึ้นว่า User is not logged in!
ถ้ากดปุ่ม login จะขึ้น User is logged in! และจะสามารถกดปุ่ม Next Page เพื่อไปหน้าถัดไปได้
พอกด logout ก็จะกลับมาขึ้นว่า User is not logged in!

จำการ login ของผู้ใช้ โดยกาาเก็บ token ผู้ใช้ลง localStorage
แล้วใช้ Auth Guard ตรวจสอบข้อมูลดังกล่าว

โดย concept แล้ว Auth Guard เราใช้

  • ionViewCanEnter()
  • ionViewCanLeave()

ดู IONIC PAGE LIFECYCLE EVENTS ทั้งหมด

Continue reading

ionic3: การใช้งาน localStorage

การเก็บข้อมูลของ localStorage เก็บในลักษณะของ key/value

  1. การเขียนและอ่านข้อมูลจาก localStorage
  2. การอ่านข้อมูลจาก localStorage โดยที่ยังไม่มี key นั้นอยู่
  3. การอ่านข้อมูลจาก localStorage ที่มี key นั้นเก็บอยู่
  4. การลบ localStorage โดยการกำหนด key

Continue reading

การกำหนดหน้าแรกที่จะแสดง

กำหนดหน้าแรกที่จะแสดงให้เป็นหน้า login

src/app/app.component.ts

ดูตัวอย่างเต็มๆที่
สร้างหน้า Login – logout

ionic3 – คำนวณระยะทางระหว่างจุด 2 จุด (latitude-longitude points)

The Haversine Formula

พารามิเตอร์

lat1, lon1: The Latitude and Longitude of point 1 (in decimal degrees)
lat2, lon2: The Latitude and Longitude of point 2 (in decimal degrees)

Link