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

01-406-093-203

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

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

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

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

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

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

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

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

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

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

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

สัปดาห์ที่ 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. จัดสเปซปุ่มกด

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

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

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

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

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

การใช้งานคำสั่ง paginate() ใน Controller (AdminController.php)

เปิดไฟล์ app/Http/Controllers/AdminController.php เพื่อปรับแต่งฟังก์ชัน blog()
เปลี่ยนจากการดึงข้อมูลทั้งหมดด้วย ->get() มาใช้เมธอด ->paginate(3)
กำหนดตัวเลข 3 เพื่อจำกัดให้แสดงผลข้อมูลบทความหน้าละ 3 รายการ
ส่งตัวแปร $blogs ไปยัง View ด้วยคำสั่ง return view("blog", compact('blogs'));

code-example.php

// app/Http/Controllers/AdminController.php
function blog()
{
    $blogs = DB::table("blogs")->paginate(3);
    return view("blog", compact('blogs'));
}

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

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

การแสดงปุ่มเปลี่ยนหน้าใน Blade View (blog.blade.php)

เปิดไฟล์ resources/views/blog.blade.php
เพิ่มคำสั่ง {{$blogs->links()}} ไว้ใต้แท็กปิด </table> ของตารางแสดงผล
คำสั่ง links() จะสร้างแถบปุ่มเปลี่ยนหมายเลขหน้า (Pagination Links) ให้อัตโนมัติ
ระบบจะจัดการคำนวณจำนวนหน้าและส่ง Query Parameter ?page=X ให้อัตโนมัติเมื่อกดเปลี่ยนหน้า

code-example.html

<!-- resources/views/blog.blade.php -->
    ...
    </tbody>
</table>
{{$blogs->links()}}
@endsection

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

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

การศึกษาเอกสาร Laravel Documentation (Database: Pagination)

เข้าสู่เว็บไซต์ laravel.com/docs แล้วค้นหาคำว่า pagination ในช่องค้นหา
เลือกหัวข้อ Database: Pagination เพื่อศึกษาการใช้งานคำสั่งแบ่งหน้า
เอกสารอธิบายการใช้งานทั้งในฝั่ง Database Query Builder และ Eloquent ORM
สามารถดูการปรับแต่ง Pagination Links สไตล์ต่างๆ เช่น Bootstrap หรือ Tailwind CSS ได้จากเอกสารทางการ

Laravel Documentation Search (Pagination)

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

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

การปรับแต่งรูปแบบ Pagination ใน AppServiceProvider

ในหัวข้อ Customizing The Pagination View เอกสารแนะนำให้กำหนดค่าเริ่มต้นที่ AppServiceProvider
เปิดไฟล์ App\Providers\AppServiceProvider ในโปรเจกต์
เรียกใช้งาน use Illuminate\Pagination\Paginator; ด้านบนสุดของไฟล์
กำหนดสไตล์ของปุ่มแบ่งหน้าภายใน method boot() เช่น Paginator::useBootstrapFive();

Customizing Pagination View (AppServiceProvider)

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

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

การเรียกใช้งาน Class Paginator ใน AppServiceProvider

เพิ่มบรรทัดคำสั่ง use Illuminate\Pagination\Paginator; ในส่วนหัวของไฟล์
ช่วยให้ Laravel รู้จักและสามารถเรียกใช้งานคลาส Paginator ในการจัดการหน้าจอได้
เป็นการนำเข้า Namespace ของ Paginator เพื่อเตรียมนำไปกำหนดสไตล์ของปุ่มแบ่งหน้าต่อไป

code-example.php

// app/Providers/AppServiceProvider.php
namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator; // เรียกใช้งาน Paginator

class AppServiceProvider extends ServiceProvider
{
    ...
}

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

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

การกำหนดสไตล์ปุ่ม Pagination ให้เป็น Bootstrap 5

เปิดเมธอด public function boot(): void ในไฟล์ AppServiceProvider.php
เพิ่มคำสั่ง Paginator::useBootstrapFive(); ด้านในเมธอด boot()
คำสั่งนี้จะเปลี่ยนโครงสร้าง HTML ของ Pagination ให้ใช้คลาส CSS ของ Bootstrap 5
ช่วยให้ปุ่มสลับหน้าแสดงผลเป็นสไตล์ Bootstrap สวยงามและเข้ากับธีมของเว็บไซต์

code-example.php

// app/Providers/AppServiceProvider.php
use Illuminate\Pagination\Paginator;

public function boot(): void
{
    Paginator::useBootstrapFive();
}

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

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

การแก้ไขไฟล์ AppServiceProvider.php ในโปรเจกต์จริง (VS Code)

เปิดไฟล์ app/Providers/AppServiceProvider.php จากแถบโฟลเดอร์ซ้ายมือใน VS Code
เพิ่มคำสั่ง use Illuminate\Pagination\Paginator; ที่บรรทัดด้านบน
เพิ่มคำสั่ง Paginator::useBootstrapFive(); ในเมธอด public function boot()
บันทึกไฟล์ (Ctrl+S หรือ Cmd+S) เพื่อให้ระบบ Laravel เริ่มต้นใช้งาน Pagination สไตล์ Bootstrap 5

