WORKSHOP NODEJS & VUEJS - กับระบบจองห้องประชุม

ระบบจองห้องประชุมโดยคอร์สสอนจะทำให้คุณสามารถทำงานคนเดียวได้

3.95 (86 reviews)
Udemy
platform
ภาษาไทย
language
Web Development
category
WORKSHOP NODEJS & VUEJS - กับระบบจองห้องประชุม
212
students
25.5 hours
content
Oct 2018
last update
$19.99
regular price

What you will learn

ได้ระบบจองห้องประชุมไปต่อยอดต่อกับโปรเจคของท่าน

ได้เข้าใจเรื่องของการเขียน Node js เป็นระบบจริงๆ

ได้เข้าใจเรื่องของการเขียน Vue js เป็นระบบจริงๆ

ได้รู้เรื่องการเชื่อมต่อกันระหว่าง Node js และ Vue js

ได้ไฟล์ออกแบบฐานข้อมูล ER Diagram เพื่อเอาไปศึกษาและต่อยอดต่อ

ได้ไฟล์ออกแบบหน้าตาระบบ UI เพื่อเอาไปแก้ไขต่อและได้รู้วิธีเขียน Code ตาม UI

ได้ไฟล์ Source code ของระบบที่สอบตามวิดีโอนั้นๆ และ Source code ของ Git อีกทางเลือก

Description

ระบบจองห้องประชุมโดยคอร์สสอนจะทำให้คุณสามารถทำงานคนเดียวได้ มีไฟล์ Requiment, ER Diagrame, และ ไฟล์ UI design แถมมาให้เหมาะกับท่านที่ต้องทำโปรเจคจบทำงานเองทั้งหมดคนเดียว หรือคนที่ต้องการอยากจะเขียนระบบเองคนเดียวทั้งหมดครับ คอร์สนี้หากใครซื้อไปไม่ใช่แค่ได้เรียนรู้ แต่ได้ระบบไปใช้หรือไปขายต่อได้ด้วยนะครับ ซึ่งเนื้อหาภายใน คอร์สจะมีรายละเอียดคร่าวๆ ดังนี้

• แนะนำการติดตั้งโปรแกรมสำหรับเขียน Workshop
• การสร้างโปรเจคใหม่และการตั้งค่าโปรเจคเริ่มต้น
• หน้าบ้าน (Front-End)
• หลังบ้าน (Back-End)
• ตั้งค่าโปรเจคให้ทั้งสองสามารถเชื่อมต่อกันได้โดยไม่ต้องใช้ระบบ AccessToken, JWT
• การเชื่อมต่อฐานข้อมูล (MySQL)
• Import Schema จาก ER-Diagram
• การสร้างหน้าต่างๆตาม UI ที่ออกแบบไว้ด้วย Adobe XD
• การ Import Libraries ต่างๆเข้ามาใช้งานโปรเจค
• การตั้งค่าเชื่อมต่อระหว่างหน้าบ้าน Front-End และหลังบ้าน Back-End
• การสร้าง Route ทั้งสองส่วน (หน้าบ้าน Front-End, หลังบ้าน Back-End)
• การทำในส่วนของ Validation ทั้งหน้าบ้าน Front-End และหลังบ้าน Back-End
• การทดสอบและการแก้ไขขัอผิดพลาดต่างๆ
• การเขียน Responsive Web ให้รองรับได้หลายหน้าจอ (Desktop, Tablet, Mobile)
• การตั้งค่าโปรเจคก่อน Publish ขึ้น Production Server
• การ Build project รวมหน้าบ้าน Front-End และหลังบ้าน Back-End เข้าด้วยกัน
• การนำโปรเจคที่ Build แล้วมาประยุกต์ใช้งานกับ Docker

Content

Introduction

Introduction
แนะนำการติดตั้ง ตอนที่ 1
แนะนำการติดตั้ง ตอนที่ 2 - ดาวน์โหลดและติดตั้งโปรแกรม
แนะนำการติดตั้ง ตอนที่ 3 - Extension ที่จำเป็นสำหรับเขียนโปรแกรม

การสร้างโปรเจ็คใหม่

