สัปดาห์ที่ 11 • การแบ่งหน้าและการปรับแต่งการแสดงผล01-406-093-203 Laravel Course

01-406-093-203

การพัฒนาเว็บแอปพลิเคชันด้วยเฟรมเวิร์ค

โดย นายศุภมิตร จันทร์โทวงศ์

สาขาวิชาระบบสารสนเทศ คณะบริหารธุรกิจ

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 1 / 21

สัปดาห์ที่ 11 • การแบ่งหน้าและการปรับแต่งการแสดงผล01-406-093-203 Laravel Course

เช็คชื่อเข้าชั้นเรียน

ให้นักศึกษาสแกน QR Code นี้เพื่อเข้าสู่ระบบเช็คชื่อเข้าเรียน
ระบบจะทำการบันทึกประวัติการเข้าเรียนในวิชานี้อัตโนมัติ

สแกนเพื่อเช็คชื่อเข้าชั้นเรียน (สัปดาห์ที่ 11)

ระบบเช็คชื่อปิดการลงทะเบียนชั่วคราว

ผู้สอนยังไม่ได้เปิดระบบเช็คชื่อสำหรับบทเรียนสัปดาห์นี้ หรือหมดเวลากรอกข้อมูลแล้ว

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 2 / 21

สัปดาห์ที่ 11 • การแบ่งหน้าและการปรับแต่งการแสดงผล01-406-093-203 Laravel Course

ระบบหมายเลขหน้า (Pagination)

การตัดแบ่งข้อมูลจำนวนมากในฐานข้อมูลออกเป็นหน้าย่อยๆ เพื่อเพิ่มความเร็วในการโหลดเว็บและหลีกเลี่ยงหน่วยความจำเต็ม
ดำเนินการได้ง่ายโดยแทนที่เมธอด get() ด้วยการเรียกใช้เมธอด paginate(N) (โดย N คือจำนวนแถวต่อหน้า)
ในหน้าการแสดงผล (Blade View) สามารถเรนเดอร์ปุ่มเปลี่ยนหน้าอัตโนมัติด้วยคำสั่ง {{ $results->links() }}
ระบบจะสร้างการนำ URL และส่งตัวแปร ?page=X เข้าไปประมวลผลต่อให้อัตโนมัติ

code-example.php

// ใน Controller
$products = DB::table('products')->paginate(10);
return view('products.index', compact('products'));

// ใน Blade (products/index.blade.php)
<div class="mt-3">
    {{ $products->links() }}
</div>

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 3 / 21

สัปดาห์ที่ 11 • การแบ่งหน้าและการปรับแต่งการแสดงผล01-406-093-203 Laravel Course

กำหนดรูปแบบการแสดงผลข้อมูล

การแปลงข้อมูลตัวเลขหรือเวลาดิบจากฐานข้อมูลให้เป็นรูปแบบที่อ่านง่ายและเหมาะสมกับผู้ใช้
ฟอร์แมตค่าการเงินด้วยคำสั่ง number_format($value, 2) เพื่อใส่เครื่องหมายจุลภาคและหลักทศนิยม
จัดการเปลี่ยนลักษณะของวันที่ด้วยฟังก์ชัน PHP date() หรือการนำเข้าไลบรารี Carbon ของระบบ Laravel
การคุมการจัดวางสไตล์ข้อความและปุ่มสแกนหน้าตาด้วยชุดจัดสไตล์ของ Bootstrap

code-example.php

<!-- การฟอร์แมตราคาและวันที่ใน Blade -->
<p>ราคาสินค้า: {{ number_format($product->price, 2) }} บาท</p>
<p>วันที่ลงทะเบียน: {{ \Carbon\Carbon::parse($product->created_at)->format('d/m/Y') }}</p>

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 4 / 21

สัปดาห์ที่ 11 • การแบ่งหน้าและการปรับแต่งการแสดงผล01-406-093-203 Laravel Course

เนื้อหาเสริมการเรียนรู้บทเรียนที่ 11 (ตอนที่ 0)

