Full-Stack ASP.NET Core, Next.js and SQL Server

Section 1: ภาพรวมเว็บแอปพลิเคชันและเครื่องมือ

• เว็บแอปพลิเคชันทำงานอย่างไร: หน้าเว็บ (Frontend), API (Backend) และฐานข้อมูล

• รู้จักโปรเจกต์ SupplyDesk ที่จะสร้างต่อเนื่องตลอด 5 วัน

• ติดตั้ง .NET 10 SDK, Visual Studio Code พร้อม C# Dev Kit หรือ Visual Studio 2026

• Lab: สร้างโปรเจกต์แรกด้วยคำสั่ง dotnet new console และ dotnet run

Section 2: ตัวแปร ชนิดข้อมูล และตัวดำเนินการ

• ชนิดข้อมูลพื้นฐาน int, decimal, string, bool และ DateTime

• การรับค่าและแสดงผล การแปลงชนิดข้อมูล และ String Interpolation

• ตัวดำเนินการทางคณิตศาสตร์และการเปรียบเทียบ

• Lab: โปรแกรมคำนวณมูลค่าพัสดุคงเหลือจากจำนวนและราคาต่อหน่วย

Section 3: เงื่อนไขและการวนซ้ำ

• การตัดสินใจด้วย if, else และ switch

• การวนซ้ำด้วย for, foreach และ while

• การสร้างเมนูวนรับคำสั่งจากผู้ใช้

• Lab: เมนูหลักของ SupplyDesk ที่เลือกคำสั่งได้จนกว่าผู้ใช้จะออก

Section 4: เมธอด คลาส และ Object

• การแบ่งโค้ดเป็นเมธอด รับพารามิเตอร์และคืนค่า

• การสร้างคลาส Property และ Constructor เพื่อแทนข้อมูลจริง เช่น พัสดุและคำขอเบิก

• แนวคิด Object ที่ใช้ต่อในการเขียน API

• Lab: สร้างคลาส Item และ Request ของ SupplyDesk

Section 5: List และการจัดการข้อมูลด้วย LINQ

• เก็บข้อมูลหลายรายการด้วย List

• ค้นหา กรอง เรียงลำดับ และสรุปยอดด้วย LINQ เบื้องต้น (Where, OrderBy, Sum)

• การจัดการข้อผิดพลาดด้วย try และ catch

• Lab: ค้นหาพัสดุตามชื่อและสรุปยอดคงเหลือตามหมวดหมู่

Section 6: Workshop Day 1: โปรแกรม Console ของ SupplyDesk

• เก็บรายการพัสดุและคำขอเบิกใน List ในหน่วยความจำ

• เมนูเพิ่มพัสดุ ค้นหาพัสดุ และส่งคำขอเบิก

• ตรวจจำนวนที่ขอเบิกไม่ให้เกินยอดคงเหลือ และแจ้งข้อผิดพลาดให้ผู้ใช้

• Workshop: สรุปยอดคงเหลือและรายการคำขอเบิกทั้งหมดบนหน้าจอ Console

Section 7: เริ่มต้นกับ SQL Server 2025

• ติดตั้ง SQL Server 2025 Express Edition และ SQL Server Management Studio (SSMS)

• โครงสร้าง Database, Table, Column และชนิดข้อมูลที่ใช้บ่อย

• สร้างฐานข้อมูลและตารางทั้งด้วยหน้าจอและด้วยคำสั่ง CREATE TABLE

• Lab: สร้างฐานข้อมูล SupplyDesk และตารางแรก

Section 8: ออกแบบตารางจากโจทย์งานจริง

• แยกข้อมูลจากตาราง Excel ออกเป็นหลายตารางที่สัมพันธ์กัน

• Primary Key, Foreign Key และ Identity

• ออกแบบตาราง พัสดุ หมวดหมู่ แผนก ผู้ใช้ คำขอเบิก และรายการในคำขอ

• Lab: วาดแผนภาพความสัมพันธ์ของตารางทั้งหมดใน SSMS

Section 9: จัดการข้อมูลด้วย SQL

• เพิ่ม แก้ไข และลบข้อมูลด้วย INSERT, UPDATE และ DELETE

• ดึงข้อมูลด้วย SELECT, WHERE, ORDER BY และ TOP

• นำข้อมูลจาก Excel เข้าฐานข้อมูลด้วย Import Wizard

• Lab: นำเข้ารายการพัสดุตัวอย่างจากไฟล์ Excel

Section 10: รวมข้อมูลหลายตารางและสรุปผล

• เชื่อมตารางด้วย INNER JOIN และ LEFT JOIN