code-example.php

// app/Providers/AppServiceProvider.php
namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;

class AppServiceProvider extends ServiceProvider
{
    public function register(): void
    {
        //
    }

    public function boot(): void
    {
        Paginator::useBootstrapFive();
    }
}

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

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

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

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

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

ปัญหาการแสดงผลตารางว่างเปล่าเมื่อไม่มีข้อมูลบทความในระบบ

กรณีฐานข้อมูลไม่มีรายการบทความอยู่เลย แต่ยังคงเรนเดอร์แท็ก <table> ตามปกติ
หน้าจอจะแสดงหัวตารางเปล่าๆ พร้อม Showing to of 0 results และปุ่มแบ่งหน้าที่ไม่มีรายการ
ทำให้หน้าตาของเว็บไซต์ดูไม่สมบูรณ์ และผู้ใช้งานอาจสับสนว่าระบบโหลดข้อมูลสำเร็จหรือไม่
จำเป็นต้องใช้เงื่อนไขตรวจสอบจำนวนข้อมูลก่อนแสดงตาราง

ผลลัพธ์บนเบราว์เซอร์เมื่อไม่มีข้อมูลในตาราง

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

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

การตรวจสอบจำนวนข้อมูลบทความด้วย @if(count($blogs)>0) (blog.blade.php)

เปิดไฟล์ resources/views/blog.blade.php
ใช้คำสั่ง @if(count($blogs)>0) ครอบตารางแสดงผล เพื่อเช็กว่ามีบทความในระบบมากกว่า 0 หรือไม่
หากมีข้อมูลบทความ ระบบจะเรนเดอร์แสดงตารางข้อมูลตามปกติ
ช่วยป้องกันข้อผิดพลาดกรณีไม่มีข้อมูล และเตรียมรองรับการแสดงข้อความแจ้งเตือนเมื่อไม่มีรายการ

code-example.html

<!-- resources/views/blog.blade.php -->
@section('title', 'บทความทั้งหมด')
@section('content')
    @if(count($blogs) > 0)
        <h2 class="text text-center py-2">บทความทั้งหมด</h2>
        <table class="table table-bordered text-center">
            <thead>
                <tr>
                    <th scope="col">บทความ</th>
                    <th scope="col">สถานะ</th>
                    <th scope="col">แก้ไขบทความ</th>
                </tr>
            </thead>
            ...
        </table>
    @endif
@endsection

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

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

การจัดการกรณีไม่มีข้อมูลบทความด้วย @else (blog.blade.php)

เพิ่มคำสั่ง @else ต่อท้ายส่วนแสดงผลตารางและ {{$blogs->links()}}
แสดงข้อความ <h2 class="text text-center py-2">ไม่มีบทความ</h2> กรณีไม่พบข้อมูลในตาราง
ปิดท้ายบล็อกเงื่อนไขด้วยคำสั่ง @endif
ช่วยปรับปรุงประสบการณ์ผู้ใช้งาน (UX) ให้ทราบสถานะที่ชัดเจนเมื่อยังไม่มีข้อมูลบทความในระบบ

code-example.html

<!-- resources/views/blog.blade.php -->
        ...
        @endforeach
    </tbody>
</table>
{{$blogs->links()}}
@else
    <h2 class="text text-center py-2">ไม่มีบทความ</h2>
@endif
@endsection

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

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

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

1. คำสั่งใดใน Laravel Query Builder ใช้สำหรับตัดแบ่งข้อมูลออกเป็นหน้าย่อยตามจำนวนที่กำหนด?

A. ->paginate(3)

B. ->limitPage(3)

C. ->split(3)

D. ->divide(3)

2. คำสั่งใดใน Blade View (blog.blade.php) ใช้สำหรับแสดงผลชุดปุ่มเปลี่ยนหน้าอัตโนมัติ?

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

B. {{$blogs->pages()}}

C. {{$blogs->buttons()}}

D. {{$blogs->render()}}

3. หากต้องการปรับแต่งสไตล์ปุ่ม Pagination ให้เป็นรูปแบบของ Bootstrap 5 ต้องเข้าไปแก้ไขที่ไฟล์ใด?

A. app/Providers/AppServiceProvider.php

B. config/app.php

C. routes/web.php

D. resources/views/layout.blade.php

4. คลาสใดที่ต้องระบุ use นำเข้าใน AppServiceProvider.php ก่อนเรียกใช้งานการตั้งค่า Pagination?

A. use Illuminate\Pagination\Paginator;

B. use Illuminate\Support\Facades\Pagination;

C. use App\Models\Paginator;

D. use Illuminate\Database\Paginator;