ศึกษาเพิ่มเติมจากเอกสารประกอบการสอนหลักและคู่มือฝึกปฏิบัติ
ทบทวนหัวข้อสำคัญของบทเรียน โครงสร้างโค้ด และสถาปัตยกรรมระบบ
ฝึกฝนทักษะการเขียนโปรแกรมผ่านเวิร์กชอปท้ายบทเพื่อเพิ่มความชำนาญ

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 5 / 21

สัปดาห์ที่ 11 • การแบ่งหน้าและการปรับแต่งการแสดงผล01-406-093-203 Laravel Course

เนื้อหาเสริมการเรียนรู้บทเรียนที่ 11 (ตอนที่ 1)

ศึกษาเพิ่มเติมจากเอกสารประกอบการสอนหลักและคู่มือฝึกปฏิบัติ
ทบทวนหัวข้อสำคัญของบทเรียน โครงสร้างโค้ด และสถาปัตยกรรมระบบ
ฝึกฝนทักษะการเขียนโปรแกรมผ่านเวิร์กชอปท้ายบทเพื่อเพิ่มความชำนาญ

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 6 / 21

สัปดาห์ที่ 11 • การแบ่งหน้าและการปรับแต่งการแสดงผล01-406-093-203 Laravel Course

เนื้อหาเสริมการเรียนรู้บทเรียนที่ 11 (ตอนที่ 2)

ศึกษาเพิ่มเติมจากเอกสารประกอบการสอนหลักและคู่มือฝึกปฏิบัติ
ทบทวนหัวข้อสำคัญของบทเรียน โครงสร้างโค้ด และสถาปัตยกรรมระบบ
ฝึกฝนทักษะการเขียนโปรแกรมผ่านเวิร์กชอปท้ายบทเพื่อเพิ่มความชำนาญ

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 7 / 21

สัปดาห์ที่ 11 • การแบ่งหน้าและการปรับแต่งการแสดงผล01-406-093-203 Laravel Course

เนื้อหาเสริมการเรียนรู้บทเรียนที่ 11 (ตอนที่ 3)

ศึกษาเพิ่มเติมจากเอกสารประกอบการสอนหลักและคู่มือฝึกปฏิบัติ
ทบทวนหัวข้อสำคัญของบทเรียน โครงสร้างโค้ด และสถาปัตยกรรมระบบ
ฝึกฝนทักษะการเขียนโปรแกรมผ่านเวิร์กชอปท้ายบทเพื่อเพิ่มความชำนาญ

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 8 / 21

สัปดาห์ที่ 11 • การแบ่งหน้าและการปรับแต่งการแสดงผล01-406-093-203 Laravel Course

เนื้อหาเสริมการเรียนรู้บทเรียนที่ 11 (ตอนที่ 4)

ศึกษาเพิ่มเติมจากเอกสารประกอบการสอนหลักและคู่มือฝึกปฏิบัติ
ทบทวนหัวข้อสำคัญของบทเรียน โครงสร้างโค้ด และสถาปัตยกรรมระบบ
ฝึกฝนทักษะการเขียนโปรแกรมผ่านเวิร์กชอปท้ายบทเพื่อเพิ่มความชำนาญ

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 9 / 21

สัปดาห์ที่ 11 • การแบ่งหน้าและการปรับแต่งการแสดงผล01-406-093-203 Laravel Course

เนื้อหาเสริมการเรียนรู้บทเรียนที่ 11 (ตอนที่ 5)

ศึกษาเพิ่มเติมจากเอกสารประกอบการสอนหลักและคู่มือฝึกปฏิบัติ
ทบทวนหัวข้อสำคัญของบทเรียน โครงสร้างโค้ด และสถาปัตยกรรมระบบ
ฝึกฝนทักษะการเขียนโปรแกรมผ่านเวิร์กชอปท้ายบทเพื่อเพิ่มความชำนาญ

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 10 / 21