ไฟล์ต่างๆที่เกี่ยวข้องกับการพัฒนาระบบ
สร้างโปรเจค Backend
สร้างโปรเจค Frontend
Start โปรเจค Backend และ Frontend ไปพร้อมกัน
ติดตั้ง Package ที่จำเป็นสำหรับ Backend
ตั้งค่า Package ที่จำเป็นสำหรับ Backend
ติดตั้ง Package ที่จำเป็นสำหรับ Frontend
ตั้งค่า Package ที่จำเป็นสำหรับ Frontend

การเชื่อมต่อกับฐานข้อมูล

การสร้างฐานข้อมูล MySQL จาก ER Diagram
ติดตั้ง Package ของ MySQL สำหรับ Backend

การสร้างหน้าลงทะเบียน

แนะแนวการติดตั้ง Adobe XD
Backend - สร้าง Route
Backend - Validation และ Middleware
Backend - บันทึกข้อมูลลงฐานข้อมูล
Frontend - สร้าง Route
Frontend - สร้างหน้าเว็บจาก UI ตอนที่ 1
Frontend - สร้างหน้าเว็บจาก UI ตอนที่ 2
Frontend - ทำ Validation ด้วย VeeValidate
Frontend - ส่งข้อมูลไปยัง Backend

การสร้างหน้าเข้าสู่ระบบ

Backend - สร้าง Route และ Validate
Backend - เชื่อมต่อกับฐานข้อมูล
Frontend - สร้างหน้าเว็บตาม UI
Frontend - เชื่อมต่อกับ Backend

หน้าออกจากระบบ

Backend - การออกจากระบบ
Frontend - สร้าง Navbar ตาม UI
Frontend - ติดตั้ง Icon Font-awesome และเชื่อมต่อ Backend
Frontend - ตรวจสอบการเข้าถึงหน้าและการใช้งาน Store Vuex

วิดีโอพิเศษ

ปรับแต่งหน้าเว็บให้ตรงกับ UI
ปรับแต่งหน้าเว็บ ติดตั้ง Alertifyjs เพื่อทำ popup dialog

หน้าจัดการข้อมูลอุปกรณ์ห้องประชุม

