หนังสือ yii framework tip 50 เทคนิค yii framework

Programmer Thailand

50 Yii Framework Tip 50 เทคนคพเศษสาหรบ Yii Framewok ทคณอาจไม

เคยเหนมากอนทจะชวยใหพฒนา Application อยาง

มออาชพมากยงขน

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

~ 1 ~

www.programmerthailand.com

คานา หนงสอเลมนเปนหนงสออกเลมของ Yii Framework โดยเปนหนงสอทรวบรวมเอาเทคนค

ตางๆ เพอใชในการสราง Application ใหมความรวดเรวและสมบรณแบบมากยงขน โดยกาหนด

ตงแตพนฐานไปจนถงระดบสง โดยแบงการนาเสนอออกเปนบท ซงในแตละบทกจะมเทคนคตางๆ กน

ไป

หนงสอเลมนเปนหนงสอทผมและทมงานตงใจเขยนและถายทอดเปนอยางมาก โดยเราทางาน

อยางหนกหลายเดอนเพอใหหนงสอเลมนมความครบถวนสมบรณมากทสด ซงกหวงเปนอยางยงวา

จะเปนหนงสอใกลมอเพอตอเตม Application ของทานใหมความสมบรณแบบมากยงขน

ทายทสดตองขอขอบคณทกทานททาใหหนงสอเลมนเกดขน ขอบคณนองวระยทธ บญออน

ทชวยเรอง Code Action Proof ขอบคณนองณฐวฒ เกษศรรตน ทชวยในเรอง Graphic และท

สาคญตองขอขอบคณเพอนๆ ชาว Programmer Thailand ทกๆ ทานทชวยสนบสนนพวกเรา

ดวยดเสมอมา ขอบคณมากๆ ครบ

มานพ กองอน

และทมงาน Programmer Thailand

~ 2 ~


สารบญ

คานา ........................................................................................................................................................ 1

สารบญ ................................................................................................................................................... 2

บทท 1 ขนพนฐาน .................................................................................................................................. 6

การตดตง Yii Framework .................................................................................................................. 6

การดาวโหลด .................................................................................................................................... 6

การตดตง .......................................................................................................................................... 6

การสราง Project Skeleton ...............................................................................................................10

การสราง Project ใน Netbeans IDE ................................................................................................. 11

การตดตง Yii Snippets ใน Sublime Text 3 ................................................................................. 13

การตดตง Yii Eclipse PlugIn ............................................................................................................ 15

การออกแบบ ER Diagram และการ Forward Engineering ....................................................... 20

การออกแบบ ER Diagram .......................................................................................................... 20

การสรางฐานขอมล ....................................................................................................................... 23

การ Forward Engineering ......................................................................................................... 24

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

การสราง Attribute Label ใหเปนภาษาไทยโดยอตโนมต ................................................................ 30

การกาหนด Yii Message ใหเปนภาษาไทย ...................................................................................... 33

การใชงานรปภาพ ................................................................................................................................ 34

ตวอยางการใชงาน ........................................................................................................................ 34

การใชงาน Link .................................................................................................................................... 36

~ 3 ~


ตวอยางการใชงาน ........................................................................................................................ 36

บทท 2 วาดวยเรอง Extension ......................................................................................................... 38

การตดคาดวย XReadmore ............................................................................................................. 38

การตดตง Yii Booster Extension ................................................................................................... 40

การตดตง User Extension และ Rights Extension ..................................................................... 44

การตดตง User Extension ......................................................................................................... 44

การตดตง Rights Extension ...................................................................................................... 47

การใชงาน User และ Rights Extension เบองตน .................................................................... 51

การสง Email ดวย SMTP Extension ............................................................................................. 55

การตดตง ........................................................................................................................................ 55

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

บทท 3 วาดวยเรองของ Model......................................................................................................... 57

Database Active Record ................................................................................................................. 57

Create ............................................................................................................................................. 57