• สรุปข้อมูลด้วย GROUP BY, COUNT, SUM และ HAVING

• สร้าง View สำหรับรายงานที่ใช้บ่อย

• Lab: รายงานคำขอเบิกพร้อมชื่อผู้ขอ แผนก และรายการพัสดุ

Section 11: ความถูกต้องและความปลอดภัยของข้อมูล

• Constraint: NOT NULL, UNIQUE, CHECK และค่าเริ่มต้น

• Transaction เมื่อต้องบันทึกหลายตารางพร้อมกัน

• สำรองและกู้คืนฐานข้อมูลเบื้องต้น

• Lab: ป้องกันยอดคงเหลือติดลบด้วย CHECK และทดลอง Rollback

Section 12: Workshop Day 2: ฐานข้อมูล SupplyDesk

• สร้างฐานข้อมูล SupplyDesk ครบทุกตารางพร้อมความสัมพันธ์

• ใส่ข้อมูลตัวอย่างของพัสดุ แผนก ผู้ใช้ และคำขอเบิก

• Query รายงานยอดเบิกรายแผนกและพัสดุที่ใกล้หมด

• Workshop: สร้าง View รายงานและสำรองฐานข้อมูลก่อนเริ่มวันที่สาม

Section 13: พื้นฐาน REST API และ ASP.NET Core

• HTTP Method (GET, POST, PUT, DELETE), Status Code และ JSON

• สร้างโปรเจกต์ด้วย dotnet new webapi แบบใช้ Controller และทำความรู้จักโครงสร้างไฟล์

• Controller และ Routing

• เอกสาร OpenAPI ที่ ASP.NET Core สร้างให้ และเพิ่มหน้าทดสอบ API เช่น Swagger UI หรือ Scalar

• Lab: Endpoint แรกที่คืนรายการพัสดุเป็น JSON

Section 14: เชื่อม SQL Server ด้วย Entity Framework Core 10

• ติดตั้ง Package และตั้งค่า Connection String

• สร้าง Model และ DbContext ที่ตรงกับตารางในฐานข้อมูล

• ใช้ Migration สร้างและปรับโครงสร้างตาราง

• Lab: เชื่อม API เข้ากับฐานข้อมูล SupplyDesk

Section 15: สร้าง CRUD API

• อ่านรายการและรายละเอียดข้อมูล พร้อมการค้นหาและแบ่งหน้า

• เพิ่ม แก้ไข และลบข้อมูลผ่าน API

• โหลดข้อมูลที่สัมพันธ์กันด้วย Include

• Lab: CRUD API ของพัสดุพร้อมค้นหาและแบ่งหน้า

Section 16: DTO และการตรวจสอบข้อมูล

• แยก DTO ออกจาก Model เพื่อควบคุมข้อมูลที่รับและส่ง

• ตรวจสอบข้อมูลด้วย Data Annotations

• ส่งข้อความแจ้งข้อผิดพลาดในรูปแบบเดียวกันทั้งระบบ

• Lab: DTO และกฎตรวจสอบของคำขอเบิก

Section 17: โครงสร้างโค้ดที่ดูแลต่อได้

• แยก Business Logic ไว้ใน Service และใช้ Dependency Injection

• เขียนเมธอดแบบ async และ await

• บันทึก Log เพื่อตรวจสอบปัญหา

• Lab: ย้ายลอจิกคำขอเบิกจาก Controller ไปไว้ใน Service

Section 18: Workshop Day 3: API ของ SupplyDesk

• API สำหรับพัสดุ แผนก และคำขอเบิก ที่อ่านและเขียน SQL Server ได้ครบ

• ตรวจสอบข้อมูลก่อนบันทึก และคืน Status Code ให้ถูกต้อง

• บันทึกคำขอเบิกพร้อมรายการพัสดุหลายรายการในครั้งเดียว

• Workshop: ทดสอบทุก Endpoint ผ่านหน้าทดสอบ OpenAPI

Section 19: พื้นฐานเว็บที่จำเป็น

• โครงสร้าง HTML และการจัดหน้าด้วย Tailwind CSS

• JavaScript เบื้องต้น: ตัวแปร ฟังก์ชัน Array และ Object

• TypeScript เบื้องต้น: กำหนดชนิดข้อมูลให้ตรงกับ DTO ของ API

• Lab: หน้า HTML รายการพัสดุที่จัดรูปแบบด้วย Tailwind CSS

Section 20: เริ่มต้นกับ Next.js 16

• สร้างโปรเจกต์ด้วย create-next-app และทำความรู้จัก App Router