สัปดาห์ที่ 11 • การแบ่งหน้าและการปรับแต่งการแสดงผล01-406-093-203 Laravel Course

เนื้อหาเสริมการเรียนรู้บทเรียนที่ 11 (ตอนที่ 6)

ศึกษาเพิ่มเติมจากเอกสารประกอบการสอนหลักและคู่มือฝึกปฏิบัติ
ทบทวนหัวข้อสำคัญของบทเรียน โครงสร้างโค้ด และสถาปัตยกรรมระบบ
ฝึกฝนทักษะการเขียนโปรแกรมผ่านเวิร์กชอปท้ายบทเพื่อเพิ่มความชำนาญ

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 11 / 21

สัปดาห์ที่ 11 • การแบ่งหน้าและการปรับแต่งการแสดงผล01-406-093-203 Laravel Course

เนื้อหาเสริมการเรียนรู้บทเรียนที่ 11 (ตอนที่ 7)

ศึกษาเพิ่มเติมจากเอกสารประกอบการสอนหลักและคู่มือฝึกปฏิบัติ
ทบทวนหัวข้อสำคัญของบทเรียน โครงสร้างโค้ด และสถาปัตยกรรมระบบ
ฝึกฝนทักษะการเขียนโปรแกรมผ่านเวิร์กชอปท้ายบทเพื่อเพิ่มความชำนาญ

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 12 / 21

สัปดาห์ที่ 11 • การแบ่งหน้าและการปรับแต่งการแสดงผล01-406-093-203 Laravel Course

เนื้อหาเสริมการเรียนรู้บทเรียนที่ 11 (ตอนที่ 8)

ศึกษาเพิ่มเติมจากเอกสารประกอบการสอนหลักและคู่มือฝึกปฏิบัติ
ทบทวนหัวข้อสำคัญของบทเรียน โครงสร้างโค้ด และสถาปัตยกรรมระบบ
ฝึกฝนทักษะการเขียนโปรแกรมผ่านเวิร์กชอปท้ายบทเพื่อเพิ่มความชำนาญ

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 13 / 21

สัปดาห์ที่ 11 • การแบ่งหน้าและการปรับแต่งการแสดงผล01-406-093-203 Laravel Course

แบบทดสอบก่อนเรียน (Pre-test)

1. การสืบค้นหาข้อมูลที่มีความเชื่อมโยงหรือดึงฟิลด์ข้อมูลออกมาแบ่งหลาย ๆ ตารางพร้อมกันในฐานข้อมูล SQL จะทำงานผ่านคำสั่งใด?

A. Join Operations

B. Union Operations

C. Split Operations

D. Eloquent Mapping

2. คำสั่งแบ่งหน้าข้อมูลสำเร็จรูปใน Laravel เพื่อเพิ่มประสิทธิภาพการทำงานและสกัดขนาดหน่วยความจำ (Memory Limit) คือข้อใด?

A. paginate($perPage)

B. split($perPage)

C. limit($perPage)

D. divide($perPage)

3. หากต้องการแสดงผลลิงก์ปุ่มเปลี่ยนหน้าเว็บ (Pagination Links) ใน Blade ไฟล์ ต้องสั่งคำสั่งใดบนอ็อบเจกต์ Collection?

A. {{ $products->links() }}

B. {{ $products->render() }}

C. {{ $products->pages() }}

D. {{ $products->show() }}

4. ข้อดีของการใช้การแบ่งหน้าข้อมูลแบบ 'Simple Pagination' คือข้อใด?

A. แสดงผลสถิติอย่างรวดเร็ว

B. ไม่จำเป็นต้องรัน Query COUNT(*) ทั้งหมดของตาราง ทำให้รันผลได้รวดเร็วกว่าบนตารางข้อมูลขนาดล้านเรคคอร์ด

C. ไม่มีปุ่มให้กดเปลี่ยนหน้า

D. รันข้อมูลได้แบบเรียลไทม์

5. หากต้องการสืบค้นข้อมูลสินค้าที่มีราคาตั้งแต่ 500 ถึง 1000 บาท ข้อใดคือการใช้ Query Builder ที่เหมาะสม?

