หนังสือ Yii framework 2 Web Application Basic ฉบับพื้นฐาน

Programmer Thailand

เรยนรไดไว เขาใจไดงาย ใชงานไดจรง

มานพ กองอน WWW.PROGRAMMERTHAILAND.COM

2

Yii Framework 2.0.2 & 2.0.3 Dev

~ 1 ~

www.programmerthailand.com

สารบญ

สารบญ ........................................................................................................................................................... 1

บทนา .............................................................................................................................................................. 6

บทท 1 เรมตนกบ Yii 2 .................................................................................................................................. 7

Yii2 คออะไร ............................................................................................................................................. 7

ความหมายและทมา ........................................................................................................................... 7

ความตองการระบบของ Yii2 .............................................................................................................. 8

เตรยมเครองมอ ........................................................................................................................................ 9

ตดตง WAMP Server ......................................................................................................................... 9

ตดตง Composer ............................................................................................................................ 19

การ Update Composer ................................................................................................................ 22

แมแบบ(Template) ใน Yii2 .................................................................................................................. 23

บทท 2 การตดตง Yii2 .................................................................................................................................. 24

การตดตง Yii2 Basic Application Template ...................................................................................... 24

การสรางฐานขอมลสาหรบ yii2-basic .............................................................................................. 26

แกไขการเชอมตอฐานขอมล .............................................................................................................. 27

การใช Migration ใน Yii Basic ........................................................................................................ 28

การใช Gii Generator สาหรบ Basic Template ............................................................................ 30

การสราง Virtual Host สาหรบ Yii2 Basic Application Template ............................................. 38

การจดการ URL แบบสวยงาม (Pretty URL) ................................................................................... 41

การตดตง Yii2 Advanced Application Template ............................................................................ 43

สรางฐานขอมลสาหรบ yii2-advanced ............................................................................................ 45

แกไขการเชอมตอฐานขอมล .............................................................................................................. 46

การใช Migration ใน Yii Advanced ............................................................................................... 49

~ 2 ~


Gii Generator สาหรบ Advanced Template .............................................................................. 51

การสราง Virtual Host สาหรบ Yii2 Advanced Application Template .................................... 57

การจดการ URL แบบสวยงาม (Pretty URL) ................................................................................... 61

การ Update Yii2 ................................................................................................................................... 67

การ Upgrade Version .......................................................................................................................... 67

บทท 3 เขาใจ Yii2 ........................................................................................................................................ 69

หลกการ MVC ........................................................................................................................................ 69

เขาใจ Model ................................................................................................................................... 69

เขาใจ View ...................................................................................................................................... 69

เขาใจ Controller ............................................................................................................................ 69

การทางานของ Yii2 ................................................................................................................................ 70

โครงสราง Yii2 ........................................................................................................................................ 71

Hello World กบ Yii2 ........................................................................................................................... 72

คณสมบตพนฐานทควรเขาใจ .................................................................................................................. 73

เรยนร Routing ใน Yii2 ................................................................................................................... 73

รจก Namespace และ Use ............................................................................................................ 76

ชอ Alias ใน Yii2 .............................................................................................................................. 76

ทดลองสราง Model ......................................................................................................................... 77

ทดลองสราง Controller .................................................................................................................. 78

ทดลองสราง View ............................................................................................................................ 79

การเลอกขอมล ................................................................................................................................. 81

การสราง Relation ใน Model ........................................................................................................ 90

การแสดง เพม แกไข และลบขอมล .................................................................................................. 90

การควบคมการเขาถงโดยใช Access Control Filter (ACF) .......................................................... 101

การควบคมการเขาถงโดยใช Role Base Access Control (RBAC) ............................................... 103

~ 3 ~


บทท 4 โมดล (Module) ............................................................................................................................ 111

การสรางโมดลสาหรบ Yii2 Basic Application Template ................................................................. 111

การสราง Model ใน Module ....................................................................................................... 113

การสราง CRUD สาหรบ Module ................................................................................................. 115

การสรางโมดลสาหรบ Yii2 Advanced Application Template ....................................................... 119

การสรางโมดลสาหรบ Frontend ................................................................................................... 119

การสรางโมดลสาหรบ Backend .................................................................................................... 127

บทท 5 ธม (Theme) .................................................................................................................................. 136