• React Component, Props และการแบ่งหน้าเว็บเป็นส่วนย่อย

• สร้างหน้าและเมนูนำทางของระบบ

• Lab: Layout และเมนูหลักของ SupplyDesk

Section 21: ดึงข้อมูลจาก API

• เรียก API ด้วย fetch ใน Server Component

• แสดงรายการพัสดุพร้อมการค้นหาและแบ่งหน้า

• จัดการสถานะกำลังโหลดและข้อผิดพลาด

• Lab: หน้ารายการพัสดุที่ดึงข้อมูลจริงจาก API

Section 22: ฟอร์มและการส่งข้อมูล

• Client Component และ State ด้วย useState

• สร้างฟอร์มคำขอเบิก ตรวจข้อมูลก่อนส่ง และส่งไปยัง API

• แก้ไขและยกเลิกคำขอ พร้อมแสดงผลลัพธ์ให้ผู้ใช้

• Lab: ฟอร์มคำขอเบิกที่เลือกพัสดุได้หลายรายการ

Section 23: เชื่อมหน้าเว็บกับ API อย่างเป็นระบบ

• ตั้งค่า CORS ฝั่ง ASP.NET Core ให้หน้าเว็บเรียกใช้ได้

• เก็บ URL ของ API ใน Environment Variable

• รวมการเรียก API ไว้ในไฟล์เดียวเพื่อแก้ไขง่าย

• Lab: แก้ปัญหา CORS ที่พบบ่อยระหว่างหน้าเว็บกับ API

Section 24: Workshop Day 4: หน้าเว็บของ SupplyDesk

• หน้าแสดงรายการพัสดุและค้นหาพัสดุ

• หน้าส่งคำขอเบิกที่ตรวจข้อมูลก่อนส่ง

• หน้าดูสถานะคำขอของตัวเอง

• Workshop: ทดสอบทั้งระบบที่ทำงานกับ API และฐานข้อมูลจริง

Section 25: ระบบล็อกอินด้วย JWT

• เก็บรหัสผ่านอย่างปลอดภัยด้วยการ Hash

• สร้าง Endpoint ล็อกอินที่ออก JWT Token

• ป้องกัน API ด้วย Authorize Attribute และส่ง Token จากหน้าเว็บ

• Lab: หน้าล็อกอินของ SupplyDesk ที่เรียก API ที่ป้องกันไว้ได้

Section 26: การแยกสิทธิ์ตามบทบาท

• กำหนดบทบาทผู้ขอและผู้อนุมัติ

• จำกัดการเข้าถึง API และหน้าเว็บตามบทบาท

• ซ่อนเมนูและปุ่มที่ผู้ใช้ไม่มีสิทธิ์

• Lab: ทดสอบด้วยผู้ใช้สองบทบาทว่าเห็นและทำได้ต่างกัน

Section 27: ลอจิกธุรกิจที่ใช้งานจริง

• อนุมัติหรือปฏิเสธคำขอ และตัดสต็อกพร้อมกันใน Transaction

• ป้องกันการเบิกเกินจำนวนคงเหลือ

• หน้าสรุปยอดเบิกรายแผนกสำหรับผู้อนุมัติ

• บันทึกประวัติการอนุมัติ ผู้อนุมัติ และเวลาที่ดำเนินการ

• Lab: ทดสอบกรณีอนุมัติพร้อมกันและกรณีสต็อกไม่พอ

Section 28: เก็บโค้ดและนำระบบขึ้นใช้งาน

• เก็บโค้ดด้วย Git และแยกค่าตั้งค่าตาม Environment

• Publish ASP.NET Core ขึ้น IIS หรือรันด้วย Docker

• Build และ Deploy Next.js สำหรับใช้งานจริง

• เก็บ Connection String และ Secret ของเครื่องใช้งานจริงแยกจากโค้ด

• Lab: Publish ระบบทั้งชุดบนเครื่องของผู้เรียน

Section 29: Master Workshop: SupplyDesk ครบวงจร

• เพิ่มระบบล็อกอินและแยกสิทธิ์ผู้ขอกับผู้อนุมัติ

• ขั้นตอนอนุมัติที่ตัดสต็อกอัตโนมัติ

• นำระบบทั้งชุดขึ้นใช้งานและนำเสนอระบบของตัวเอง

• แนวทางปรับโครงสร้าง SupplyDesk เป็นระบบอื่นของแผนก เช่น ระบบลางานหรือระบบแจ้งซ่อม

• หัวข้อที่ควรเรียนต่อ: EF Core เชิงลึก, Next.js ขั้นสูง และการทดสอบระบบ