Backend - สร้าง Route
Backend - แปลง Base64 String เป็นรูปภาพ
Backend - ส่วนของการเพิ่มข้อมูล
Backend - ส่วนของการลบข้อมูล
Backend - ส่วนของการแก้ไขข้อมูล
Backend - ส่วนของการแสดงข้อมูลและ Paginatio
Backend - ส่วนของการแสดงข้อมูลและ Search
Frontend - สร้างหน้า Layout โดยใช้ Slot
Frontend - สร้างหน้า Sidebar ใส่ Layout
Frontend - สร้างหน้า Sidebar ปรับแต่ง
Frontend - สร้างหน้ารายการข้อมูลตาม UI
Frontend - สร้างหน้ารายการข้อมูลตาม UI ตอนท
Frontend - ดึงข้อมูลจาก Backend มาแสดงรายกา
Frontend - ตกแต่งรูปภาพให้อยู่ใน Table แบบส
Frontend - สร้าง Pagination ตอนที่ 1
Frontend - สร้าง Pagination ตอนที่ 2
Frontend - สร้าง Search box ตอนที่ 1
Frontend - สร้าง Search box ตอนที่ 2
Frontend - สร้าง Search box ตอนที่ 3
Frontend - การเพิ่มข้อมูล (สร้างหน้า Form)
Frontend - การเพิ่มข้อมูล (การทำ Validation
Frontend - การเพิ่มและลบข้อมูล
Frontend - การแก้ไขข้อมูล
แก้ไขข้อผิดพลาดก่อนเข้าบทเรียนถัดไป

หน้าจัดการข้อมูลห้องประชุม

Backend - Introduction และการสร้าง Route
Backend - Install ESLint ให้ตรวจสอบ Error ช่วยเรา
Backend - การเพิ่มข้อมูล
Backend - การลบข้อมูล
Backend - การแก้ไขข้อมูล
Backend - การแสดงข้อมูล Pageination และ Search
Frontend - สร้าง Route และสร้างหน้า ตาม UI
Frontend - การแสดงข้อมูล Pagination และ Search
Frontend - การลบข้อมูล
Frontend - การเพิ่มข้อมูล
Frontend - การแก้ไขข้อมูล
การแก้ไขข้อผิดพลาดเรื่องรูปภาพอัพโหลดเกิน

หน้าส่วนของการจองสำหรับสมาชิก

Backend - อธิบายและแก้ไข UI
Backend - แสดงรายการห้องประชุม
Backend - การเพิ่มการจองห้องประชุม สร้าง Route
Backend - การเพิ่มการจองห้องประชุม Custom validation
Backend - การเพิ่มการจองห้องประชุม Insert หลายตารางด้วย Transaction
Backend - แสดงรายละเอียดห้องประชุม
Backend - แสดงรายประวัติการจอง
Frontend - หน้าแสดงรายการห้องประชุมที่จะจอง ตอนที่ 1
Frontend - หน้าแสดงรายการห้องประชุมที่จะจอง ตอนที่ 2
Frontend - หน้าแสดงรายการห้องประชุมที่จะจอง ตอนที่ 3
Frontend - หน้าเพิ่มการจองห้องประชุม สร้าง Modal dialog
Frontend - หน้าเพิ่มการจองห้องประชุม สร้าง Forms
Frontend - หน้าเพิ่มการจองห้องประชุม ทำตัวเปิด ปิด Modal
Frontend - หน้าเพิ่มการจองห้องประชุม ดึงข้อมูลอุปกรณ์ห้องประชุม
Frontend - หน้าเพิ่มการจองห้องประชุม Validation
Frontend - หน้าเพิ่มการจองห้องประชุม
Frontend - หน้าเพิ่มการจองห้องประชุม เชื่อมต่อ Backend
Frontend - หน้าแสดงรายละเอียดห้องประชุม เชื่อมต่อ Backend
Frontend - หน้าแสดงรายละเอียดห้องประชุม สร้างหน้าจาก UI
Frontend - หน้าแสดงรายละเอียดห้องประชุม แก้ไขข้อผิดพลาด
Frontend - หน้าแสดงประวัติการจองห้องประชุม สร้างหน้าตาม UI
Frontend - หน้าแสดงประวัติการจองห้องประชุม ดึงข้อมูลจาก Backend
Frontend - หน้าแสดงประวัติการจองห้องประชุม Pagination และ Search

หน้าส่วนของการจองสำหรับผู้ดูแลระบบ

Backend - แนะนำ UI
Backend - ดึงข้อมูลห้องมาทำ Select
Backend - ดึงข้อมูลการจองแสดงในปฏิทิน
Backend - ดึงข้อมูลการจองห้องประชุม
Backend - อัพเดตสถานะการจอง
Backend - ลบข้อมูลการจอง
Frontend - สร้างหน้าสร้าง Route
Frontend - ทำ Select box เชื่อมต่อกับ Backend
Frontend - ติดตั้ง Lib ปฏิทิน Fullcalendar
Frontend - เปลี่ยนภาษาไทยให้ปฏิทิน Fullcalendar
Frontend - Add ข้อมูลการจองจาก DB ของปฏิทิน
Frontend - สร้างหน้าอนุมัติข้อมูลการจอง
Frontend - Search และ Pagination
Frontend - สร้างปุ่มอัพเดตสถานะการจอง
Frontend - เชื่อมต่อ Backend อัพเดตสถานะการจอง
Frontend - ลบข้อมูลการจอง

ส่วนของสิทธิ์การเข้าถึงหน้า

Backend - แนะแนวเริ่มต้น
Backend - สร้างฟังชั่นตรวจสอบสิทธิ์เข้าถึงหน้า
Backend - เช็คสิทธิ์การเข้าถึงหน้าในแต่ละ Route
Frontend - สร้างฟังก์ชั่นเช็คสิทธิ์การเข้าถึงหน้า
Frontend - นำฟังก์ชั่นสิทธิ์การเข้าถึงหน้าไปใช้งาน
Frontend - ตรวจสอบสิทธิ์เพื่อซ่อนหรือแสดง Sidebar

ปรับแต่งระบบ แก้ไขข้อผิดพลาด

การ Redirect หน้าหลังจาก Login
การทำ Router link active
Filter และการ Convert format datetime
แก้ไขเรื่องการจองซ้ำกันในช่วงเวลาเดียวกัน

การแสดงผลหลายหน้าจอ Responsive web

แนะแนว
หน้า Login และ Register
หน้าห้องประชุมที่จะจองและหน้าประวัติการจอง
Search box และปุ่ม Logout ของ Navbar
ปฏิทินแสดงข้อมูลรายการจองห้องประชุม
หน้าจัดการข้อมูลการจองห้องประชุม
หน้าจัดการข้อมูลอุปกรณ์ห้องประชุม
เรื่องของ Pagination
หน้าจัดการข้อมูลห้องประชุม

การ Publish ระบบที่ทำเสร็จแล้ว

EP15-01 การนำโปรเจ็คขึ้น Production - Build Frontend ชี้ที่อยู่ไปที่ Backend
config Backend ให้แยกระหว่างการ Dev กับ Prod
เรื่องของ Database
Build production ง่ายแค่คำสั่งเดียว
นำระบบสร้างเป็น Docker Image

ทดสอบระบบแก้ไขข้อผิดพลาด

แก้ไขเรื่องของการจองคนละห้องซ้ำกัน
ทดสอบระบบต่างๆ

Reviews

Warat
August 2, 2021
อยากรู้ว่าเวลาทำ pm2 แล้ว รันบนเซิฟ ให้เราเรียกผ่าน ชื่อไฟล์ในเครื่องเซฟเวอร์ แล้วเข้าแอพ เหมือนกับเวลาเขียน project ด้วย php อะไรแบบนี้น่ะครับ เช่น เข้าผ่าน http://localhost/booking ก็รันแอพเลยไม่ต้องใส่พอร์ตทำยังไงน่ะครับ
กรกฤต
February 27, 2020
กระทัดรัดดีครับ แต่น่าจะอธิบาย ว่า systex หรื่อ function ต่างๆที่เอามาใช้นำมาจากให้ เพราะส่วนตัวผมไม่มีพื้นฐานเรื่อง เลยยากที่จะนำไปประยุกต์กับ logic ตัวเอง แต่โดยรวมดีครับ
Pika
December 14, 2019
ให้คะแนนในส่วนของ Code ครับ นอกนั้นผมอยากให้ปรับปรุง เพราะเห็นทำมาหลายวิดีโอแล้ว และอยากให้สอน อธิบายได้ตาม objective ที่ประกาศไว้จริงๆครับ คือ ได้ความเข้าใจ ไม่ใช่ได้แต่การทำตาม Code ผมไม่เข้าใจว่าทำไมหลายๆ Section ผู้สอนถึงสอนแบบรีบๆสอน หลายๆทีก็พูดแบบรีบๆพูด เร็วๆ และเสียงเบาในหลายครั้ง เหมือนกับว่าเป็นการสอนที่ไม่ได้เตรียมมาก่อน หรือสอนแบบ Live รึเปล่าครับ ซึ่งผมมองว่าผู้สอนควรจะเตรียมตัวก่อนสอนแล้ว อธิบายอะไรก็ควรชัดเจนครับ ถ้าคุณพูดช้าลง ฟังรู้เรื่อง แล้วความยาววิดีโอเพิ่มไป 30 วินาที หรือ 1 นาที ผมว่ามันไม่ทำให้เสียหายนะครับ กลับกันผู้เรียนจะได้ประโยชน์ซะอีกครับ สุดท้ายนี้ผมว่าหัวข้อและตัวอย่างงานดูน่าสนใจมากครับ แต่เสียดายที่ผู้สอนไม่ได้อธิบายความเข้าใจเลย มีแต่โค้ดให้ดู ผมหวังว่าจะมีการปรับปรุงขึ้นนะครับ หรือถ้าคิดว่าคุณทำดีอยู่แล้ว ก็แล้วแต่เลยครับ ผมขอแสดงความเห็นตรงๆแบบนี้ เพราะอยากให้คนไทยได้สอนได้เรียนอะไรแบบได้ความเข้าใจมากกว่าการจำแล้วทำตามครับ
Piyanat
December 8, 2018
อ.พูดเร็วมาก แถมสลับหน้าจอไปมา ทำให้คนเรียนตามไม่ทันต้องกดหยุดหลายครั้ง อยากให้สอนช้าลงหน่อย และ ไม่ควรสลับหน้าจอโปรแกรมไปมาบ่อยๆ

Charts

Price

WORKSHOP NODEJS & VUEJS - กับระบบจองห้องประชุม - Price chart

Rating

WORKSHOP NODEJS & VUEJS - กับระบบจองห้องประชุม - Ratings chart

Enrollment distribution

WORKSHOP NODEJS & VUEJS - กับระบบจองห้องประชุม - Distribution chart

Related Topics

1929422
udemy ID
9/24/2018
course created date
10/29/2019
course indexed date
Bot
course submited by