5. คำสั่งใดที่ใช้ภายใน method boot() ของ AppServiceProvider เพื่อกำหนดให้ Pagination ใช้สไตล์ Bootstrap 5?

A. Paginator::useBootstrapFive();

B. Paginator::setBootstrap5();

C. Paginator::style('bootstrap5');

D. Paginator::bootstrap();

6. การใช้เงื่อนไข @if(count($blogs)>0) ใน Blade View มีวัตถุประสงค์หลักเพื่ออะไร?

A. ตรวจสอบว่ามีข้อมูลบทความมากกว่า 0 หรือไม่ก่อนแสดงตาราง

B. จำกัดการแสดงผลบทความให้ไม่เกิน 0 รายการ

C. นับจำนวนคำในเนื้อหาบทความ

D. ลบข้อมูลบทความที่ว่างเปล่า

7. เมื่อใช้ @if(count($blogs)>0) ร่วมกับ @else ใน blog.blade.php ข้อความในส่วน @else จะแสดงขึ้นเมื่อใด?

A. เมื่อไม่มีข้อมูลบทความในระบบ (count เป็น 0)

B. เมื่อมีข้อมูลบทความมากกว่า 10 รายการ

C. เมื่อกดเปลี่ยนหน้า Pagination

D. เมื่อบันทึกข้อมูลไม่สำเร็จ

8. พารามิเตอร์ตัวเลขที่ส่งเข้าไปในเมธอด ->paginate(3) หมายถึงอะไร?

A. จำนวนรายการข้อมูลที่แสดงผลต่อ 1 หน้า

B. จำนวนหน้าทั้งหมดที่อนุญาตให้เปิดได้

C. รหัส ID ของบทความที่ต้องการแสดง

D. จำนวนคอลัมน์ในตาราง

9. เมื่อผู้ใช้กดเปลี่ยนหมายเลขหน้าจากปุ่ม Pagination ตัวแปรใดจะถูกแนบไปกับ URL?

A. ?page=X

B. ?index=X

C. ?limit=X

D. ?offset=X

10. แท็กปิดบล็อกคำสั่งเงื่อนไขของ Blade ที่ใช้คู่กับ @if คือข้อใด?

A. @endif

B. @end

C. @close

D. @stop

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

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

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

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

A. ->limitPage(10)

B. ->paginate(10)

C. ->split(10)

D. ->page(10)

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

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

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

Workshop 11: การทำระบบแบ่งหน้าบทความ (Pagination) และจัดสไตล์ Bootstrap 5

1เปิดไฟล์ AdminController.php แล้วแก้ไขคำสั่งดึงข้อมูลในฟังก์ชัน blog() จาก get() เป็น paginate(3)
2ในหน้า resources/views/blog.blade.php เพิ่มคำสั่ง {{$blogs->links()}} ใต้ตารางแสดงผลเพื่อสร้างปุ่มเปลี่ยนหน้า
3เปิดไฟล์ app/Providers/AppServiceProvider.php นำเข้า use Illuminate\Pagination\Paginator; และเพิ่มคำสั่ง Paginator::useBootstrapFive(); ในเมธอด boot()
4ใช้คำสั่ง @if(count($blogs)>0) ครอบตารางแสดงผล และใช้ @else แสดงข้อความ 'ไม่มีบทความ' กรณีไม่พบข้อมูล

command_prompt.sh

// app/Http/Controllers/AdminController.php
$blogs = DB::table('blogs')->paginate(3);

// app/Providers/AppServiceProvider.php
use Illuminate\Pagination\Paginator;
public function boot(): void {
    Paginator::useBootstrapFive();
}

// resources/views/blog.blade.php
@if(count($blogs) > 0)
    <table class="table table-bordered">...</table>
    {{$blogs->links()}}
@else
    <h2>ไม่มีบทความ</h2>
@endif

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

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

ใบงานที่ 11: การพัฒนาระบบแบ่งหน้าข้อมูลบทความ (Pagination) พร้อมจัดการ Empty State

ให้นักศึกษาทำระบบแบ่งหน้าบทความในหน้า blog.blade.php โดยกำหนดให้แสดงหน้าละ 3 รายการ พร้อมปรับแต่งสไตล์ปุ่ม Pagination ให้เป็น Bootstrap 5 ผ่าน AppServiceProvider และเขียนเงื่อนไข @if/@else ตรวจสอบจำนวนบทความเพื่อแสดงข้อความ 'ไม่มีบทความ' ในกรณีที่ยังไม่มีข้อมูล

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

การเขียนคำสั่ง paginate(3) ใน Controller และการส่งตัวแปร $blogs ไปแสดงผลที่ View30%
การแสดงผลปุ่มนำทาง {{$blogs->links()}} และการตั้งค่าสไตล์ Bootstrap 5 ใน AppServiceProvider.php40%
การเขียนเงื่อนไข @if(count($blogs)>0) และ @else แสดงสถานะเมื่อไม่มีข้อมูลบทความได้อย่างถูกต้อง30%

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