A. whereBetween('price', [500, 1000])

B. whereIn('price', [500, 1000])

C. whereRange('price', 500, 1000)

D. where価格('price', 500, 1000)

6. หากต้องการสืบค้นหาคำสำคัญของชื่อสินค้าที่มีลักษณะแบบ 'คำค้นบางส่วน' (Partial Search) ต้องรัน Query Builder รูปแบบใด?

A. where('name', 'like', '%key%')

B. where('name', 'equal', 'key')

C. whereLike('name', 'key')

D. whereSearch('name', 'key')

7. หากคุณต้องการเรียงลำดับการสืบค้นข้อมูลโดยให้แถวล่าสุดที่สร้างใหม่แสดงผลก่อน (Descending Order) ต้องพ่วงคำสั่งใด?

A. orderBy('created_at', 'desc')

B. orderBy('created_at', 'asc')

C. sort('newest')

D. latest()

8. เมธอด chunk() ใน Query Builder ออกแบบมาเพื่อประโยชน์หลักในข้อใด?

A. ใช้ล็อกฐานข้อมูลไม่ให้ลบ

B. ใช้แบ่งดึงข้อมูลจำนวนมากออกมาประมวลผลทีละรอบ (เช่น รอบละ 100 แถว) เพื่อป้องกันแรมเซิร์ฟเวอร์ล่ม (Memory Exhausted)

C. ใช้ตรวจสอบความถูกต้องของข้อมูล

D. ประยุกต์จัดวางเลย์เอาต์หน้าจอ

9. หากต้องการคำนวณหาค่ารวมราคาสินค้าทั้งหมดในตาราง (Summation) โดยตรงจากฐานข้อมูล สามารถรันฟังก์ชันใด?

A. Product::sum('price')

B. Product::all()->sum('price')

C. Product::add('price')

D. Product::total('price')

10. เมธอด select() ในการดึงข้อมูลฐานข้อมูลมีบทบาทอย่างไร?

A. เลือกฐานข้อมูลที่จะใช้งาน

B. ระบุชื่อคอลัมน์เฉพาะที่ต้องการดึงข้อมูลมาแสดง เพื่อหลีกเลี่ยงการดึงคอลัมน์ขนาดใหญ่ที่ไม่ได้ใช้ให้เสียประสิทธิภาพ

C. สุ่มเลือกแถวข้อมูล

D. จัดสเปซปุ่มกด

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 14 / 21

สัปดาห์ที่ 11 • การแบ่งหน้าและการปรับแต่งการแสดงผล01-406-093-203 Laravel Course

เนื้อหาเสริมการเรียนรู้บทเรียนที่ 11 (ตอนที่ 10)

ศึกษาเพิ่มเติมจากเอกสารประกอบการสอนหลักและคู่มือฝึกปฏิบัติ
ทบทวนหัวข้อสำคัญของบทเรียน โครงสร้างโค้ด และสถาปัตยกรรมระบบ
ฝึกฝนทักษะการเขียนโปรแกรมผ่านเวิร์กชอปท้ายบทเพื่อเพิ่มความชำนาญ

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 15 / 21

สัปดาห์ที่ 11 • การแบ่งหน้าและการปรับแต่งการแสดงผล01-406-093-203 Laravel Course

เนื้อหาเสริมการเรียนรู้บทเรียนที่ 11 (ตอนที่ 11)

ศึกษาเพิ่มเติมจากเอกสารประกอบการสอนหลักและคู่มือฝึกปฏิบัติ
ทบทวนหัวข้อสำคัญของบทเรียน โครงสร้างโค้ด และสถาปัตยกรรมระบบ
ฝึกฝนทักษะการเขียนโปรแกรมผ่านเวิร์กชอปท้ายบทเพื่อเพิ่มความชำนาญ

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 16 / 21

สัปดาห์ที่ 11 • การแบ่งหน้าและการปรับแต่งการแสดงผล01-406-093-203 Laravel Course