ธมสาหรบ Yii2 Basic Application Template ................................................................................... 136

ตดตงแบบไมใช Composer ........................................................................................................... 136

ตดตงแบบใช Composer ............................................................................................................... 141

ธมสาหรบ Yii2 Advanced Application Template .......................................................................... 165

ธมสาหรบ Frontend ..................................................................................................................... 166

ธมสาหรบ Backend ....................................................................................................................... 167

บทท 6 การตดตง Extension เสรม............................................................................................................ 170

Yii2 User .............................................................................................................................................. 170

วธการตดตง .................................................................................................................................... 170

วธการตงคา .................................................................................................................................... 171

Yii2 Admin .......................................................................................................................................... 174

วธตดตง .......................................................................................................................................... 174

วธตงคา ........................................................................................................................................... 175

การใชงาน ....................................................................................................................................... 178

บทท 7 ระบบจดการงาน (Task Manager) ................................................................................................ 188

วเคราะหระบบ ...................................................................................................................................... 188

ผดแลระบบ..................................................................................................................................... 188

~ 4 ~


เจาหนาท ........................................................................................................................................ 188

ออกแบบฐานขอมล ............................................................................................................................... 188

สราง ER Diagram .......................................................................................................................... 188

การ Forward Engineer ไปยงฐานขอมล ....................................................................................... 189

พจนานกรมขอมล (Data Dictionary) ............................................................................................ 195

สราง Project Skeleton ...................................................................................................................... 196

ตดตง Extension.................................................................................................................................. 199

ตดตง Date Picker......................................................................................................................... 199

เขยนโปรแกรม ...................................................................................................................................... 200

สราง Virtual host ......................................................................................................................... 200

แกไขการตงคา Yii2 ......................................................................................................................... 203

เพม user ในตาราง user ................................................................................................................ 204

แกไขไฟล User Model .................................................................................................................. 206

เพมขอมลเขาในตาราง project และ task ..................................................................................... 207

เพม urlManager ........................................................................................................................... 207

แกไขหนา index............................................................................................................................. 212

สราง Model Task และ Project ................................................................................................... 213

แกไข Relation ใน Model Task ................................................................................................... 216

สราง CRUD ดวย Gii Generator ................................................................................................... 216

แกไขหนาแสดงผล Task ................................................................................................................. 220

แกไขฟอรมเพมขอมล ...................................................................................................................... 223

เพม Access Control สาหรบ Controller .................................................................................... 226

เขยนโปรแกรมหนา Dashboard .................................................................................................... 227

สราง RBAC .................................................................................................................................... 232

บทสรป ....................................................................................................................................................... 241

~ 5 ~


บทท 8 ระบบสารสนเทศทางภมศาสตร (GIS) ดวย Google Map ............................................................. 242

วเคราะหระบบ ...................................................................................................................................... 242

เจาหนาท ........................................................................................................................................ 242

บคคลทวไป ..................................................................................................................................... 242

ออกแบบฐานขอมล ............................................................................................................................... 243

ER Diagram ................................................................................................................................... 243

พจนานกรมขอมล (Data Dictionary) ............................................................................................ 243

สราง Project Skeleton ...................................................................................................................... 246

ตดตงสวนเสรม...................................................................................................................................... 248

Yii2 User........................................................................................................................................ 248

Yii2 Google Map Library ............................................................................................................ 250

Yii2 Export Table ........................................................................................................................ 251

เขยนโปรแกรม ...................................................................................................................................... 252

แกไขการตงคา Yii2 ......................................................................................................................... 252

สราง Model ดวย Gii Generator ................................................................................................. 256

สราง CRUD ดวย Gii Generator ................................................................................................... 259

เขยนโปรแกรมแสดงแผนท ................................................................................................................... 263

แกไข controllers/SiteController.php ....................................................................................... 263

แกไข views/site/index.php ........................................................................................................ 265

กาหนดสทธใหเฉพาะเจาหนาท สามารถเพม แกไข และลบขอมล .................................................. 269

บทสรป ................................................................................................................................................. 271

คาขอบคณ .................................................................................................................................................. 273

ดรรชน ........................................................................................................................................................ 274

~ 6 ~


บทนา

หนงสอเลมนเกดจากความตงใจของผเขยนทตองการสอใหผอานเขาใจ Yii Framework 2 อยาง

