Workshop Angular 6 กับระบบสมาชิก

Name: Workshop Angular 6 กับระบบสมาชิก
Rating: 4.6 (134 reviews)

โดยระบบนี้จะเป็นส่วนของ Frontend ในการทำระบบสมาชิก

Highest Rated

Created byWanchaloem Laokeut

Last updated 11/2018

Thai

What you'll learn

ได้ความรู้เรื่องการทำงานจริงของ Angular 6 ว่าเป็นยังไง
เรียนรู้การประยุกต์เอา Admin template มาใช้ได้แบบง่ายๆ
เรียนรู้การเข้าสู่ระบบโดยใช้ AccessToken เพื่อที่จะนำไปประยุกต์กับ Webapi
เรียนรู้การเชื่อมต่อกับ Web api ที่เตรียมมาไว้ใน code ให้
มี Source code ที่ติดมากับทุกวิดีโอ
มี Template ของ Bootstrap 4 admin template มาให้
มี Source code NodeJS Web api มาให้ทดสอบเชื่อมต่อ

Course content

10 sections • 74 lectures • 15h 20m total length

Introduction6:27
ตัวอย่างวิดีโอสอน Angular 6 กับระบบสมาชิก

แนะนำการติดตั้งและส่วนเสริมที่จำเป็นสำหรับสร้างโปรเจค5:52
สร้างโปรเจคใหม่6:19
โหลด Bootstrap 4 Admin Template Free มาใส่โปรเจค17:38
ติดตั้งส่วนเสริมที่จะนำมาใช้ในระบบ ngx-bootstrap12:02

เพิ่ม SharedsModule สำหรับแชร์ไลบรารี่ร่วมกัน11:44
ทำให้ Code น้อยลงด้วย ng-content5:28
สร้างหน้าในส่วนของ Navbar17:17
แก้ไข Sidebar ไม่ทำงาน3:55
ส่วนของ Sidebar ตอนที่ 120:14
ส่วนของ Sidebar ตอนที่ 29:30
ทำให้เมนู Active ด้วย routerLinkActive6:38

Register page - สร้าง Form10:32
Register page - validation17:12
Register page - สร้าง validation เอง6:16
Register page - เชื่อมต่อกับ Service15:16
Login page - หน้าเข้าสู่ระบบ8:37
Login page - เชื่อมต่อกับ Service5:25
จำลอง Service ให้ Login และ Register ทำงานสัมพันธ์กัน17:13
ทำส่วนของการ เก็บ Session ฝั่ง Frontend16:52

Logout - การออกจากระบบ4:55
Sidebar - แสดงข้อมูลผู้ใช้งานที่เข้าสู่ระบบ ตอนที่ 118:37
Sidebar - แสดงข้อมูลผู้ใช้งานที่เข้าสู่ระบบ ตอนที่ 22:30
สร้างหน้าแก้ไขข้อมูลส่วนตัว13:44
สร้างหน้าแก้ไขข้อมูลส่วนตัว Form group13:03
สร้างหน้าแก้ไขข้อมูลส่วนตัว Upload file9:55
สร้างหน้าแก้ไขข้อมูลส่วนตัว Validation7:30
สร้างหน้าแก้ไขข้อมูลส่วนตัว เชื่อมต่อกับ Service7:34
สร้างหน้าเปลี่ยนรหัสผ่าน6:38
สร้างหน้าเปลี่ยนรหัสผ่าน สร้างฟอร์ม9:20
สร้างหน้าเปลี่ยนรหัสผ่าน Form group5:04
สร้างหน้าเปลี่ยนรหัสผ่าน Validation16:08
สร้างหน้าเปลี่ยนรหัสผ่าน เชื่อมต่อกับ Service16:01

การแสดงข้อมูล วางโครงระบบ14:23
การแสดงข้อมูล เชื่อมต่อกับ Service19:38
การแสดงข้อมูล Search & Filter ตอนที่ 113:29
การแสดงข้อมูล Search & Filter ตอนที่ 214:33
การแสดงข้อมูล Pagination ตอนที่ 16:13
การแสดงข้อมูล Pagination ตอนที่ 225:06
การแสดงข้อมูล ปรับแต่งข้อผิดพลาดบางส่วนของหน้า7:37
การแสดงข้อมูล ปรับแต่งข้อผิดพลาดในการค้นหา6:33
การเพิ่มข้อมูล วางโครงระบบ18:14
การเพิ่มข้อมูล Form group7:53
การเพิ่มข้อมูล Upload file14:24
การเพิ่มข้อมูล Validation13:14
การเพิ่มข้อมูล เชื่อมต่อกับ Service18:25
การลบข้อมูล สร้าง Confirm dialog14:59
การลบข้อมูล เชื่อมต่อกับ Service9:53
การแก้ไขข้อมูล การรับค่า Param หรือ Query param16:28
การแก้ไขข้อมูล นำข้อมูลจาก service มาอัพเดต Form19:35
การแก้ไขข้อมูล Update form validation6:26
การแก้ไขข้อมูล เชื่อมต่อกับ Service20:14
Bonus แก้ไขชื่อที่มันล้นออกจาก Sidebar3:42
Bonus การค้นหาโดยใช้ Datepicker ตอนที่ 116:30
Bonus การค้นหาโดยใช้ Datepicker ตอนที่ 212:33
Bonus การค้นหาโดยใช้ Datepicker ตอนที่ 319:19
การแก้ไขข้อผิดพลาดหน้าลงทะเบียน6:53