Read ................................................................................................................................................ 57

SLUG ..................................................................................................................................................... 59

TAGABLE ................................................................................................................................................ 61

บทท 4 วาดวยเรองของ Controller ................................................................................................. 70

การสราง Criteria ในการ Select ขอมล ......................................................................................... 70

การสรางระบบ User Login จากฐานขอมล .................................................................................... 72

บทท 5 วาดวยเรองของ View ........................................................................................................... 73

การ Register ไฟล JavaScript และ CSS ....................................................................................... 73

การ Register Core Script ......................................................................................................... 73

การ Register JavaScript ไฟล ................................................................................................... 73

~ 4 ~


การ Register ไฟล CSS .............................................................................................................. 74

การ Register Script ทเปน JavaScript แบบ Inline ............................................................... 75

การเปลยนขอความ “Home” ใน Breadcumb เปน “หนาหลก” .................................................. 76

การปรบ Breadcumb ใหอยในรปแบบของ Tag ul และ li ............................................................. 77

การสราง Drop Down List สาหรบการเกบขอมลแบบ ENUM .................................................... 78

การสรางมาหมน (Carousel) ใน Yii Booster Extension............................................................. 79

การสราง CKEditor สาหรบ TextArea ............................................................................................80

การดงขอมลจากตารางอนมาแสดงเปน Drop Down List ........................................................... 82

การเปลยน site/index เปน home ใน URL .................................................................................... 83

การซอนไฟล index.php เมอเรยก URL ........................................................................................... 84

การสราง Captcha ใหกบฟอรมดวย CCaptcha ........................................................................... 86

การสรางฟอรมแบบ Horizontal สาหรบ Yii Booster Extension .............................................. 88

การแสดงขอมลจากตารางอนในความสมพนธแบบ BelongsTo .................................................. 89

การสราง Date Picker สาหรบเกบลง Field DATE ใน MySQL ................................................... 92

การแสดงผลวนเวลาภาษาไทยจากฐานขอมล ................................................................................. 93

การแกไขหนา Error สาหรบ Yi Framework ................................................................................... 94

การสรางและแสดง Flash Message สาหรบ Yii Booster Extension ........................................ 95

การสราง AJAX Button ..................................................................................................................... 97

การสราง AJAX Link .......................................................................................................................... 99

การสราง Facebook Like Button .................................................................................................. 101

สราง Application ใน Facebook .............................................................................................. 101

สราง Facebook Like Button .................................................................................................. 102

บทท 6 วาดวยเรองของรายงาน ...................................................................................................... 105

การแสดงผลขอมลแบบ JSON ......................................................................................................... 105

~ 5 ~


การสรางกราฟดวย jQWidgets ..................................................................................................... 106

การแสดงกราฟดวย Highcharts JS .............................................................................................. 109

การ Export ขอมลแบบ CSV ............................................................................................................. 112

การสรางกราฟดวย RGraph Extension ........................................................................................ 114

การสรางกราฟดวย Google Chart Extension ............................................................................116

Pie Chart........................................................................................................................................116

Gauge ............................................................................................................................................. 117

Line Chart ..................................................................................................................................... 117

บทท 7 กรณตวอยาง......................................................................................................................... 119

การสราง Drop Down List เลอกจงหวดโชวอาเภอ เลอกอาเภอโชวตาบล แบบ Dependence

(AJAX) ................................................................................................................................................... 119

provinces ....................................................................................................................................... 119

districts ........................................................................................................................................... 119

tambons ...................................................................................................................................... 120

การสราง sitemap.xml ใน Yii Framework สงให Google Webmaster Tool และ Search

Engine .................................................................................................................................................. 124

การทาเวบไซตหลายภาษาใน Yii Framework ................................................................................. 128

การ Upload ไฟลรปภาพ ................................................................................................................... 131

การสรางเมนจากตารางในฐานขอมล MySQL................................................................................ 133

การสราง WebService ดวย SOAP ............................................................................................... 135