งายดาย โดยผเขยนไดศกษาคนควาจากแหลงตางๆ เพอกาหนดเปนแนวทางในการเรยนร Yii Framework 2

และพยายามจดเรยงบทตางๆ ใหเปนขนตอนเพอใหผอานทาความเขาใจไดงายดายมากยงขน โดยเนอหาจะ

มงเนนเรองพนฐานทควรรและเขาใจกอนการเขยนโปรแกรม ซงเปนการปพนฐานใหเขาใจ Yii Framework 2

หรอ Yii2 โดยเนนการเรยนรลกษณะ Workshop โดยทาไปดวยเรยนรไปดวยทดลอง Run ไปดวย ซงจะทา

ใหเขาใจมากขนทละเรองทละ Step จนเกดความเขาใจและเรยนรไดอยางรวดเรว หนงสอเลมนจงไดเนนไปท

จดหลกๆ ของการเขยนโปรแกรมโดยใช Yii2 ทจะสามารถพฒนา Web Application ไดอยางรวดเรวมาก

ยงขน และสามารถตอยอดในอนาคตได

ทงนหนงสอเลมนเปนเพยงแนวทางหนงในการเรยนรการพฒนา Web Application ดวย Yii

Framework 2 เทานน หากหนงสอเลมนมขอขาดตกบกพรองสวนไหนทางผเขยนตองกราบขออภยมา ณ

โอกาสน และหวงเปนอยางยงวาผอานทกๆ ทานจะใหคาแนะนาตางๆ เพอนาไปปรบปรงแกไขตอไป โดย

สามารถสงคาแนะนามาไดท [email protected] จกขอบพระคณยง

มานพ กองอน

Programmer Thailand Team

~ 7 ~


บทท 1 เรมตนกบ Yii 2

Yii2 หรอเรยกเตมๆ วา Yii PHP Framework Version 2 ซงทงหมดในหนงสอเลมนจะเรยก Yii2

เพอใหเขาใจงาย โดยใน Version นถอวามการพฒนาใหมทงหมดเลยกวาได

Yii2 คออะไร

รปท 1 โลโก Yii Framework

ความหมายและทมา

Yii หรอ ย ยอมาจาก Yes It Is เปนเหมอนกบคาตอบหรอคาอทานกวาไดทวา มนเรวจรงหรอเปลา?

มนมความปลอดภยไหม? มนมความเปนมออาชพหรอเปลา? มนควรนามาสราง Project ตอไปหรอเปลา? ใช

แลวมนใชจรงๆ (Yes It Is)

สาหรบ Yii นนเปน Open Source ซงเปน PHP Framework สาหรบสราง Web Application ทถก

เขยนขนใหรองรบ PHP5 ชวยใหสราง Web Application ไดอยางรวดเรว

Yii นนเกดขนจากคณ Qiang Xue เปนผรเรม Yii เมอ 1 มกราคม 2008 ซงกอนหนาเขาเคยพฒนา

Prado Framework มากอนซงกมประสบการณตางๆ มากกมาย และเหนจดออนจดแขงของ Framework

และไดนาประสบการณเหลานนมาพฒนาเปน Yii Framework ในเวอรชนแรก

หลงจากนน Yii Framework ไดรบความนยมเปนอยางมากในวงกวางมากขนเรอยๆ จนถงปจจบน ได

ออก Yii Framework ใน เวอรชน 2 เรยบรอยแลวเมอวนท 12 ตลาคม 2557 ทผานมา

~ 8 ~


ความตองการระบบของ Yii2 ความตองการระบบของ Yii2 นน จะใช PHP 5.4 ขนไปซงรองรบการเขยนโปรแกรม OOP และมการ

ปรบปรงใหสามารถประมวลผลไดดมากขน และการเขยนโปรแกรมทสนลง เชน array() กเปลยนเปน [] เปน

ตน โดยการตรวจสอบความตองการนนสามารถเรยก URL ไปทไฟล requirement.php เพอตรวจสอบความ

ตองการของระบบสาหรบ Yii2 โดยจะมหนา Web ดงน

รปท 2 ความตองการ (Requirement) ของ Yii2

~ 9 ~


สาหรบ APC Extension นนยงไมม Version รองรบ PHP5.5.12 จงยงไมสามารถตดตงไดครบหมด