จำกัดสิทธิ์หากยังไม่เข้าสู่ระบบ ตอนที่ 110:40
จำกัดสิทธิ์หากยังไม่เข้าสู่ระบบ ตอนที่ 210:55
จำกัดสิทธิ์หากเข้าสู่ระบบแล้ว7:31
จำกัดสิทธิ์จาก Role ของสมาชิก ตอนที่ 18:30
จำกัดสิทธิ์จาก Role ของสมาชิก ตอนที่ 28:13
จำกัดสิทธิ์จาก Role ของสมาชิก ตอนที่ 310:28
จำกัดสิทธิ์จาก Role ของสมาชิก ตอนที่ 423:09

สร้าง Http Service จาก HTTP Client12:04
เชื่อมต่อหน้าลงทะเบียน (Register)6:33
ปรับแต่ง Error response11:50
เชื่อมต่อหน้า Login และ Access token8:54
เชื่อมต่อหน้า Profile and Change password27:46
แสดงข้อมูล pagination search และ ลบสมาชิก22:52
เพิ่มและแก้ไข สมาชิก20:56

Requirements

Angular 6
Bootstrap 4
VSCode

Description

Workshop Angular 6 กับระบบสมาชิก

โดยระบบนี้จะเป็น ส่วนของ Frontend ในการทำระบบ สมาชิกนะครับโดยเมื่อทำเสร็จแล้ว เราก็สามารถเชื่อมต่อกับ Web api ได้เลย สามารถนำไปเชื่อมต่อกับ Backend ได้ทุกภาษาครับผม แค่ไปแก้ที่ Service เท่านั้นนะ ง่ายและสะดวกมากครับ โดยคอร์สนี้จะเหมาะกับ ผู้ที่สนใจเรื่องของระบบสมาชิก กับการยืนยันตัวตนกับ Web api ไม่ใช่แค่นั้นครับ ในวิดีโอยังมีการสอน วางโครง การใช้ Template การใช้ตัวช่วยในการเขียน Bootstrap4 การพลิกแพลงการแก้ปัญหาต่างๆ และอีกมากมายที่นี่ หากใครคิดว่าจะทำโปรเจค ตัวนี้เหมาะที่จะเอาไปต่อยอดที่สุดครับ

Who this course is for:

ผู้ที่เริ่มต้นศึกษาการเขียน Angular 6 แบบ Workshop
ผู้ที่เริ่มต้นศึกษาการประยุกต์เอา Admin template มาใช้
ผู้ที่อยากจะเข้าใจเรื่องการทำระบบสมาชิกของ Frontend
ผู้ที่อยากรู้ว่าการกำหนดสิทธิ์ของสมาชิกของ Frontend เป็นอย่างไร
ผู้ที่อยากรู้วิธีการเชื่อมต่อกับเว็บ API หลังจากที่พัฒนาระบบเสร็จ

Workshop Angular 6 กับระบบสมาชิก

What you'll learn

Explore related topics

Course content

Introduction ตัวอย่างเนื้อหาโดยรวมทั้งหมด1 lecture • 6min

สร้าง Project Angular 6 ระบบสมาชิก4 lectures • 42min

การสร้าง Router เริ่มต้นสำหรับระบบสมาชิก2 lectures • 39min

เริ่มต้นการวางโครงระบบสมาชิก7 lectures • 1hr 15min

ส่วนของหน้า ก่อนยืนยันตัวตน8 lectures • 1hr 37min

ส่วนของหน้า หลังยืนยันตัวตน13 lectures • 2hr 11min

CRUD เพิ่ม ลบ แก้ไข แสดง ค้นหา และการแบ่งหน้าสำหรับสมาชิก24 lectures • 5hr 26min

การจัดกัดสิทธ์ของผู้ใช้งาน (Role)7 lectures • 1hr 19min

ส่วนของการเชื่อมต่อกับ Backend7 lectures • 1hr 51min

ส่วนของการแก้ไขปัญหาที่ได้รับ Feedback จากลูกค้า1 lecture • 14min

Requirements

Description

Who this course is for: