�ݺ�ߣ

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:wampyii
จากนั้นไป 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:wampbinphpphp5.3.13; D:wampyiiframework;
หมายเหตุ Version ของ PHP นั้นอาจแตกต่างกันได้ และหลังจากตั้งค่าเสร็จเรียบร้อยแล้วอาจจะ
ต้อง Restart ก่อนจึงจะสามารถใช้คําสั่ง yiic ได้

~ 10 ~
การสร้าง Project Skeleton
การสร้าง Project Skeleton หรือการสร้างโครงสร้างไฟล์ต่างๆ ของ Application ใหม่
ก่อนการเขียนโปรแกรม โดยเปิดโปรแกรม Command Prompt แล้ว CD ไปที่ D:wampwww
จากนั้นพิมพ์คําสั่งสําหรับการสร้าง 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

More Related Content

หนังสือ Yii framework Tip 50 เทคนิค Yii Framework