ซงผเขยนไดใช WAMP Server 2.5 64bit เปน PHP5.5.12

เตรยมเครองมอ สาหรบการเรยนร Yii2 ในหนงสอเลมนจะใช WAMP Server ในการทดสอบ โดยสามารถด

รายละเอยดไดท www.wampserver.com ซงมวธการดาวนโหลดและตดตงดงน

ตดตง WAMP Server WAMP Server เปน Web Server ทสามารถจาลองเครองของเปน Web Server สาหรบ Run

Script PHP และมฐานขอมล MySQL ดวยนอกจากนน Version ลาสดของ WAMP Server คอ 2.5 ซงมา

พรอมกบ Apache 2.4.9 PHP 5.5.12 และ MySQL 5.6.17 ซงเหมาะสาหรบการพฒนา Web Application

ดวย Yii2

การดาวนโหลด WAMP Server

เขาเวบไซต www.wampserver.com

รปท 3 หนาเวบไซต www.wampserver.com

จากนนเปลยนภาษาเปน ENGLISH ทมมขวาบน เพอใหงายตอการทาความเขาใจ

~ 10 ~


รปท 4 หนา www.wampserver.com เปนภาษาองกฤษ

จากนนเลอกเมน Download หนาเวบจะเลอนลงมาทสวนของดาวนโหลด

รปท 5 หนาดาวนโหลด WAMP Server

แลวเลอก Version ตาม Bit ของเครองทตองการ ในทนจะเลอก WAMPSERVER (64 BITS & PHP 5.5) 2.5

~ 11 ~


รปท 6 หนาสาหรบดาวนโหลด WAMP Server

ใหดาวนโหลด 2 ไฟล นนคอลงค download directly และ http://www.microsoft.com/en-

us/download/details.aspx?id=30679

Download directly คอ WAMP Server และ Link ท 2 คอ VC 11 ซงดาวนโหลดจากเวบไซตของ

Microsoft

หลงจากดาวนโหลดแลวจะได 2 ไฟล ดงน

รปท 7 ไฟลตางๆ หลงจากดาวนโหลดแลว

~ 12 ~


ตดตง WAMP Server

ใหตดตง Vcredist กอน โดยเปดไฟล vcredist_x64.exe จะเหนการ Initializing ดงน

รปท 8 การตดตง Visual C++2012

เมอตดตงเสรจโปรแกรมจะให Restart เครอง

รปท 9 หลงจากตดตง Visual C++2012 เสรจแลว

จากนนตดตง WAMP Server โดยเปดไฟล wampserver2.5-Apache-2.4.9-Mysql-5.6.17-PHP-5.5.12-

64b.exe

~ 13 ~


รปท 10 การตดตง WAMP Server

จากนนกดปม Next >

รปท 11 การยอมรบเงอนไขขอตกลงการใชงาน

กดยอมรบเงอนไขการใชงานแลวกดปม Next >

~ 14 ~


รปท 12 การเลอกทเกบ WAMP Server

เปลยนทเกบ Project จาก c:\ เปน d:\ หรอ Drive อนๆ ตามตองการ แลวกดปม Next >

รปท 13 การสราง Shortcut สาหรบ WAMP Server

สราง Short cut ตามตองการ แลวกดปม Next >

~ 15 ~


รปท 14 ขอความสรปกอนการตดตง WAMP Server

จะพบกบหนา Ready to Install จากนนกดปม Install

รปท 15 กาลงตดตง WAMP Server

ระบบจะตดตง WAMP Server ตามขนตอน รอสกพก

~ 16 ~


รปท 16 การเลอกไฟล explorer.exe

โปรแกรมจะเลอกไฟล explorer.exe ใหกด Open

รปท 17 การกาหนด SMTP สาหรบ WAMP Server

โปรแกรมจะใหเลอกการตงคา SMTP และ Email ในขนตอนนสามารถกดปม Next > ไดเลย

~ 17 ~


รปท 18 ขนตอนสดทายของการตดตง WAMP Server

จะเขาสขนตอนสดทายสามารถกดปม Finish เพอ Run WAMP Server หลงการตดตงทนท

รปท 19 Icon ของ WAMP Server ททางานเปนปกต (สเขยว)