เนื้อหาเสริมการเรียนรู้บทเรียนที่ 11 (ตอนที่ 12)

ศึกษาเพิ่มเติมจากเอกสารประกอบการสอนหลักและคู่มือฝึกปฏิบัติ
ทบทวนหัวข้อสำคัญของบทเรียน โครงสร้างโค้ด และสถาปัตยกรรมระบบ
ฝึกฝนทักษะการเขียนโปรแกรมผ่านเวิร์กชอปท้ายบทเพื่อเพิ่มความชำนาญ

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 17 / 21

สัปดาห์ที่ 11 • การแบ่งหน้าและการปรับแต่งการแสดงผล01-406-093-203 Laravel Course

แบบทดสอบหลังเรียน (Post-test)

1. การสืบค้นหาข้อมูลที่มีความเชื่อมโยงหรือดึงฟิลด์ข้อมูลออกมาแบ่งหลาย ๆ ตารางพร้อมกันในฐานข้อมูล SQL จะทำงานผ่านคำสั่งใด?

A. Join Operations

B. Union Operations

C. Split Operations

D. Eloquent Mapping

2. คำสั่งแบ่งหน้าข้อมูลสำเร็จรูปใน Laravel เพื่อเพิ่มประสิทธิภาพการทำงานและสกัดขนาดหน่วยความจำ (Memory Limit) คือข้อใด?

A. paginate($perPage)

B. split($perPage)

C. limit($perPage)

D. divide($perPage)

3. หากต้องการแสดงผลลิงก์ปุ่มเปลี่ยนหน้าเว็บ (Pagination Links) ใน Blade ไฟล์ ต้องสั่งคำสั่งใดบนอ็อบเจกต์ Collection?

A. {{ $products->links() }}

B. {{ $products->render() }}

C. {{ $products->pages() }}

D. {{ $products->show() }}

4. ข้อดีของการใช้การแบ่งหน้าข้อมูลแบบ 'Simple Pagination' คือข้อใด?

A. แสดงผลสถิติอย่างรวดเร็ว

B. ไม่จำเป็นต้องรัน Query COUNT(*) ทั้งหมดของตาราง ทำให้รันผลได้รวดเร็วกว่าบนตารางข้อมูลขนาดล้านเรคคอร์ด

C. ไม่มีปุ่มให้กดเปลี่ยนหน้า

D. รันข้อมูลได้แบบเรียลไทม์

5. หากต้องการสืบค้นข้อมูลสินค้าที่มีราคาตั้งแต่ 500 ถึง 1000 บาท ข้อใดคือการใช้ Query Builder ที่เหมาะสม?

A. whereBetween('price', [500, 1000])

B. whereIn('price', [500, 1000])

C. whereRange('price', 500, 1000)

D. where価格('price', 500, 1000)

6. หากต้องการสืบค้นหาคำสำคัญของชื่อสินค้าที่มีลักษณะแบบ 'คำค้นบางส่วน' (Partial Search) ต้องรัน Query Builder รูปแบบใด?

A. where('name', 'like', '%key%')

B. where('name', 'equal', 'key')

C. whereLike('name', 'key')

D. whereSearch('name', 'key')

7. หากคุณต้องการเรียงลำดับการสืบค้นข้อมูลโดยให้แถวล่าสุดที่สร้างใหม่แสดงผลก่อน (Descending Order) ต้องพ่วงคำสั่งใด?

A. orderBy('created_at', 'desc')

B. orderBy('created_at', 'asc')

C. sort('newest')

D. latest()

8. เมธอด chunk() ใน Query Builder ออกแบบมาเพื่อประโยชน์หลักในข้อใด?

A. ใช้ล็อกฐานข้อมูลไม่ให้ลบ

B. ใช้แบ่งดึงข้อมูลจำนวนมากออกมาประมวลผลทีละรอบ (เช่น รอบละ 100 แถว) เพื่อป้องกันแรมเซิร์ฟเวอร์ล่ม (Memory Exhausted)