ดรรชน ................................................................................................................................................. 138

~ 6 ~


บทท 1 ขนพนฐาน

การตดตง Yii Framework

กอนอนขอนาเสนอเรองของการตดตง Yii Framework กนกอนนะครบ เพอใหสามารถ

เรยนรและเขาใจไดมากยงขน

การดาวโหลด

ในการดาวโหลดนนไปทเวบไซต http://www.yiiframework.com

แลวคลกทปม Download Yii เพอทาการดาวโหลด

การตดตง

ในการตดตงนนในทนเราจะตดตง Yii Framework ใหเขากบ WAMP Server โดยสามารถ

ดาวโหลดและตดตง WAMP Server ไดทเวบไซต www.wampserver.com ในทนตดตงไวท

d:\wamp

~ 7 ~


หลงจากทดาวโหลด Yii Framework เรยบรอยแลว ใหแตก Zip ไฟลไปยง d:\wamp\yii

จากนนไป Set System Variable ในสวนของ Path โดยไปท Control Panel -> System and

Security

จากนนกดท See the name of this computer

~ 8 ~


กดเลอก Advanced system settings

~ 9 ~


กดเลอก Environment Variables…

เลอก Path ในสวนของ System variables แลวกด Edit…

จากนนนา Path ของ PHP และ Framework มาใส ในทนคอ

D:\wamp\bin\php\php5.3.13; D:\wamp\yii\framework;

หมายเหต Version ของ PHP นนอาจแตกตางกนได และหลงจากตงคาเสรจเรยบรอยแลวอาจจะ

ตอง Restart กอนจงจะสามารถใชคาสง yiic ได

~ 10 ~


การสราง Project Skeleton การสราง Project Skeleton หรอการสรางโครงสรางไฟลตางๆ ของ Application ใหม

กอนการเขยนโปรแกรม โดยเปดโปรแกรม Command Prompt แลว CD ไปท D:\wamp\www

จากนนพมพคาสงสาหรบการสราง Project Skeleton ดงน yiic webapp myyiiapp สาหรบ

myyiiapp คอชอ Project เรานนเอง

จากนนกดปม Enter แลวกด yes เพอสราง กจะไดโครงสรางไฟลตางๆ ดงน

~ 11 ~


การสราง Project ใน Netbeans IDE Netbean IDE เปน Software ทเปน Integrated Development Environment หรอ

สภาพแวดลอมของการพฒนา Application เราโดยสามารถดาวโหลดไดท

http://www.netbeans.org การสราง Project ใน Netbean นนไปท File->New Project

จากนนเลอก PHP Application with Existing Sources

จากนน Browse ไปยง Folder myyiiapp

แลวกดปม Finish จะเหนวาดานซายมอมรายการไฟลตางๆ ใน Project เรยบรอยแลว

~ 12 ~


หมายเหต สาหรบ Yii Framework จะม PlugIn ใน Netbeans IDE ซงสามารถดาวโหลดมาตดตง

ไดฟร จะชวยใหสามารถเรยกใชงาน Library ของ Yii Framework ไดงายยงขน ดาวโหลดไดท

http://plugins.netbeans.org/plugin/47246/php-yii-framework-netbeans-phpcc

การตดตง ไปท Tools->PlugIns

จากนนไปท Tab Downloaded

แลวกด Add Plugins… เลอก PlugIn ทดาวโหลด แลวกด Install

~ 13 ~


การตดตง Yii Snippets ใน Sublime Text 3

Sublime Text 3 เปน Editor อกตวหนงทนาสนใจ เนองจากสามารถใชไดฟร และมความ

รวดเรวใจการเปดใชงาน

ใน Sublime Text 3 จะม Code ลกษณะ Auto Complete ทเรยกวา Snippet อย

สาหรบวธการใชงาน เชนพมพ hlink แลวกด tab กจะปรากฏ Code <?php echo

