มือใหม่หัดใช้ Angular ตอนที่ 4: สร้างหน้า register และ login กับ Firebase(AngularFire) [2/2]

ตอนก่อนหน้า – มือใหม่หัดใช้ Angular ตอนที่ 3: สร้างหน้า register และ login กับ Firebase(AngularFire) [1/2]

มาต่อกันกับตอนที่สองของการสร้างหน้า register และ login กับ Firebase(AngularFire) กัน

เป็นยังไงกันบ้างกับการสร้าง Account ของ Firebase, การ import AngularFire2 เข้ามาในเว็บของเรา และการสร้าง component ด้วย Angular CLI ไปเมื่ออาทิตย์ที่แล้ว เรื่องง่ายๆใช่ไหมหล่ะ! ในวันนี้เราก็จะมาทำอะไรที่มันยากขึ้นอีกหน่อย นั่นก็คือ…

การสร้างหน้า Register และหน้า Login นั่นเอง (เย่!)

ก่อนอื่นเรามาทำความรู้จักกับไฟล์ของเรากันก่อน

หากสังเกตดูดีๆ ในโฟลเดอร์ src/app/register จะมีโครงสร้างประมาณนี้

—– register

———- register.compontnt.html

———- register.compontnt.css

———- register.compontnt.ts

———- register.compontnt.spec.ts

โดยที่ไฟล์ .html กับ .css คงเป็นไฟล์ที่หลายๆคนคุ้นเคยอยู่แล้ว แล้วไฟล์ .ts หล่ะ? ไฟล์ .ts ก็เปรียบเสมือนไฟล์ .js (๋Javascript) เพียงแต่ในการเขียน Angular นั้น เราจะใช้ Typescript แทน Javascript นั่นเอง

ส่วนไฟล์ .spec.ts นั้น… เราไม่ได้ใช้ จึงขอข้ามไปก่อน ^ ^)/

* เราสามารถสร้าง component โดยไม่สร้างไฟล์ .spec.ts ได้ โดยการใช้คำสั่ง

ng g c [ชื่อ component] spec –false

เมื่อเรารู้แล้วว่าเราจะมีไฟล์อะไรบ้าง งั้นเราก็มาเริ่มเลย 🙂

---

การทำระบบ Register

เริ่มจากสร้างหน้า UI ให้ User มาสมัครสมาชิก ซึ่งในที่นี้เราจะมี input 3 ช่อง

• display name
• username
• password

สิ่งที่เราทำคือการไปแก้ไขไฟล์ register.component.html ให้มี 3 input ตามที่ต้องการ

แต่เอ๊ะ… ทำไมแก้ไฟล์แล้วหน้าตาของเว็บยังไม่เปลี่ยนเลยอ่ะ? ก็เพราะว่าเราไม่ได้ใช้ register component ในหน้าหลักหน่ะสิ เพราะงั้นเราก็เลยไปแก้ไฟล์ app.component.html ให้เป็นแบบนี้

<app-register></app-register>

โดยสิ่งที่เราทำนอกจากการสร้างหน้า HTML ก็คือ การ bind ข้อมูลโดยการใช้ [(ngModel)] ใน input

// register.component.html

<input mdInput placeholder=”E-mail” type=”email” [(ngModel)]=”inputEmail”>

// register.component.ts

export class RegisterComponent implements OnInit {
inputEmail = ”;

…

}

*ก่อนที่จะใช้ ngModel ได้ ต้องเข้าไป import FormsModule ในไฟล์ app.module.ts ก่อนนะ

import { FormsModule } from ‘@angular/forms’;

@NgModule({
imports: [
FormsModule,
],
[…]
})

โดยสิ่งที่ ngModel ทำก็คือ เมื่อ user มีการพิมพ์ข้อความใน input จะมีการอัพเดทค่าตัวแปรนั้นๆโดยอัตโนมัติ (มันดีมากๆเลยแหละ > <)

โค้ดในส่วนของการ register ก็จะเป็นอะไรประมาณนี้

 

แล้วเมื่อเราลองใส่ข้อมูลและกด register…

สมัครสมาชิกเรียบร้อย~

*password ต้องมีอย่างน้อย 6 ตัวอักษร

**ณ ตรงนี้ไม่ได้ทำเป็น form ให้สามารถ validate ข้อมูลได้นะ ไว้จะเขียนเกี่ยวกับเรื่องนี้อีกที 🙂

 

---

การทำระบบ Login

หลังจากที่เรามีระบบสมัครสมาชิกกันแล้ว เราก็มาต่อกันที่ระบบล็อกอิน

เริ่มจากทำการสร้าง component เหมือนตอนสร้าง register เลยแหละ ในกรณีนี้ให้ชื่อว่า ‘login’ ก็แล้วกัน

แล้วไปเปลี่ยนหน้า app.component.html เป็นแบบนี้

<app-register></app-register>
<hr>
<app-login></app-login>

เพื่อที่จะได้ดูง่ายๆ สองส่วนพร้อมๆกันเลย 🙂

หลังจากนั้น ก็เขียนหน้า HTML โดยมี input เป็น email และ password

ในส่วนของฟังก์ชัน login ก็สามารถเขียนได้ตามนี้เลย

 

โดยในที่นี้เราก็เก็บค่าต่างๆที่จำเป็นไว้ในตัวแปร userData ด้วย เผื่อว่าจะเอาไปทำอะไรต่อ

เพียงเท่านี้ เมื่อเราลองกด login ด้วย email และ password ที่เราสมัครสมาชิกไว้

Login successful เรียบร้อยแล้วจ้าาา~

 

เพียงเท่านี้เราก็ทำระบบ login ด้วย email และ password เรียบร้อยแล้ว

ถือว่าไม่ยากเลยใช่ไหมหล่ะ สามารถลองทำตามได้ง่ายๆเลย

หากใครมีข้อแนะนำสามารถติชมได้เลยนะครับ ขอบคุณที่เข้ามาอ่านกัน สวัสดีครับ 🙂