C. ใช้ตรวจสอบความถูกต้องของข้อมูล

D. ประยุกต์จัดวางเลย์เอาต์หน้าจอ

9. หากต้องการคำนวณหาค่ารวมราคาสินค้าทั้งหมดในตาราง (Summation) โดยตรงจากฐานข้อมูล สามารถรันฟังก์ชันใด?

A. Product::sum('price')

B. Product::all()->sum('price')

C. Product::add('price')

D. Product::total('price')

10. เมธอด select() ในการดึงข้อมูลฐานข้อมูลมีบทบาทอย่างไร?

A. เลือกฐานข้อมูลที่จะใช้งาน

B. ระบุชื่อคอลัมน์เฉพาะที่ต้องการดึงข้อมูลมาแสดง เพื่อหลีกเลี่ยงการดึงคอลัมน์ขนาดใหญ่ที่ไม่ได้ใช้ให้เสียประสิทธิภาพ

C. สุ่มเลือกแถวข้อมูล

D. จัดสเปซปุ่มกด

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 18 / 21

สัปดาห์ที่ 11 • การแบ่งหน้าและการปรับแต่งการแสดงผล01-406-093-203 Laravel Course

คำถามท้ายบทเรียน

เมธอดใดใช้เรียกต่อท้ายการสืบค้นข้อมูลในระบบ Laravel เพื่อทำชุดแบ่งข้อมูลออกเป็นหน้ารายการย่อย?

A. ->limitPage(10)

B. ->paginate(10)

C. ->split(10)

D. ->page(10)

คำอธิบาย: เมธอด ->paginate() จะทำหน้าที่คุมและจำกัดจำนวนข้อมูลที่ดึงมาแต่ละหน้าตามตัวเลขแถวระบุ

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 19 / 21

สัปดาห์ที่ 11 • การแบ่งหน้าและการปรับแต่งการแสดงผล01-406-093-203 Laravel Course

Workshop 11: ทำระบบแบ่งรายการหน้าเว็บและการแสดงราคาและวันที่

1แก้ไขคำสั่งดึงข้อมูลใน Controller จาก get() เป็น paginate(10) เพื่อจำกัดจำนวนการดึงข้อมูลต่อหน้า
2ในหน้าจอแสดงผล ใช้คำสั่ง {{ $products->links() }} เพื่อสร้างแถวเปลี่ยนหน้าอัตโนมัติ
3ตกแต่งสไตล์ปุ่มสลับหน้าให้เข้ากับการจัดวางและขนาดหน้าจอด้วย Bootstrap 5
4เขียนฟังก์ชันแปลงค่าตัวเลขเป็นยอดเงินไทย และปรับปรุงวันที่ให้แสดงผลเข้าใจง่ายขึ้น

command_prompt.sh

$products = DB::table('products')->paginate(12);

// ใน Blade
{{ $products->links() }}

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 20 / 21

สัปดาห์ที่ 11 • การแบ่งหน้าและการปรับแต่งการแสดงผล01-406-093-203 Laravel Course

ใบงานที่ 11: จัดการหน้าแสดงผลข้อมูลสินค้าพร้อมตัวนำทางและการจัดประเภทหน้าจอ

ทำรายการสแกนตารางสินค้า 100 รายการ แบ่งหน้าแสดงผลละ 10 ชิ้น พร้อมตกแต่งการจัดตัวเลขอัตราเงินและวันที่ซื้อสินค้าให้สวยงาม

เกณฑ์การตรวจประเมินผล:

การรันชุดคลังข้อมูลแบ่งหน้าและแสดงปุ่มนำเปลี่ยนหน้าได้ถูกต้อง40%
ความเรียบร้อยของรูปแบบตัวเลขและวันที่ไทยที่ระบุลงช่องข้อมูล40%
การจัดรูปแบบการแสดงผลที่ตอบรับการเข้าถึงหน้าจอประเภทต่างๆ20%

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 21 / 21