CHtml::link('text', array(), array('optionName'=>optionValue)); ?> ขนมาใหทนท

สาหรบ Snippet สาหรบ Yii Framework นนสามารถดาวโหลดไดท

https://github.com/dexnode/sublime-yii-snippets

สาหรบการตดตงใหไปทเมน Preferences->Browse Packages…

~ 14 ~


จากนนนา snippets ทดาวโหลดมาวางใน Folder User

สาหรบการเรยกใชงานใหดคาสงไดทเมน Tools->Snippets… กจะปรากฏคาสงตางๆ ขนมา

สาหรบการสราง Project ใน Sublime Text3 นนงายๆ เพยงแคเลอก File->Open Folder ก

สามารถเปด Project ไดทนท

~ 15 ~


การตดตง Yii Eclipse PlugIn

Eclipse กเปน IDE ตวหนงทเราสามารถนามาเขยน PHP ได แตตองตดตง Eclipse PDT

PlugIn เขาไปดวย โดยสามารถดาวโหลดไดจากเวบไซต www.eclipse.org

สาหรบการตดตง Eclipse PDT PlugIn นนเมอตดตง Eclipse เสรจเรยบรอย เปด Eclipse

แลวไปทเมน Help->Install New Software จากนนใส URL

http://download.eclipse.org/tools/pdt/updates/release แลวกดปม Add...

จากนนจะปรากฏขอมลดงภาพ

กดปม Next… ไดเลย

~ 16 ~


~ 17 ~


จะปรากฏราละเอยดการตดตง กดปม Next…

กดปมยอมรบการใชงาน แลวกดปม Next…

~ 18 ~


แลวกดปม Finish แลวกดปม Yes เพอ Restart Eclipse

สาหรบ Eclipse IDE นนกม PlugIn สาหรบ Yii Framework เชนกนโดยมเวบไซต

http://yiiclipse.maziarz.org/ เปนเวบไซตผพฒนา

สาหรบการตดตง Yii Eclipse PlugIn นนไปทเมน Help->Install New Software…

วาง Link http://yiiclipse.maziarz.org/updatesite/STABLE/ ทชอง Work with: จากนนกดปม

Add…

~ 19 ~


จากนนตงชอ Yii (ทจรงชออะไรกไดครบ) แลวกดปม OK

จะปรากฏขอมลดงภาพ

จากนนกดปม Next… จะปรากฏรายละเอยด

กดเลอกยอมรบขอตกลงแลวกดปม Next…

จากนนจะปรากฏขอความเตอนกด OK

แลวกทาการ Restart Eclipse จากนนกสามารถใช Eclipse กบ PHP และ Yii Framework ไดแลว

ครบ

~ 20 ~


การออกแบบ ER Diagram และการ Forward Engineering สาหรบการออกแบบ ER Diagram หรอ Entity Relationship Diagram นนเปนการ

ออกแบบ Entity หรอตารางในการเกบขอมลในฐานขอมล MySQL นนเองโดยจะใชโปรแกรมของ

MySQL ทมชอวา MySQL Workbench ซงสามารถดาวโหลดไดท

http://www.mysql.com/products/workbench/ โดยสามารถดาวโหลดและตดตงไดฟร

การออกแบบ ER Diagram

สราง Project ใหม ไปทเมน File->New Model แลวเปลยนชอ Schema หรอชอฐานขอมลตามท

ตองการ

~ 21 ~


แลวคลกท Add Diagram

แลวใชเครองมอ Create New Table เพอสรางตารางหรอ Entity ใหม

โดยกาหนดใหมลกษณะของตารางดงน คอ

• Field แรกมชอวา id เปน Primary Key และเปน Auto Increment

• ใสรายละเอยดทงหมด เชน ชนด ความยาว และใสความเหน (Comment) ของแตละ Field

ดวย *** สาคญมาก ตอนทใช Gii Generator ***

~ 22 ~