จะพบ W สเขยวแสดงวาระบบทางาน 100% นนคอ Service ของ Apache และ MySQL ทดสอบโดยกด W

สเขยวแลวเลอก Localhost

รปท 20 เมน WAMP Server หลงจากคลก W สเขยว

~ 18 ~


จะปรากฏหนา localhost ดงน

รปท 21 หนา localhost หนาแรก

แสดงวาตดตง WAMP Server เสรจเรยบรอยแลว

เนองจาก Yii Framework 2 นนมความตองการ rewrite_module เพอการทา Pretty URL ดงนนควรเปด

การใชงานสวนนโดยใหกด W->Apache->Apache modules ทาใหแนใจวามเครองหมายถกหนา

rewrite_module

รปท 22 การกาหนด rewrite_module สาหรบ Apache

~ 19 ~


ตดตง Composer Composer เปนโปรแกรมสาหรบการเรยกใชงานและตดตงโปรแกรมตางๆ ผานเครอขาย

อนเทอรเนต โดยสามารถดาวนโหลดไดทเวบไซต https://getcomposer.org/

รปท 23 โลโกของ Composer

จากนนคลกทปม Download แลวในทนจะเลอกการตดตงสาหรบ Windows โดยคลกท Composer-

Setup.exe

รปท 24 ลงคสาหรบดาวนโหลด Composer

และทาการตดตง โดยเปดไฟล Composer-Setup.exe

~ 20 ~


รปท 25 หนาแรกของการตดตง Composer

จากนนกดปม Next>

รปท 26 การเลอก Component สาหรบการตดตง Composer

ใชการตงคาแบบเรมตน และกดปม Next>

~ 21 ~


รปท 27 การเลอกทเกบ PHP สาหรบ Composer

ทาการเลอกทเกบ Path ของ PHP ในทนจะอยท D:\wamp\bin\php\php5.5.12\php.exe จากนนกด

Next>

รปท 28 สรปขอมลกอนการตดตง

จะปรากฏ Ready to Install ใหกดปม Install

~ 22 ~


รปท 29 หนาเมอทาการตดตง Composer เรยบรอยแลว

จะปรากฏการตดตงเสรจสมบรณ แลวกดปม Finish

การ Update Composer

สาหรบการ Update Composer นนมความจาเปนเนองจากจะมคาเตอนตอนการเรยกใชงาน

composer หากไมมการ update หลงจาก 30 วนไปแลว สาหรบวธการ update ทาไดงายดายมาก เพยง

พมพคาสงดงน

composer self-update

หลงจากพมพคาสงแลวกดปม Enter จะปรากฏหนา Command Prompt ดงน

รปท 30 การใชคาสง Update Composer

~ 23 ~


แมแบบ(Template) ใน Yii2 สาหรบ Yii2 จะม Web Application Template อย 2 แบบ นนคอ Yii2 Basic ใชสาหรบสราง

Web Application ทวไป และ Yii2 Advanced ใชสาหรบสราง Web Application ทมความซบซอน

มากกวา โดยขอแตกตางระหวาง Yii2 Basic และ Yii2 Advanced นนคอการแบงระบบของ Yii2 Advanced

นนจะแบงสวน backend และ frontend ออกจากกน แตในขณะท Yii2 Basic ไมไดแบงแยก นนเอง

~ 24 ~


บทท 2 การตดตง Yii2

ในการตดตง Yii2 นนสามารถทาไดหลายแบบในทนจะแนะนาการตดตงผาน Composer ซงเปน

มาตรฐานในการตดตง โดยสามารถนาหลกการนไปประยกตใชในการตดตง Framework ตวอนๆ ได โดยม

ขนตอนในการตดตงดงน

ตดตง Plugin เสรมสาหรบ Composer โดยเปด Command Prompt จากนนไปท

D:\wamp\www แลวพมพคาสงดงน

composer global require "fxp/composer-asset-plugin:1.0.0-

beta4"

แลวกดปม Enter โปรแกรมจะทาการ Update PlugIn ทจาเปนในการสราง Web Application ดวย Yii2

รปท 31 การเพม PlugIn สาหรบ Composer

การตดต �ง Yii2 Basic Application Template

สาหรบ Yii2 Basic Application Template นนเปนการใช Yii2 ในการพฒนา Web Application

