การพัฒนาเว็บ

Warning

เอกสารชุดนี้อยู่ในระหว่างการปรับปรุง

Table 2 แผนการจัดการเรียนรู้

สัปดาห์ที่	สาระการเรียนรู้	เอกสารประกอบ
1	ความรู้เบื้องต้นเกี่ยวกับการพัฒนาเว็บ ผลลัพธ์การเรียนรู้ เข้าใจองค์ประกอบสำคัญของการพัฒนาเว็บ (Frontend+Backend+Storage) แสดงรายการเทคโนโลยี Frontend ได้อย่างน้อย 3 รายการ แสดงรายการเทคโนโลยี Backend ได้อย่างน้อย 3 รายการ แสดงรายการ Storage ได้อย่างน้อย 3 รายการ ติดตั้งโปรแกรมที่จำเป็นสำหรับการพัฒนาเว็บด้วย django ได้ แบบฝึกหัดภาคทฤษฏี อธิบายองค์ประกอบของระบบการพัฒนาเว็บว่าเกี่ยวข้องกับส่วนใดบ้าง พร้อมยกตัวอย่างแต่ละส่วน จงระบุเทคโนโลยีที่ใช้ในฝั่ง Frontend อย่างน้อย 3 รายการ พร้อมอธิบายหน้าที่ของแต่ละรายการ จงระบุเทคโนโลยีที่ใช้ในฝั่ง Backend อย่างน้อย 3 รายการ พร้อมอธิบายสั้น ๆ ว่าแต่ละตัวทำงานอย่างไร จงระบุระบบจัดเก็บข้อมูลอย่างน้อย 3 รายการ พร้อมระบุว่าระบบใดเป็นแบบ SQL และแบบ NoSQL แบบฝึกหัดภาคปฏิบัติ แสดงการติดตั้ง Python และ Django ในเครื่องของตัวเอง แสดงคำสั่งที่ใช้ในการติดตั้ง สร้างโปรเจกต์ชื่อ mysite และเปิดการใช้งานให้สำเร็จ	Chapter 1 Web Applications Web Development การติดตั้ง scoop git anaconda3 สมัครใช้ pycharm professional download pycharm professional Slide ความรู้เบื้องต้นเกี่ยวกับการพัฒนาเว็บ Code Github KhootClone Week01
2	โครงสร้างของโครงงานและการรับส่งข้อมูล (HttpRequest,HttpResponse) ผลลัพธ์การเรียนรู้ เข้าใจรูปแบบการส่งและรับข้อความระหว่างเครื่องผู้ใช้และเครื่องแม่ข่ายได้(client-server) อธิบายองค์ประกอบของข้อมูลคำร้อง (request) ได้ อธิบายองค์ประกอบของข้อมูลส่งกลับ (response) ได้ สร้างโครงงานและเขียนคำสั่งรับส่งข้อมูลได้ แบบฝึกหัดภาคทฤษฏี จงอธิบายรูปแบบการสื่อสารระหว่างเครื่องผู้ใช้ (client) และเครื่องแม่ข่าย (server) โดยระบุลักษณะการทำงานและตัวอย่างที่พบในชีวิตประจำวัน จงอธิบายองค์ประกอบหลักของข้อมูลคำร้อง (HTTP Request) อย่างน้อย 3 รายการ พร้อมระบุหน้าที่ของแต่ละรายการ จงอธิบายองค์ประกอบหลักของข้อมูลส่งกลับ (HTTP Response) อย่างน้อย 3 รายการ พร้อมระบุหน้าที่ของแต่ละรายการ แบบฝึกหัดภาคปฏิบัติ ส่งวีดีโอที่มีเสียงอธิบายประกอบเพื่อแสดงการปฏิบัติตามคำสั่งต่อไปนี้ สร้างโครงงาน Django ชื่อ mysite สร้าง url ที่สามารถเข้าถึงได้จาก /info ที่ส่งข้อมูลกลับเป็นข้อมูล python django ที่ระบุเวอร์ชัน สร้าง url ที่สามารถเข้าถึงได้จาก /hello ที่สามารถรับค่า name จากผู้ใช้ผ่านแบบฟอร์ม (POST) โดยให้เซิร์ฟเวอร์ตอบกลับด้วยข้อความ “Hello, [ชื่อผู้ใช้]” สร้างแอปพลิเคชันชื่อ quiz ที่มี url ที่สามารถเข้าถึงได้แบบ GET ที่ /quiz/question ที่ส่งข้อมูลกลับเป็น JSON ในรูปแบบ {"id": 1, "text": "ประเทศไทยมีกี่จังหวัด", "choices": [50, 68, 72, 77]} เพิ่ม url ที่สามารถเข้าถึงได้แบบ POST ที่ /quiz/question/create ที่สามารถรับและส่งข้อมูลกลับเป็น JSON ในรูปแบบ {"id": 9, "text": "ภาษาโปรแกรมใดได้รับความนิยมสูงสุดในวิทยาการข้อมูล", "choices": ["C", C++", "C#", "Python", "R", "Julia"]}	Chapter 2 Request and response objects HTTP Messages Tutorial PDF Response Image Response Slide โครงสร้างและการรับส่งข้อมูล Code Github KhootClone Week02
3 - 4	การจัดการข้อมูล (model) ผลลัพธ์การเรียนรู้ อธิบายรูปแบบการกำหนดรูปแบบการจัดเก็บข้อมูลของ django ได้ ประยุกต์ใช้ฟิลด์ (Field) ใน model ได้ ประยุกต์ใช้คำสั่งค้นหา (query) ได้ตรงตามเงื่อนไขที่กำหนดให้ แบบฝึกหัดภาคทฤษฏี อธิบายหลักการทำงานของ Django ORM ในการกำหนดรูปแบบการจัดเก็บข้อมูลผ่าน models.Modelel จงอธิบายความแตกต่างของ Field ต่อไปนี้: CharField, TextField, IntegerField, DateTimeField, ForeignKey แบบฝึกหัดภาคปฏิบัติ ส่งวีดีโอที่มีเสียงอธิบายประกอบเพื่อแสดงการปฏิบัติตามคำสั่งต่อไปนี้ สร้างโมเดลสำหรับรระบบ quiz ที่มี Question(id, text, published_date) และ Choice(id, question, text, correct) หลังจากสร้างและ migrate แล้ว ให้เขียนคำสั่ง query ตามโจทย์ต่อไปนี้ใน Django shell ค้นหาคำถามทั้งหมด ค้าหาคำถามที่มีคำว่า AI ในคำถาม ค้นหาคำถามที่เปิดหลังวันที่ 1 กรกฏาคม 2565 ค้นหาคำถามมที่มี id เป็น 1 ค้นหาตัวเลือกทั้งหมดของคำถามมที่มี id เป็น 1	Chapter 3 Models and databases 3.1 การติดต่อฐานข้อมูล 3.2 การเขียน model class 3.3 การกำหนดข้อมูลตัวอย่าง (fixtures) 3.4 การส่งคำสัง SQL โดยตรง 3.5 คำสั่งค้นหาข้อมูล 3.6 การรวมผลลัพธ์ (Aggregation) 3.7 คำสั่งค้นหา (Search) Tutorial ประเภทของฟิลด์ใน model Slide 3 - การจัดการข้อมูล Slide 4 - การจัดการข้อมูลขั้นสูง Code Github Repo
5	การกำหนดการเข้าถึงและการแสดงผล (views,template) ผลลัพธ์การเรียนรู้ อธิบายรูปแบบการกำหนดการเข้าถึงและการแสดงผลได้ เขียนข้อกำหนดการเข้าถึงตามข้อกำหนดที่ระบุให้ได้ ประยุกต์ใช้ความรู้เพื่อแสดงผลตามข้อกำหนดที่ระบุให้ได้ แบบฝึกหัดภาคทฤษฏี อธิบายหน้าที่ของ View ใน Django และอธิบายความแตกต่างระหว่าง Function-based View (FBV) และ Class-based View (CBV) อธิบายหน้าที่ของ Template ใน Django และยกตัวอย่างการใช้ template tag เช่น {{ }} และ {% %} แบบฝึกหัดภาคปฏิบัติ ส่งวีดีโอที่มีเสียงอธิบายประกอบเพื่อแสดงการปฏิบัติตามคำสั่งต่อไปนี้ เพิ่ม function-based view เพื่อแสดงรายการคำถาม (Question) ทั้งหมด โดยสามารถเข้าถึงได้จาก quiz/func/list จากนั้นให้สร้าง question_list.html เพื่อแสดงชื่อบทความทั้งหมดในลักษณะรายการ (list) เพิ่ม function-based view และ template สำหรับแสดงรายละเอียดของคำถามพร้อมตัวเลือก เมื่อคลิกคำถามจากหน้า question_list.html โดยสามารถเข้าถึงได้จาก quiz/func/pk/ เพิ่ม function-based view เพื่อแสดงรายการคำถามทั้งหมด โดยสามารถเข้าถึงได้จาก quiz/func/list?page=2 ที่สามารถเลือกหน้าแสดงรายการได้ หน้าละ 20 รายการ เพิ่ม class-based view เพื่อแสดงรายการคำถถาม (Question) ทั้งหมด โดยสามารถเข้าถึงได้จาก quiz/question/list จากนั้นให้สร้าง question_list.html เพื่อแสดงชื่อบทความทั้งหมดในลักษณะรายการ (list) เพิ่ม class-based view และ template สำหรับแสดงรายละเอียดของคำถามพร้อมตัวเลือกก เมื่อคลิกคำถามจากหน้า question_list.html โดยสามารถเข้าถึงได้จาก quiz/question/pk/ เพิ่ม class-based view และ template สำหรับแแสดงรายการคำถามทั้งหมด โดยสามารถเข้าถึงได้จาก quiz/question/list?page=2 ที่สามารถเลือกหน้าแสดงรายการได้ หน้าละ 20 รายการ	Chapter 4 Views and Templates Class-Based View Pagination HTML Code Github Repo
6	ฟอร์มและการแก้ไขข้อมูล (forms) ผลลัพธ์การเรียนรู้ อธิบายรูปแบบการรับข้อมูลจากผู้ใช้และแก้ไขข้อมูลในฐานข้อมูลได้ ประยุกต์ใช้ความรู้เพื่อสร้างฟอร์มในการรับข้อมูลจากผู้ใช้และแก้ไขข้อมูลในฐานข้อมูลโดยไม่ได้คลาสได้ ประยุกต์ใช้ความรู้เพื่อสร้างฟอร์มในการรับข้อมูลจากผู้ใช้และแก้ไขข้อมูลในฐานข้อมูลโดยใช้คลาสได้ แบบฝึกหัดภาคทฤษฏี อธิบายกระบวนการรับข้อมูลจากผู้ใช้ใน Django และการบันทึก/แก้ไขข้อมูลในฐานข้อมูลโดยใช้ฟอร์ม อธิบายความแตกต่างระหว่างการสร้างฟอร์มโดยใช้ HTML ธรรมดา (manual form handling) กับการใช้ forms.Form หรือ forms.ModelForm ใน Django แบบฝึกหัดภาคปฏิบัติ ส่งวีดีโอที่มีเสียงอธิบายประกอบเพื่อแสดงการปฏิบัติตามคำสั่งต่อไปนี้ ให้เขียน view และ template สำหรับสร้างฟอร์ม HTML เพื่อรับข้อมูลคำถาม (Create) สร้างฟอร์มโดยใช้ forms.ModelForm (Update) แก้ไขข้อมูลโดยใช้ฟอร์ม 4. (CreateView) class-based view สำหรับสร้างงคำถาม 6. (UpdateView) class-based view สำหรับแก้ไขคำถาม	Chapter 5 Forms การสร้างฟอร์มโดยใช้คลาส Code Github Repo
7	การกำหนดสิทธิ์เข้าใช้งาน (login,logout) ผลลัพธ์การเรียนรู้ อธิบายรูปแบบการจัดเก็บข้อมูลผู้ใช้โดย django ได้ ประยุกต์ใช้ความรู้เพื่อสร้างฟอร์มในการรับลงทะเบียนผู้ใช้ใหม่ได้ ประยุกต์ใช้ความรู้เพื่อสร้างฟอร์มในการตรวจสอบผู้ใช้เข้าใช้งานได้ แบบฝึกหัดภาคทฤษฏี อธิบายกระบวนการรับข้อมูลจากผู้ใช้ใน Django และการบันทึก/แก้ไขข้อมูลในฐานข้อมูลโดยใช้ฟอร์ม อธิบายความแตกต่างระหว่างการสร้างฟอร์มโดยใช้ HTML ธรรมดา กับการใช้ forms.Form หรือ forms.ModelForm ใน Django แบบฝึกหัดภาคปฏิบัติ ส่งวีดีโอที่มีเสียงอธิบายประกอบเพื่อแสดงการปฏิบัติตามคำสั่งต่อไปนี้ ให้เขียน view และ template สำหรับสร้างฟอร์ม HTML เสำหรับลงทะเบียนผู้ใช้งาน ให้เขียน view และ template สำหรับสร้างฟอร์ม HTML สำหรับการล็อกอินน์สมาชิก 3. เขียน RegisterView และ template สำหรับลงทะเบียนผู้ใช้ 3. เขียน LoginView และ template สำหรับลงล็อกอินสมาชิก	Chapter 6 Authentication Code Github Repo
8	ไฟล์และรูปแบบคำสั่งแสดงผล (static files and template engine) ผลลัพธ์การเรียนรู้ อธิบายรูปแบบการจัดเก็บไฟล์ของเว็บไซต์และการอ้างอิงใน django ได้ ประยุกต์ใช้ความรู้เพื่อแทรกไฟล์(ภาพ,วีดีโอ,เสียง)ใน template ของ response สำหรับแสดงผลได้ ประยุกต์ใช้ความรู้เพื่อกำหนดการแสดงผลโดยใช้ CSS เบื้องต้นได้	Chapter 7 Static files and Templates CSS เบื้องต้น คู่มือการเขียน template
9	CSS Library ผลลัพธ์การเรียนรู้ อธิบายรูปแบบการจัดเก็บไฟล์ของเว็บไซต์และการอ้างอิงใน django ได้ ประยุกต์ใช้ความรู้เพื่อแทรกไฟล์(ภาพ,วีดีโอ,เสียง)ใน template ของ response สำหรับแสดงผลได้ ประยุกต์ใช้ความรู้เพื่อกำหนดการแสดงผลโดยใช้ CSS เบื้องต้นได้	Chapter 8 Bulma CSS การกำหนดการแสดงภาพโดยใช้ tailwindcss
10	JavaScript fundamentals ผลลัพธ์การเรียนรู้ อธิบายรูปแบบการเขียนคำสั่งภาษา JavaScript ได้ ประยุกต์ใช้ความรู้ชุดคำสั่ง client-side web API เบื้องต้นได้	Chapter 9.1 JavaScript Chapter 9.2 Client-Side Web API
11	HTMX ผลลัพธ์การเรียนรู้ ประยุกต์ใช้ความรู้ชุดคำสั่ง htmx เพื่อร้องขอข้อมูลจาก backend ได้	Chapter 10 HTMX เอกสารเสริมเรื่อง hyperscript
12	Alpinejs ผลลัพธ์การเรียนรู้ ประยุกต์ใช้ความรู้ชุดคำสั่ง alpinejs เพื่อจัดการการแสดงผลแบบพลวัตได้	Chapter 11 Alpinejs
13	การทดสอบ (testing)	Chapter 12 Testing คู่มือการเขียนทดสอบ django
14	เนื้อหาต่อยอด	รูปแบบการงานร่วมกับ javascript framework ที่เป็นที่นิยม การสร้างโครงงานระดับสูง
15	นำเสนอโครงงาน	นักศึกษานำเสนอผลงาน

Contents:

• โครงงาน