ใชเครองมอความสาพนธ (Relation) เพอสรางความสมพนธแบบตางๆ

เมอได Diagram ทตองการแลวจะมลกษณะดงน

~ 23 ~


การสรางฐานขอมล

กอนการ Forward Engineering นนใหทาการสรางฐานขอมลกอน โดยเขา

http://127.0.0.1/phpmyadmin หรอ http://localhost/phpmyadmin

~ 24 ~


จากนนคลกท Database แลวใสชอฐานขอมลตามตองการ ในทนคอ myyiiapp แลวเลอการ

เขารหสตวอกขระใหเปน utf8_unicode_ci แลวกด Create

จะปรากฏกลองขอความสเขยวบอกวาไดสรางฐานขอมล myyiiapp เรยบรอยแลว

การ Forward Engineering

การ Forward Engineering เปนการนาโครงสรางจาก ER Diagram ไป Create ใน

ฐานขอมลจรง โดยไปทเมน Database->Forward Engineer

~ 25 ~


จะปรากฏขนตอนของการเชอมตอ ใหคลก Next ไปไดเลย

จะปรากฏ Option เสรม เพอเลอกวาจะลบตารางเกาออกจากฐานขอมลหรอเปลา ขนตอนนคลก

Next ไดเลย

~ 26 ~


จากนนจะปรากฏการกรอง วาจะ Forward อะไรไปบางในทนใชหมดทกอยางใหคลก Next ไปไดเลย

จะปรากฏรายการคาสง SQL ซงสามารถ Copy ไวได ในทนกด Next ไปไดเลย

~ 27 ~


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

Engineer Finished Successfully

~ 28 ~


กเปนอนเสรจเรยบรอยสาหรบการสรางฐานขอมลและการ Forward Engineering

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

orders

Table comments: orders

Column Type Null Default Comments

id int(11) No

order_date datetime No วนทสงซอ

total int(11) No รวมเปนเงน

user_id int(11) No ผสงซอ

first_name varchar(100) No ชอผรบ

last_name varchar(100) No นามสกลผรบ

order_address text No ทอยผรบ

order_province varchar(100) No จงหวดผรบ

order_zipcode varchar(5) No รหสไปรษณยผรบ

orders_has_products

Table comments: orders_has_products


order_id int(11) No ใบสงซอ

product_id int(11) No สนคา

quantity int(11) No จานวน

price int(11) No ราคา

product_types

Table comments: product_types


id int(11) No

~ 29 ~


product_type varchar(100) No ประเภทสนคา

products

Table comments: products


id int(11) No

product_name varchar(100) No ชอสนคา

product_price int(11) No ราคาสนคา

product_type_id int(11) No ประเภทสนคา

users

Table comments: users


id int(11) No

firstname varchar(100) No ชอ

lastname varchar(100) No นามสกล

username varchar(45) No Username

password varchar(45) No Password

address text No ทอย

province enum('กรงเทพมหานคร', 'อบลราชธาน') No จงหวด

zipcode varchar(5) No รหสไปรษณย

created datetime No สมครสมาชกเมอ

user_type enum('admin', 'user') No user ประเภทผใช

~ 30 ~


การสราง Attribute Label ใหเปนภาษาไทยโดยอตโนมต หลงจากทมการออกแบบ ER Diagram และทาการ Forward Engineering เรยบรอยแลว

ขนตอนถดมาจะเปนเรองของการ Generate Code ดวย Gii Generator โดยเขา URL

index.php?r=gii จะปรากฏชองสาหรบกรอก Password ใหทาการกรอก Password ตามทไดตงไว

ใน protected/config/main.php

ไปทเมน Model Generator

แลวใสเครองหมาย * เพอสรางทกๆ Model

หนังสือ yii framework tip 50 เทคนิค yii framework

Technology

yii message

yii framewok application

yii framework tip

yii booster extension

yii eclipse plugin

yii snippets sublime

er diagram forward engineering

project skeleton