แบบทวไป สาหรบ Web Application ทไมซบซอนมากนก โดยมวธการตดตงดงน

เปด Command Prompt แลวไปท D:\wamp\www

~ 25 ~


รปท 32 การใช Command Prompt เขา Root Directory ของ Web Server

พมพคาสงในการเรยกใช composer plugin

composer global require "fxp/composer-asset-plugin:1.0.0"

พมพคาสงในการสราง Web Application จาก Basic Template ดงน

composer create-project --prefer-dist --stability=dev

yiisoft/yii2-app-basic yii2-basic

หมายเหต หากตองการ Yii2 Version ทเสถยรแลวไมตองใส --stability=dev

แลวกดปม Enter จะแสดงรายการไฟลตางๆ ทสรางจาก Composer

รปท 33 การตดตง Yii2 Basic Application Template

~ 26 ~


ทดสอบ Run หนาเวบโดยเขา URL http://localhost/yii2-basic/web จะปรากฏหนา Web Application

ดงน

รปท 34 หนาหลกของ Web Application

การสรางฐานขอมลสาหรบ yii2-basic สาหรบการสรางฐานขอมลนนสามารถเขาบรหารจดการโดยใช phpMyAdmin โดยเขา URL

http://localhost/phpmyadmin หรอ http://127.0.0.1/phpmyadmin ซงจะไดหนา Web ดงน

รปท 35 หนา PHPMyAdmin

~ 27 ~


คลกท Database จากนน ใสชอฐานขอมลในทนจะใช yii2_basic และใชการเขารหสอกขระเปน

utf8_general_ci ดงน จากนนกดปม Create

รปท 36 การสรางฐานขอมล

จะปรากฏ Popup สเขยววาสรางฐานขอมลชอ yii2_basic เรยบรอยแลว

รปท 37 POPUP หลงจากสรางฐานขอมลเสรจแลว

แกไขการเชอมตอฐานขอมล แกไขการเชอมตอฐานขอมลโดยเปดไฟล config/db.php จากนนใสชอฐานขอมลทตองการเชอมตอ

พรอม Username และ Password สาหรบเชอมตอฐานขอมล MySQL ในทนคอฐานขอมล: yii2_basic

Username: root และ Password ไมม ดงน

รปท 38 การแกไขการตดตอฐานขอมล

~ 28 ~


การใช Migration ใน Yii Basic

รปท 39 การใช Migration ใน Yii Basic

การสราง Migration

สราง Migration ชอ create_post_table โดยพมพคาสงดงน

yii migrate/create create_post_table

กดปม Enter จากนนพมพ yes เพอยนยนแลวกดปม Enter

รปท 40 การเรยกใชงานเพอสราง Migration

จะปรากฏไฟล m14001_181424_create_post_table.php ใน Folder migrations เรยบรอยแลว

รปท 41 ไฟล Migration ทถกสรางขน

จากนนทาการปรบแตงไฟลเพอใชในการสรางตารางตางๆ ดงน

~ 29 ~


รปท 42 การแกไขไฟล Migration ทไดสรางขน

ทดสอบโดยการเรยก

yii migrate

จะไดการประมวลผลดงน

รปท 43 การสงให Migration ทางาน

จะเหนวามตาราง post เกดขนทฐานขอมล yii2_basic ดงน

~ 30 ~


รปท 44 รายการตารางหลงจากสง Migration ใหทางาน

เขาไปปรบแกตาราง โดยเพม Comment ในแตละ Field ดงน

รปท 45 การปรบแตง Comment ในตาราง post

จากนนกดปม Save เพอบนทกการเปลยนแปลง

การใช Gii Generator สาหรบ Basic Template Gii Generator เปนเครองมอทมความสาคญสาหรบ Yii Framework ซงเปนเครองมอทชวยในการ

สราง Code ใหสามารถพฒนา Web Application ไดอยางรวดเรวมากยงขนภายใตธรรมเนยมของ Yii

Framework

การเขาใชงาน Gii Generator นนสามารถเรยกจาก URL web/index.php?r=gii สาหรบการตดตง

แบบ Basic โดยจะเหนหนาตาของ Web Application ดงน

รปท 46 หนาแรกของ Gii Generator

Technology

หนังสือ Yii framework 2 Web Application Basic ฉบับพื้นฐาน