SlideShare a Scribd company logo
Programmer Thailand
Application Workshop #1
เรียนรู้ได้ไว เข้าใจได้ง่าย ใช้งานได้จริง กับ 4 Workshop
พิเศษ
มานพ กองอุ่น
PROGRAMMER THAILAND | www.programmerthailand.com
www.programmerthailand.com
2
บทนํา
หนังสือเล่มนี้เขียนขึ้นจากประสบการณ์ในการพัฒนาระบบ ซึ่งเป็นแนวทางให้ผู้อ่านได้สามารถ
เรียนรู้เทคนิคต่างๆ ในการพัฒนา Application ด้วย Yii PHP Framework ได้อย่างรวดเร็ว ทําให้ผู้อ่าน
สามารถนําไปประยุกต์ใช้กับระบบของตัวเองที่กําลังพัฒนา สําหรับหนังสือเล่มนี้ผมจะไม่สาธยายมากนัก แต่
จะพาทุกๆ ท่านทํา ทํา ทํา พอจบแต่ละตอนท่านก็จะ อ๋อ! เองครับ การอธิบายยาวๆ จะทําให้ไม่สนุกในการ
ทํา จากที่ผมลองทําตามหนังสือหลายๆ เล่มแล้ว เล่มที่สามารถทําให้เราพัฒนาระบบได้จริงๆ คือ หนังสือที่
เป็นลักษณะ Workshop เพราะว่าอยู่ในสถานการณ์ที่สามารถพัฒนา Application ได้จริง ไม่ใช่หนังสือที่
สอนแต่เรื่องวิชาการ หรือเอาส่วนนั้น ส่วนนี้มาทําเป็นตอนๆ ทําให้ขาดความต่อเนื่อง และมองไม่เห็นภาพว่า
ตั้งแต่เริ่มแรกควรทําอะไรก่อนหลัง ผมจึงตั้งใจมากที่อยากถ่ายทอดประสบการณ์ในการพัฒนา Application
ด้วย Yii Framework ให้ทุกๆ ท่านได้ลองศึกษาดูนะครับ จากตัวอย่างที่สามารถทํางานได้จริงๆ ทําให้เรา
สามารถเรียนรู้ขั้นตอนในการพัฒนา และต่อยอดได้ในอนาคต ผมกําลังบอกว่าท่านสามารถเรียนรู้แล้วรับ
งานได้ทันทีจากการอ่านและทําตามหนังสือเล่มนี้
หนังสือเล่มนี้ไม่ได้เน้นถ้อยคําที่สละสลวย ไม่เน้นคําวิชาการที่เข้าใจยากๆ แต่ใช้คําศัพท์ทั่วๆ ไปที่
ทุกๆ ท่านควรรู้ เพื่อเป็นแนวทางให้ทุกๆ ท่านสามารถต่อยอดได้
ท้ายสุดก็ต้องขอขอบคุณทุกๆ ท่านที่มีส่วนร่วมทําให้หนังสือเล่มนี้เกิดขึ้น และที่สําคัญต้อง
ขอขอบคุณทุกๆ ท่านที่สนับสนุน Programmer Thailand มาโดยตลอด ขอขอบคุณจากใจจริงครับ
มานพ กองอุ่น
www.programmerthailand.com
3
สารบัญ
มานพ กองอุ่น..........................................................................................................................................1
บทนํา .....................................................................................................................................................2
สารบัญ...................................................................................................................................................3
เตรียมความพร้อม...................................................................................................................................8
Yii Framework คืออะไร ..................................................................................................................8
รุ่นต่างๆ ของ Yii Framework.....................................................................................................8
การทํางานของ Yii Framework.......................................................................................................10
Model........................................................................................................................................11
Controller ..................................................................................................................................11
View..........................................................................................................................................11
Yii Framework MVC Step...........................................................................................................11
การทํางานพื้นฐาน.......................................................................................................................11
ขั้นตอนการร้องขอ.......................................................................................................................12
Bootstrap คืออะไร..........................................................................................................................14
การติดตั้ง WAMP Server..............................................................................................................16
ดาวโหลด WAMP Server.........................................................................................................16
การติดตั้ง WAMP Server........................................................................................................18
การใช้งาน MySQL Workbench เบื้องต้น......................................................................................24
ดาวโหลด MySQL Workbench................................................................................................24
ติดตั้ง MySQL Workbench.....................................................................................................25
การดาวโหลดและติดตั้ง Yii Framework........................................................................................27
การดาวโหลด Yii Framework..................................................................................................27
การติดตั้ง Yii Framework........................................................................................................28
การดาวโหลดและติดตั้ง Netbean IDE............................................................................................33
www.programmerthailand.com
4
การดาวโหลด Netbean IDE......................................................................................................33
การติดตั้ง Netbean IDE...........................................................................................................33
ระบบการรับสมัครเรียนออนไลน์ (Admission System)........................................................................35
ออกแบบและวิเคราะห์ระบบ ............................................................................................................35
บุคคลทั่วไป................................................................................................................................35
ผู้ดูแลระบบ................................................................................................................................35
ออกแบบฐานข้อมูล...........................................................................................................................35
Entity Relationship .................................................................................................................35
Data dictionary........................................................................................................................36
สร้างฐานข้อมูลใน MySQL ด้วย phpMyAdmin........................................................................38
Forward Engineering..............................................................................................................40
เริ่มต้นเขียนโปรแกรม.......................................................................................................................45
การสร้าง Application Skeleton...............................................................................................45
การสร้าง Project ใน Netbean IDE.........................................................................................48
ติดตั้ง Yii-Booster Extension...................................................................................................51
ตั้งค่า protected/config/main.php............................................................................................52
ใช้ Gii Generator สร้าง Model กันครับ....................................................................................53
ใช้ Gii Generator สร้าง CRUD สําหรับ Bootstrap.................................................................55
ติดตั้ง exportablegridbehavior..................................................................................................56
การสร้าง User Authentication................................................................................................56
การสร้างหน้าแรกสําหรับสมัครเรียน..........................................................................................58
Admin ดูรายชื่อผู้สมัครและส่งรายชื่อผู้สมัครออกเป็น CSV......................................................64
สรุป Workshop ระบบการรับสมัครเรียนออนไลน์ ...........................................................................70
ระบบเว็บบล็อก (Weblog) .....................................................................................................................71
ออกแบบและวิเคราะห์ระบบ .............................................................................................................71
สมาชิก (User) ...........................................................................................................................71
www.programmerthailand.com
5
ผู้ดูแลระบบ (Administration)....................................................................................................71
ความต้องการ .............................................................................................................................71
ออกแบบฐานข้อมูล...........................................................................................................................72
Entity Relationship .................................................................................................................72
Data dictionary........................................................................................................................72
สร้างฐานข้อมูลใน MySQL ด้วย phpMyAdmin........................................................................74
Forward Engineering..............................................................................................................74
เริ่มต้นเขียนโปรแกรม.......................................................................................................................80
ใช้ Gii Generator สร้าง blog module......................................................................................80
ตั้งค่า protected/config/main.php............................................................................................83
ใช้ Gii Generator สร้าง Model กันครับ....................................................................................83
ใช้ Gii Generator สร้าง CRUD สําหรับ Bootstrap.................................................................85
สร้างไฟล์การตั้งค่า Parameters................................................................................................87
เขียนโปรแกรมโพสบล็อก............................................................................................................88
เขียนโปรแกรมแสดงความคิดเห็น..............................................................................................104
ปรับปรุง Model Tag................................................................................................................110
ปรุบปรุง Model Lookup..........................................................................................................113
สรุป Workshop ระบบเว็บบล็อก (Weblog)...................................................................................114
ระบบเก็บข้อมูลรายรับรายจ่าย.............................................................................................................115
ออกแบบและวิเคราะห์ระบบ ...........................................................................................................115
สิทธิ์ของผู้ใช้งาน........................................................................................................................115
ออกแบบฐานข้อมูล..........................................................................................................................116
ER Diagram............................................................................................................................116
Data Dictionary......................................................................................................................118
การสร้างฐานข้อมูล...................................................................................................................119
การ Forward Engineering.....................................................................................................120
www.programmerthailand.com
6
รู้จักกับ jQuery Mobile..................................................................................................................126
เริ่มต้นเขียนโปรแกรม......................................................................................................................127
การสร้าง Application Skeleton..............................................................................................127
การสร้าง Project ใน NetbeanIDE..........................................................................................128
สร้าง Theme ใหม่ใน Yii Framework......................................................................................130
ปรับแก้ไขไฟล์ Configuration....................................................................................................131
การใช้ Gii Generator สร้าง Model.........................................................................................132
การใช้ Gii Generator สร้าง CRUD.........................................................................................137
การเขียนโปรแกรมสมัครสมาชิก................................................................................................141
การปรับแก้การเข้าสู่ระบบ User Identity ................................................................................ 145
การเขียนโปรแกรมบันทึกรายรับ -รายจ่าย ................................................................................. 145
การเขียนโปรแกรมแสดงกราฟ...................................................................................................149
สรุป Workshop ระบบเก็บข้อมูลรายรับรายจ่าย........................................................................... 152
ระบบร้านค้าออนไลน์ (Online Shop).................................................................................................. 153
ออกแบบและวิเคราะห์ระบบ .......................................................................................................... 153
ลูกค้า....................................................................................................................................... 153
ผู้ดูแลระบบ.............................................................................................................................. 153
ออกแบบฐานข้อมูล......................................................................................................................... 153
ER Diagram........................................................................................................................... 154
Data Dictionary..................................................................................................................... 154
การ Forward Engineering.................................................................................................... 156
เริ่มต้นเขียนโปรแกรม......................................................................................................................161
การสร้าง Project Skeleton ....................................................................................................162
การสร้าง Project ใน NetbeanIDE..........................................................................................163
การติดตั้ง Yii Booster Extension..........................................................................................164
การดาวโหลด............................................................................................................................164
www.programmerthailand.com
7
การติดตั้ง ................................................................................................................................ 165
การปรับแก้ไขไฟล์ Configuration............................................................................................. 166
การใช้ Gii Generator สร้าง Model.........................................................................................167
การใช้ Gii Generator สร้าง CRUD.........................................................................................170
การสร้างระบบ User Identity จากฐานข้อมูล...........................................................................172
การจัดการกับประเภทสินค้า......................................................................................................172
การจัดการกับสินค้า..................................................................................................................174
การนําสินค้ามาวางขายหน้าร้าน................................................................................................178
การสร้างระบบรถเข็น )CartController) ....................................................................................180
สรุป Workshop ระบบร้านค้าออนไลน์ (Online Shop)..................................................................188
คําขอบคุณ...........................................................................................................................................190
ดรรชนี (Index)....................................................................................................................................191
www.programmerthailand.com
8
เตรียมความพร้อม
Yii Framework คืออะไร
Yii หรือ ยี่ ย่อมาจาก Yes It Is เป็นการออกแบบโดยใช้หลักการของ MVC หรือ Model View
และ Controller ทําให้สามารถพัฒนาโปรแกรมออกจากส่วนของการ Design ได้
คุณสมบัติที่โดดเด่นของ Yii Framework มีดังนี้
• ออกแบบตามหลักการของ MVC
• รองรับระบบ Theme
• มี ORM (Object Relation Model)
• สนับสนุน I18n และ l10n ในเรื่องของการแปลภาษา
• มีระบบแคชช่วยให้ทํางานได้ไวยิ่งขึ้น
• มีระบบตรวจสอบข้อผิดพลาดที่ละเอียด
• มีระบบ Generator CRUD ที่รวดเร็วทันใจ เป็นภาษาไทยได้ทันที
• มี widgets ที่สามารถเรียกใช้งานได้ทันที แทบไม่ต้องไปเขียน code ให้วุ่นวาย
• มี extension ที่ผู้คนสร้างไว้ให้ใช้งาน สามารถเลือกใช้งานได้แบบฟรีๆ
• และอื่นๆ อีกมากมาย
นั่นก็หมายความว่าเราสามารถพัฒนา Application ของเราในรูปแบบที่เป็นมาตรฐานสากล และแน่ล่ะเป็น
OOP 100% เอาล่ะครับสําหรับใครที่ต้องการอยากปรับเปลี่ยนการเขียนจากแบบ Structure มาเป็น OOP
แล้วล่ะก็ ผมว่า Yii Framework นี้ละลงตัวที่สุดเลยครับ ก่อนหน้าผมเคยใช้ Framework ตัวอื่นแต่มันก็ยัง
ไม่ตอบโจทย์เท่าไร เนื่องจากการเปลี่ยน version ที่บ่อยมากๆ
รุ่นต่างๆ ของ Yii Framework
เวอร์
ชั่น
ปล่อย วันที่ออกข่าว ในตอนท้ายของการบํารุงรักษา ความต้องการ
www.programmerthailand.com
9
1.0 1.0 3 ธันวาคม 2008 31 ธันวาคม 2010 PHP 5.1.0 หรือสูง
กว่า
1.0.1 4 มกราคม 2009
1.0.2 1 กุมภาพันธ์ 2009
1.0.3 1 มีนาคม 2009
1.0.4 5 เมษายน 2009
1.0.5 10 พฤษภาคม 2009
1.0.6 7 มิถุนายน 2009
1.0.7 5 กรกฎาคม 2009
1.0.8 9 สิงหาคม 2009
1.0.9 6 กันยายน 2009
1.0.10 18 ตุลาคม 2009
1.0.11 13 ธันวาคม 2009
1.0.12 14 มีนาคม 2010
1.1 1.1.0 10 มกราคม 2010 31 ธันวาคม 2015 หรือหลังจาก
นั้น
PHP 5.1.0 หรือสูง
กว่า
1.1.1 14 มีนาคม 2010
1.1.2 2 พฤษภาคม 2010
www.programmerthailand.com
10
1.1.3 4 กรกฎาคม 2010
1.1.4 5 กันยายน 2010
1.1.5 พฤศจิกายน 14,
2010
1.1.6 16 มกราคม 2011
1.1.7 27 มีนาคม 2011
1.1.8 26 มิถุนายน 2011
1.1.9 1 มกราคม 2012
1.1.10 กุมภาพันธ์ 12, 2012
1.1.11 29 กรกฎาคม 2012
1.1.12 19 สิงหาคม 2012
1.1.13 30 ธันวาคม 2012
1.1.14 11 สิงหาคม 2013
2.0 TBD TBD TBD PHP 5.3.0 หรือสูง
กว่า
การทํางานของ Yii Framework
สําหรับหลัการทํางานของ Yii Framework นั้นจะเป็นการทํางานคล้ายกันกับ PHP Framework
ทั่วไป โดยจะมีส่วนของ Model, View และ Controller หรือที่เรียกกันว่า MVC นั่นเอง
www.programmerthailand.com
11
Model
ส่วนของ Model นั้นเป็นส่วนที่ทํางานกับตารางในฐานข้อมูล หรือเรียกได้ว่าเป็นส่วนของการเตรียม
ข้อมูลนั่นเอง
Controller
ส่วนของ Controller นั้นเป็นส่วนที่รวบรวม Login ของโปรแกรม การคํานวณ การประมวลผล
ข้อมูลและเป็นจุดเชื่อมระหว่าง Model และ View นั่นเอง
View
ส่วนของ View นั้นเป็นส่วนที่แสดงผลหรือหน้าตาของระบบนั่นเองครับ โดยมีการรับข้อมูลมาจาก
Controller แล้วส่งมาแสดงผลที่ View และส่วน View ก็ยังเป็นส่วนส่งข้อมูลไปประมวลผลที่ Controller
ด้วยเช่นกันครับ
Yii Framework MVC Step
ดูเพิ่มเติมได้ที่ http://www.yiiframework.com/doc/guide/1.1/en/basics.mvc
การทํางานพื้นฐาน
อย่างที่กล่าวไป Yii Framework ทํางานลักษณะรูปแบบของ MVC หรือ Model-View-Controller
ซึ่งการทํางานจะแยกอิสระต่อกันในส่วนของ Business Login และส่วนของการแสดงผลโดยที่หากมีการ
เปลี่ยนแปลงที่หนึ่งจะไม่กระทบต่ออีกที่หนึ่ง เช่นใน Controller มีการเขียนโปรแกรมที่ซับซ้อน หากเราเป็น
โปรแกรมให้มีการเขียนที่สั้นๆ เข้าใจง่ายมากยิ่งขึ้นก็จะไม่มีผลกระทบต่อส่วนของ View หรือการแสดงผล
เลย นั่นเอง
ลักษณะของ MVC ใน Yii Framework นั้นส่วนที่อยู่หน้าสุดคือส่วนที่เรียกว่า Application โดยจะ
เป็นส่วนหลักในการประมวลผลส่วนของการ Request ดังแสดงในรูปด้านล่าง
www.programmerthailand.com
12
ขั้นตอนการร้องขอ
ในขั้นตอนนี้เรามาดูกันว่าการร้องขอจาก Client ไปยัง Yii Framework จะมีขั้นตอนอย่างไรบ้าง
1. เมื่อ Client มีการร้องขอ URL Address เช่น
http://www.programmerthailand.com/index.php?r=post/view&id=1 ในส่วนของ Web
Server ก็จะทําการเรียกไฟล์ index.php
2. Index.php ก็จะสร้าง Application Instance และสั่งให้ทํางาน
3. ในส่วนของ Application ก็จะมีส่วนจัดการกับข้อมูลการร้องขอซึ่งเป็นส่วนหนึ่งของ Application
Component ที่เรียกว่า request
4. ส่วน Application ก็จะจัดการกับการร้องขอ controller และ action ซึ่งเป็น Application
Component ที่เรียกว่า urlManager จากตัวอย่างก็จะเรียก controller ชื่อว่า post ซึ่งก็คือ
PostController และ action ที่เรียกว่า view ที่อยู่ใน PostController นั่นเอง
5. Application ก็จะสร้าง Instance ของ Controller ที่เรียก และเรียก action ที่ request มานั่นก็
คือ view โดยที่เรียก actionView ใน PostController ซึ่งในขณะเดียวกันก็จะมีส่วนของการ filter
www.programmerthailand.com
13
ด้วย เช่นเรื่องสิทธิ์การเข้าถึง action (access control) เป็นต้น ซึ่งจะมีความเชื่อมโยงกับ action
หากว่าสามารถเรียกใช้งาน action ได้ filter ก็จะยอมให้เรียกใช้ action ได้
6. Action ก็จะไปอ่าน Post model โดยเรียก ID ของ Primary Key มีค่าเท่ากับ 1
7. Action view ก็จะทําการ render ไฟล์ view ที่มีชื่อว่า view พร้อมกับส่ง Post model เข้าไปที่
view ด้วย
8. ใน view ก็จะมีการประมวลผล widgets ต่างๆ (ถ้ามี)
9. หลังจากประมวลผลส่วนการแสดงผลแล้วก็จะประมวลผลส่วนของ Layout หรือส่วนโครงสร้าง
เว็บไซต์
10. Action view ก็จะทํางานเสร็จสมบูรณ์เรียบร้อยแล้ว พร้อมแสดงผลออกมาในฝั่ง Client ให้เราได้
เห็น
และนี่คือขั้นตอนการทํางานของ Yii Framework นะครับ ถ้าเข้าใจขั้นตอนเหล่านี้ก็จะสามารถ
พัฒนา Application ได้อย่างง่ายดายมากยิ่งขึ้นครับ โดยขั้นตอนเหล่านี้เป็นขั้นตอนพื้นฐานที่เราต้อง
เรียนรู้และทําความเข้าใจครับ
เอาล่ะครับถึงขั้นตอนนี้แล้วก็น่าจะพอรู้จักกับ Yii Framework มาบ้างแล้วล่ะครับ โดยขั้นต่อไป ไป
เรียนรู้วิธีการพัฒนา Application ก็ได้เลยครับ โดยผมจะพาทําแบบ Step by Step ทีล่ะขั้นตอนซึ่ง
หลังจากทําตามเสร็จแล้ว อาจจะสร้างเป็นแนวทางของตัวเองนอกเหนือจากที่ผมได้นําเสนอก็ได้นะครับ
เนื่องจากว่าการเขียนโปรแกรมจะเป็นรูปแบบของแต่ละคนน่ะครับ อาจเขียนไม่เหมือนกัน บางคนเขียน
คําสั่งยาว แต่บางคนก็อาจเขียนคําสั่งสั้นครับ ถ้างั้นไปลุยกันเลยนะครับ ^ ^
www.programmerthailand.com
14
Bootstrap คืออะไร
Bootstrap คือ CSS Framework หรือเข้าใจง่ายๆ ว่าหน้าจอ User Interface ที่เราสามารถเรียกใช้งาน
ได้ทันที โดยที่เราไม่ต้องมานั่งเขียน CSS เองแบบว่าง่ายมากจริงๆ ครับ
ตัวอย่างเช่น ถ้าต้องการสร้างปุ่มที่สวยงามก็เพียงแค่เรียกใช้งาน class ของปุ่มนั้นๆ ตามภาพด้านล่าง
www.programmerthailand.com
15
ทีนี้อย่างที่กล่าวไปแล้วว่า Bootstrap ง่ายมากจริงๆ ในการทํา User Interface จากนั้นมีผู้พัฒนาได้นํามา
ต่อยอดพัฒนาเป็นลักษณะของ ส่วนเสริม (Extension) ให้กับ Yii Framework แล้วตั้งชื่อใหม่ว่า Yii
Booster โดยสามารถดาวโหลดได้ที่ http://yiibooster.clevertech.biz/
และใน Yii Booster ก็มีการเรียกใช้งานลักษณะที่เป็น ภาษา PHP โดยจะทําเป็น widget ให้เรียกใช้งาน
แบบง่ายๆ ตัวอย่างเช่น
จะเห็นว่าสามารถเรียกใช้งานได้ง่ายดายมากๆ
ท่านผู้อ่านสามารถศึกษารายละเอียดเพิ่มเติมได้จากเว็บไซต์
http://twitter.github.io/bootstrap/ สําหรับ Bootstrap
www.programmerthailand.com
16
http://yiibooster.clevertech.biz สําหรับ Yii Booster
การติดตั้ง WAMP Server
WAMP คือ การจําลองเครื่องเรา ไม่ว่าจะเป็น Notebook หรือ PC ให้กลายเป็นเครื่อง Web
Server หรือจะติดตั้งที่เครื่อง Server โดยตรงก็ได้ เพื่อให้สามารถแปลคําสั่ง PHP ได้โดยทํางานบน
ระบบปฏิบัติการ Windows ซื่งก็คือ
W = Windows
A = Apache
M = MySQL
P = PHP
นอกจากนั้นเรายังสามารถใช้ระบบอื่นๆ ได้เช่น AppServ หรือ XAMPP ก็ได้ไม่ได้จํากัดนะครับ
เพียงแต่เลือกใช้ตามความถนัดของแต่ละท่าน สรุปว่าให้สามารถเขียน PHP แล้วแปลคําสั่งได้ก็พอครับ
ดาวโหลด WAMP Server
การดาวโหลด WAMP ให้ไปที่เว็บไซต์ www.wampserver.com
แล้วกดเปลี่ยนเป็นภาษาอังกฤษ จากนั้นกดปุ่ม Download
www.programmerthailand.com
17
ซึ่งจะมี Scrolling ลงมาด้านล่าง แล้วเลือก Version ตามต้องการ โดยเลือกจากระบบปฏิบัติการว่าใช้กี่บิต
www.programmerthailand.com
18
ตัวอย่างเช่นถ้าใช้ 64 bit ก็กดที่ 64 bit ก็จะปรากฏ Popup สําหรับเครื่อง 64 bit ให้ดาวโหลด โดยเรา
จะดาวโหลด 2 อย่าง อย่างแรก คือ WAMP และ Microsoft Visual C++ 2010 SP1
ทําการดาวโหลดทั้ง 2 โปรแกรม
การติดตั้ง WAMP Server
การติดตั้ง Microsoft Visual C++ 2010 SP1
ให้ทําการติดตั้ง Microsoft Visual C++ 2010 ก่อน โดยเปิดไฟล์ vcredist_x64.exe
www.programmerthailand.com
19
แล้วกดปุ่ม Next> จนกว่าจะติดตั้งสําเร็จ กดปุ่ม Finish ก็เป็นอันเสร็จเรียบร้อย
www.programmerthailand.com
20
ติดตั้ง WAMP Server
เปิดไฟล์ wampserver2.2e-php5.3.13-httpd2.2.22-mysql5.5.24-x64.exe ที่ได้ทําการดาวโหลดมา
www.programmerthailand.com
21
กดปุ่ม Next > ไปที่หน้ายอมรับข้อตกลงการใช้งาน
กดปุ่ม Next > เพื่อเลือกตําแหน่งของการติดตั้ง ในที่นี้คือ D:wamp
www.programmerthailand.com
22
กดปุ่ม Next > เพื่อเลือกการสร้าง Shortcut
กดปุ่ม Next > เพื่อเตรียมเข้าสู่การติดตั้ง
www.programmerthailand.com
23
กดปุ่ม Install เพื่อเข้าสู่การติดตั้ง รอจนกว่าจะขึ้นให้กด Finish
จะเห็นว่ามี Icon ปรากฏอยู่ที่มุมล่างขวาของหน้าจอเราแสดงว่าพร้อมทํางานแล้ว คลิ๊กที่ W สีเขียว
แล้วเลือก localhost
จะปรากฏหน้า localhost ดังนี้
www.programmerthailand.com
24
แสดงว่าการติดตั้งเสร็จสมบูรณ์แล้ว
การใช้งาน MySQL Workbench เบื้องต้น
MySQL Workbench เป็นโปรแกรมในการจัดการ Entity หรือ ตารางใน Schema หรือ
ฐานข้อมูล โดยสามารถลากเส้นเชื่อมโยงที่เรียกว่า Relation โดยมีการเชื่อมโยงหลายๆ แบบ เช่น หนึ่งต่อ
หนึ่ง (1:1), หนึ่งต่อกลุ่ม (1:M) และ กลุ่มต่อกลุ่ม (M:N) ให้สามารถมองเป็นเป็นโครงสร้าง โดยเป็น
โปรแกรมของ MySQL โดยตรงเราจึงควรเรียนรู้การใช้งานนะครับ เพราะมีประโยชน์มากครับ
ดาวโหลด MySQL Workbench
เข้าไปที่เว็บไซต์ http://www.mysql.com/products/workbench/ กดที่ Download Now >>
www.programmerthailand.com
25
จะปรากฏหน้าสําหรับ Download โดยสามารถเลือกได้ 2 แบบ คือ แบบติดตั้ง และแบบ zip ทํางานโดย
ไม่ต้องติดตั้ง ในที่นี้ผมเลือกแบบ zip กดที่ปุ่ม Download ได้เลยครับ
จะปรากฏหน้าการเข้าสู่ระบบและสมัครสมาชิก หากไม่ต้องการเข้าสู่ระบบหรือสมัครสมาชิก ให้คลิ๊กที่ No
thanks, just start my download.
ติดตั้ง MySQL Workbench
เมื่อดาวโหลดเรียบร้อยให้แตก zip ไฟล์ไปเก็บไว้ตามที่ต้องการในที่นี้คือ D:MySQL Workbench xxxx
www.programmerthailand.com
26
ทําการส่ง Icon ไปแสดงที่หน้าจอ คลิ๊กขวาที่ MySQLWorkbench.exe เลือก Send to แล้วเลือก
Desktop (create shortcut)
ทดลองเปิดใช้งาน
www.programmerthailand.com
27
การดาวโหลดและติดตั้ง Yii Framework
ทีนี้มาถึงคิวของ Yii Framework พระเอกของเราแล้วล่ะครับ ซึ่งส่วนนี้จะกล่าวถึงเรื่องของการดาวโหลด
และติดตั้ง Yii Framework ของเรานะครับ
การดาวโหลด Yii Framework
เข้าไปที่เว็บไซต์ http://www.yiiframework.com/ จากนั้นกดปุ่ม Download Yii
www.programmerthailand.com
28
ก็จะปรากฏหน้าการดาวโหลดทันที
การติดตั้ง Yii Framework
แตกไฟล์ทั้งหมดมาที่ Folder D:wampyii
www.programmerthailand.com
29
จากนั้นคลิ๊กขวา Computer เลือก Properties
จะปรากฏหน้ารายละเอียดระบบ แล้วกดที่ Advanced system settings
www.programmerthailand.com
30
ปรากฏส่วนของ System Properties แล้วกดปุ่ม Environment Variables…

More Related Content

What's hot

โปรแกรมคอม
โปรแกรมคอมโปรแกรมคอม
โปรแกรมคอมOnrutai Intanin
 
โปรแกรมคอม
โปรแกรมคอมโปรแกรมคอม
โปรแกรมคอมOnrutai Intanin
 
Introduction Software Factory v1.1
Introduction Software Factory v1.1Introduction Software Factory v1.1
Introduction Software Factory v1.1Lek Pongpatimet
 
คู่มือการใช้งาน Mac book-pro
คู่มือการใช้งาน Mac book-proคู่มือการใช้งาน Mac book-pro
คู่มือการใช้งาน Mac book-pro
Somkid Rablee
 
คู่มือJavascript and Python
คู่มือJavascript and Pythonคู่มือJavascript and Python
คู่มือJavascript and Python
Bongkotporn Jachernram
 
150flashkrujun
150flashkrujun150flashkrujun
150flashkrujun
Krujun Deethae
 

What's hot (6)

โปรแกรมคอม
โปรแกรมคอมโปรแกรมคอม
โปรแกรมคอม
 
โปรแกรมคอม
โปรแกรมคอมโปรแกรมคอม
โปรแกรมคอม
 
Introduction Software Factory v1.1
Introduction Software Factory v1.1Introduction Software Factory v1.1
Introduction Software Factory v1.1
 
คู่มือการใช้งาน Mac book-pro
คู่มือการใช้งาน Mac book-proคู่มือการใช้งาน Mac book-pro
คู่มือการใช้งาน Mac book-pro
 
คู่มือJavascript and Python
คู่มือJavascript and Pythonคู่มือJavascript and Python
คู่มือJavascript and Python
 
150flashkrujun
150flashkrujun150flashkrujun
150flashkrujun
 

Similar to หนังสือ Yii Framework Application Workshop เล่ม 1

ใบงานที่8
ใบงานที่8ใบงานที่8
ใบงานที่8Mind Kyn
 
ใบงานที่8
ใบงานที่8ใบงานที่8
ใบงานที่8Fin Sawitree
 
ใบงานที่8
ใบงานที่8ใบงานที่8
ใบงานที่8Mind Kyn
 
04 บทที่ 4-ผลการดำเนินโครงงาน
04 บทที่ 4-ผลการดำเนินโครงงาน04 บทที่ 4-ผลการดำเนินโครงงาน
04 บทที่ 4-ผลการดำเนินโครงงานChamp Wachwittayakhang
 
ประเภทของโครงงานคอมพิวเตอร์
ประเภทของโครงงานคอมพิวเตอร์ประเภทของโครงงานคอมพิวเตอร์
ประเภทของโครงงานคอมพิวเตอร์
Natpaphat Rattanapan
 
ใบงานที่ 2 8 โครงงานคอมพิวเตอร์
ใบงานที่ 2 8 โครงงานคอมพิวเตอร์ใบงานที่ 2 8 โครงงานคอมพิวเตอร์
ใบงานที่ 2 8 โครงงานคอมพิวเตอร์Siwakorn Areephan
 
presentation 3
presentation 3presentation 3
presentation 3
KamolchanokPhanlek
 
Digital advertising-approach
Digital advertising-approachDigital advertising-approach
Digital advertising-approach
ssuser6a2994
 
ขอบข่ายและประเภทของโครงงาน
ขอบข่ายและประเภทของโครงงานขอบข่ายและประเภทของโครงงาน
ขอบข่ายและประเภทของโครงงานMind Kyn
 
โครงงานบอร์ดอาหารไทยสี่ภาค
โครงงานบอร์ดอาหารไทยสี่ภาคโครงงานบอร์ดอาหารไทยสี่ภาค
โครงงานบอร์ดอาหารไทยสี่ภาค
Montra Songsee
 
Presentation 3 (1)
Presentation 3 (1)Presentation 3 (1)
Presentation 3 (1)
mearnfunTamonwan
 
งานคอมมมมมม...
งานคอมมมมมม...งานคอมมมมมม...
งานคอมมมมมม...Lupin F'n
 
ประโยชน์ของผังงาน
ประโยชน์ของผังงานประโยชน์ของผังงาน
ประโยชน์ของผังงาน
Pannathat Champakul
 
Project 3 type of computer
Project 3 type of computerProject 3 type of computer
Project 3 type of computer
ssuserb6b789
 
ใบงานที่5
ใบงานที่5ใบงานที่5
ใบงานที่5nichaphat22
 
ใบงานที่5555
ใบงานที่5555ใบงานที่5555
ใบงานที่5555M'Mod Ta Noy
 
ใบงานที่5555
ใบงานที่5555ใบงานที่5555
ใบงานที่5555M'Mod Ta Noy
 

Similar to หนังสือ Yii Framework Application Workshop เล่ม 1 (20)

ใบงานที่8
ใบงานที่8ใบงานที่8
ใบงานที่8
 
ใบงานที่8
ใบงานที่8ใบงานที่8
ใบงานที่8
 
ใบงานที่8
ใบงานที่8ใบงานที่8
ใบงานที่8
 
04 บทที่ 4-ผลการดำเนินโครงงาน
04 บทที่ 4-ผลการดำเนินโครงงาน04 บทที่ 4-ผลการดำเนินโครงงาน
04 บทที่ 4-ผลการดำเนินโครงงาน
 
ประเภทของโครงงานคอมพิวเตอร์
ประเภทของโครงงานคอมพิวเตอร์ประเภทของโครงงานคอมพิวเตอร์
ประเภทของโครงงานคอมพิวเตอร์
 
K8
K8K8
K8
 
ใบงานที่ 2 8 โครงงานคอมพิวเตอร์
ใบงานที่ 2 8 โครงงานคอมพิวเตอร์ใบงานที่ 2 8 โครงงานคอมพิวเตอร์
ใบงานที่ 2 8 โครงงานคอมพิวเตอร์
 
presentation 3
presentation 3presentation 3
presentation 3
 
Digital advertising-approach
Digital advertising-approachDigital advertising-approach
Digital advertising-approach
 
ขอบข่ายและประเภทของโครงงาน
ขอบข่ายและประเภทของโครงงานขอบข่ายและประเภทของโครงงาน
ขอบข่ายและประเภทของโครงงาน
 
โครงงานบอร์ดอาหารไทยสี่ภาค
โครงงานบอร์ดอาหารไทยสี่ภาคโครงงานบอร์ดอาหารไทยสี่ภาค
โครงงานบอร์ดอาหารไทยสี่ภาค
 
Presentation 3 (1)
Presentation 3 (1)Presentation 3 (1)
Presentation 3 (1)
 
Pbl1
Pbl1Pbl1
Pbl1
 
P bl1
P bl1P bl1
P bl1
 
งานคอมมมมมม...
งานคอมมมมมม...งานคอมมมมมม...
งานคอมมมมมม...
 
ประโยชน์ของผังงาน
ประโยชน์ของผังงานประโยชน์ของผังงาน
ประโยชน์ของผังงาน
 
Project 3 type of computer
Project 3 type of computerProject 3 type of computer
Project 3 type of computer
 
ใบงานที่5
ใบงานที่5ใบงานที่5
ใบงานที่5
 
ใบงานที่5555
ใบงานที่5555ใบงานที่5555
ใบงานที่5555
 
ใบงานที่5555
ใบงานที่5555ใบงานที่5555
ใบงานที่5555
 

หนังสือ Yii Framework Application Workshop เล่ม 1

  • 1. Programmer Thailand Application Workshop #1 เรียนรู้ได้ไว เข้าใจได้ง่าย ใช้งานได้จริง กับ 4 Workshop พิเศษ มานพ กองอุ่น PROGRAMMER THAILAND | www.programmerthailand.com
  • 2. www.programmerthailand.com 2 บทนํา หนังสือเล่มนี้เขียนขึ้นจากประสบการณ์ในการพัฒนาระบบ ซึ่งเป็นแนวทางให้ผู้อ่านได้สามารถ เรียนรู้เทคนิคต่างๆ ในการพัฒนา Application ด้วย Yii PHP Framework ได้อย่างรวดเร็ว ทําให้ผู้อ่าน สามารถนําไปประยุกต์ใช้กับระบบของตัวเองที่กําลังพัฒนา สําหรับหนังสือเล่มนี้ผมจะไม่สาธยายมากนัก แต่ จะพาทุกๆ ท่านทํา ทํา ทํา พอจบแต่ละตอนท่านก็จะ อ๋อ! เองครับ การอธิบายยาวๆ จะทําให้ไม่สนุกในการ ทํา จากที่ผมลองทําตามหนังสือหลายๆ เล่มแล้ว เล่มที่สามารถทําให้เราพัฒนาระบบได้จริงๆ คือ หนังสือที่ เป็นลักษณะ Workshop เพราะว่าอยู่ในสถานการณ์ที่สามารถพัฒนา Application ได้จริง ไม่ใช่หนังสือที่ สอนแต่เรื่องวิชาการ หรือเอาส่วนนั้น ส่วนนี้มาทําเป็นตอนๆ ทําให้ขาดความต่อเนื่อง และมองไม่เห็นภาพว่า ตั้งแต่เริ่มแรกควรทําอะไรก่อนหลัง ผมจึงตั้งใจมากที่อยากถ่ายทอดประสบการณ์ในการพัฒนา Application ด้วย Yii Framework ให้ทุกๆ ท่านได้ลองศึกษาดูนะครับ จากตัวอย่างที่สามารถทํางานได้จริงๆ ทําให้เรา สามารถเรียนรู้ขั้นตอนในการพัฒนา และต่อยอดได้ในอนาคต ผมกําลังบอกว่าท่านสามารถเรียนรู้แล้วรับ งานได้ทันทีจากการอ่านและทําตามหนังสือเล่มนี้ หนังสือเล่มนี้ไม่ได้เน้นถ้อยคําที่สละสลวย ไม่เน้นคําวิชาการที่เข้าใจยากๆ แต่ใช้คําศัพท์ทั่วๆ ไปที่ ทุกๆ ท่านควรรู้ เพื่อเป็นแนวทางให้ทุกๆ ท่านสามารถต่อยอดได้ ท้ายสุดก็ต้องขอขอบคุณทุกๆ ท่านที่มีส่วนร่วมทําให้หนังสือเล่มนี้เกิดขึ้น และที่สําคัญต้อง ขอขอบคุณทุกๆ ท่านที่สนับสนุน Programmer Thailand มาโดยตลอด ขอขอบคุณจากใจจริงครับ มานพ กองอุ่น
  • 3. www.programmerthailand.com 3 สารบัญ มานพ กองอุ่น..........................................................................................................................................1 บทนํา .....................................................................................................................................................2 สารบัญ...................................................................................................................................................3 เตรียมความพร้อม...................................................................................................................................8 Yii Framework คืออะไร ..................................................................................................................8 รุ่นต่างๆ ของ Yii Framework.....................................................................................................8 การทํางานของ Yii Framework.......................................................................................................10 Model........................................................................................................................................11 Controller ..................................................................................................................................11 View..........................................................................................................................................11 Yii Framework MVC Step...........................................................................................................11 การทํางานพื้นฐาน.......................................................................................................................11 ขั้นตอนการร้องขอ.......................................................................................................................12 Bootstrap คืออะไร..........................................................................................................................14 การติดตั้ง WAMP Server..............................................................................................................16 ดาวโหลด WAMP Server.........................................................................................................16 การติดตั้ง WAMP Server........................................................................................................18 การใช้งาน MySQL Workbench เบื้องต้น......................................................................................24 ดาวโหลด MySQL Workbench................................................................................................24 ติดตั้ง MySQL Workbench.....................................................................................................25 การดาวโหลดและติดตั้ง Yii Framework........................................................................................27 การดาวโหลด Yii Framework..................................................................................................27 การติดตั้ง Yii Framework........................................................................................................28 การดาวโหลดและติดตั้ง Netbean IDE............................................................................................33
  • 4. www.programmerthailand.com 4 การดาวโหลด Netbean IDE......................................................................................................33 การติดตั้ง Netbean IDE...........................................................................................................33 ระบบการรับสมัครเรียนออนไลน์ (Admission System)........................................................................35 ออกแบบและวิเคราะห์ระบบ ............................................................................................................35 บุคคลทั่วไป................................................................................................................................35 ผู้ดูแลระบบ................................................................................................................................35 ออกแบบฐานข้อมูล...........................................................................................................................35 Entity Relationship .................................................................................................................35 Data dictionary........................................................................................................................36 สร้างฐานข้อมูลใน MySQL ด้วย phpMyAdmin........................................................................38 Forward Engineering..............................................................................................................40 เริ่มต้นเขียนโปรแกรม.......................................................................................................................45 การสร้าง Application Skeleton...............................................................................................45 การสร้าง Project ใน Netbean IDE.........................................................................................48 ติดตั้ง Yii-Booster Extension...................................................................................................51 ตั้งค่า protected/config/main.php............................................................................................52 ใช้ Gii Generator สร้าง Model กันครับ....................................................................................53 ใช้ Gii Generator สร้าง CRUD สําหรับ Bootstrap.................................................................55 ติดตั้ง exportablegridbehavior..................................................................................................56 การสร้าง User Authentication................................................................................................56 การสร้างหน้าแรกสําหรับสมัครเรียน..........................................................................................58 Admin ดูรายชื่อผู้สมัครและส่งรายชื่อผู้สมัครออกเป็น CSV......................................................64 สรุป Workshop ระบบการรับสมัครเรียนออนไลน์ ...........................................................................70 ระบบเว็บบล็อก (Weblog) .....................................................................................................................71 ออกแบบและวิเคราะห์ระบบ .............................................................................................................71 สมาชิก (User) ...........................................................................................................................71
  • 5. www.programmerthailand.com 5 ผู้ดูแลระบบ (Administration)....................................................................................................71 ความต้องการ .............................................................................................................................71 ออกแบบฐานข้อมูล...........................................................................................................................72 Entity Relationship .................................................................................................................72 Data dictionary........................................................................................................................72 สร้างฐานข้อมูลใน MySQL ด้วย phpMyAdmin........................................................................74 Forward Engineering..............................................................................................................74 เริ่มต้นเขียนโปรแกรม.......................................................................................................................80 ใช้ Gii Generator สร้าง blog module......................................................................................80 ตั้งค่า protected/config/main.php............................................................................................83 ใช้ Gii Generator สร้าง Model กันครับ....................................................................................83 ใช้ Gii Generator สร้าง CRUD สําหรับ Bootstrap.................................................................85 สร้างไฟล์การตั้งค่า Parameters................................................................................................87 เขียนโปรแกรมโพสบล็อก............................................................................................................88 เขียนโปรแกรมแสดงความคิดเห็น..............................................................................................104 ปรับปรุง Model Tag................................................................................................................110 ปรุบปรุง Model Lookup..........................................................................................................113 สรุป Workshop ระบบเว็บบล็อก (Weblog)...................................................................................114 ระบบเก็บข้อมูลรายรับรายจ่าย.............................................................................................................115 ออกแบบและวิเคราะห์ระบบ ...........................................................................................................115 สิทธิ์ของผู้ใช้งาน........................................................................................................................115 ออกแบบฐานข้อมูล..........................................................................................................................116 ER Diagram............................................................................................................................116 Data Dictionary......................................................................................................................118 การสร้างฐานข้อมูล...................................................................................................................119 การ Forward Engineering.....................................................................................................120
  • 6. www.programmerthailand.com 6 รู้จักกับ jQuery Mobile..................................................................................................................126 เริ่มต้นเขียนโปรแกรม......................................................................................................................127 การสร้าง Application Skeleton..............................................................................................127 การสร้าง Project ใน NetbeanIDE..........................................................................................128 สร้าง Theme ใหม่ใน Yii Framework......................................................................................130 ปรับแก้ไขไฟล์ Configuration....................................................................................................131 การใช้ Gii Generator สร้าง Model.........................................................................................132 การใช้ Gii Generator สร้าง CRUD.........................................................................................137 การเขียนโปรแกรมสมัครสมาชิก................................................................................................141 การปรับแก้การเข้าสู่ระบบ User Identity ................................................................................ 145 การเขียนโปรแกรมบันทึกรายรับ -รายจ่าย ................................................................................. 145 การเขียนโปรแกรมแสดงกราฟ...................................................................................................149 สรุป Workshop ระบบเก็บข้อมูลรายรับรายจ่าย........................................................................... 152 ระบบร้านค้าออนไลน์ (Online Shop).................................................................................................. 153 ออกแบบและวิเคราะห์ระบบ .......................................................................................................... 153 ลูกค้า....................................................................................................................................... 153 ผู้ดูแลระบบ.............................................................................................................................. 153 ออกแบบฐานข้อมูล......................................................................................................................... 153 ER Diagram........................................................................................................................... 154 Data Dictionary..................................................................................................................... 154 การ Forward Engineering.................................................................................................... 156 เริ่มต้นเขียนโปรแกรม......................................................................................................................161 การสร้าง Project Skeleton ....................................................................................................162 การสร้าง Project ใน NetbeanIDE..........................................................................................163 การติดตั้ง Yii Booster Extension..........................................................................................164 การดาวโหลด............................................................................................................................164
  • 7. www.programmerthailand.com 7 การติดตั้ง ................................................................................................................................ 165 การปรับแก้ไขไฟล์ Configuration............................................................................................. 166 การใช้ Gii Generator สร้าง Model.........................................................................................167 การใช้ Gii Generator สร้าง CRUD.........................................................................................170 การสร้างระบบ User Identity จากฐานข้อมูล...........................................................................172 การจัดการกับประเภทสินค้า......................................................................................................172 การจัดการกับสินค้า..................................................................................................................174 การนําสินค้ามาวางขายหน้าร้าน................................................................................................178 การสร้างระบบรถเข็น )CartController) ....................................................................................180 สรุป Workshop ระบบร้านค้าออนไลน์ (Online Shop)..................................................................188 คําขอบคุณ...........................................................................................................................................190 ดรรชนี (Index)....................................................................................................................................191
  • 8. www.programmerthailand.com 8 เตรียมความพร้อม Yii Framework คืออะไร Yii หรือ ยี่ ย่อมาจาก Yes It Is เป็นการออกแบบโดยใช้หลักการของ MVC หรือ Model View และ Controller ทําให้สามารถพัฒนาโปรแกรมออกจากส่วนของการ Design ได้ คุณสมบัติที่โดดเด่นของ Yii Framework มีดังนี้ • ออกแบบตามหลักการของ MVC • รองรับระบบ Theme • มี ORM (Object Relation Model) • สนับสนุน I18n และ l10n ในเรื่องของการแปลภาษา • มีระบบแคชช่วยให้ทํางานได้ไวยิ่งขึ้น • มีระบบตรวจสอบข้อผิดพลาดที่ละเอียด • มีระบบ Generator CRUD ที่รวดเร็วทันใจ เป็นภาษาไทยได้ทันที • มี widgets ที่สามารถเรียกใช้งานได้ทันที แทบไม่ต้องไปเขียน code ให้วุ่นวาย • มี extension ที่ผู้คนสร้างไว้ให้ใช้งาน สามารถเลือกใช้งานได้แบบฟรีๆ • และอื่นๆ อีกมากมาย นั่นก็หมายความว่าเราสามารถพัฒนา Application ของเราในรูปแบบที่เป็นมาตรฐานสากล และแน่ล่ะเป็น OOP 100% เอาล่ะครับสําหรับใครที่ต้องการอยากปรับเปลี่ยนการเขียนจากแบบ Structure มาเป็น OOP แล้วล่ะก็ ผมว่า Yii Framework นี้ละลงตัวที่สุดเลยครับ ก่อนหน้าผมเคยใช้ Framework ตัวอื่นแต่มันก็ยัง ไม่ตอบโจทย์เท่าไร เนื่องจากการเปลี่ยน version ที่บ่อยมากๆ รุ่นต่างๆ ของ Yii Framework เวอร์ ชั่น ปล่อย วันที่ออกข่าว ในตอนท้ายของการบํารุงรักษา ความต้องการ
  • 9. www.programmerthailand.com 9 1.0 1.0 3 ธันวาคม 2008 31 ธันวาคม 2010 PHP 5.1.0 หรือสูง กว่า 1.0.1 4 มกราคม 2009 1.0.2 1 กุมภาพันธ์ 2009 1.0.3 1 มีนาคม 2009 1.0.4 5 เมษายน 2009 1.0.5 10 พฤษภาคม 2009 1.0.6 7 มิถุนายน 2009 1.0.7 5 กรกฎาคม 2009 1.0.8 9 สิงหาคม 2009 1.0.9 6 กันยายน 2009 1.0.10 18 ตุลาคม 2009 1.0.11 13 ธันวาคม 2009 1.0.12 14 มีนาคม 2010 1.1 1.1.0 10 มกราคม 2010 31 ธันวาคม 2015 หรือหลังจาก นั้น PHP 5.1.0 หรือสูง กว่า 1.1.1 14 มีนาคม 2010 1.1.2 2 พฤษภาคม 2010
  • 10. www.programmerthailand.com 10 1.1.3 4 กรกฎาคม 2010 1.1.4 5 กันยายน 2010 1.1.5 พฤศจิกายน 14, 2010 1.1.6 16 มกราคม 2011 1.1.7 27 มีนาคม 2011 1.1.8 26 มิถุนายน 2011 1.1.9 1 มกราคม 2012 1.1.10 กุมภาพันธ์ 12, 2012 1.1.11 29 กรกฎาคม 2012 1.1.12 19 สิงหาคม 2012 1.1.13 30 ธันวาคม 2012 1.1.14 11 สิงหาคม 2013 2.0 TBD TBD TBD PHP 5.3.0 หรือสูง กว่า การทํางานของ Yii Framework สําหรับหลัการทํางานของ Yii Framework นั้นจะเป็นการทํางานคล้ายกันกับ PHP Framework ทั่วไป โดยจะมีส่วนของ Model, View และ Controller หรือที่เรียกกันว่า MVC นั่นเอง
  • 11. www.programmerthailand.com 11 Model ส่วนของ Model นั้นเป็นส่วนที่ทํางานกับตารางในฐานข้อมูล หรือเรียกได้ว่าเป็นส่วนของการเตรียม ข้อมูลนั่นเอง Controller ส่วนของ Controller นั้นเป็นส่วนที่รวบรวม Login ของโปรแกรม การคํานวณ การประมวลผล ข้อมูลและเป็นจุดเชื่อมระหว่าง Model และ View นั่นเอง View ส่วนของ View นั้นเป็นส่วนที่แสดงผลหรือหน้าตาของระบบนั่นเองครับ โดยมีการรับข้อมูลมาจาก Controller แล้วส่งมาแสดงผลที่ View และส่วน View ก็ยังเป็นส่วนส่งข้อมูลไปประมวลผลที่ Controller ด้วยเช่นกันครับ Yii Framework MVC Step ดูเพิ่มเติมได้ที่ http://www.yiiframework.com/doc/guide/1.1/en/basics.mvc การทํางานพื้นฐาน อย่างที่กล่าวไป Yii Framework ทํางานลักษณะรูปแบบของ MVC หรือ Model-View-Controller ซึ่งการทํางานจะแยกอิสระต่อกันในส่วนของ Business Login และส่วนของการแสดงผลโดยที่หากมีการ เปลี่ยนแปลงที่หนึ่งจะไม่กระทบต่ออีกที่หนึ่ง เช่นใน Controller มีการเขียนโปรแกรมที่ซับซ้อน หากเราเป็น โปรแกรมให้มีการเขียนที่สั้นๆ เข้าใจง่ายมากยิ่งขึ้นก็จะไม่มีผลกระทบต่อส่วนของ View หรือการแสดงผล เลย นั่นเอง ลักษณะของ MVC ใน Yii Framework นั้นส่วนที่อยู่หน้าสุดคือส่วนที่เรียกว่า Application โดยจะ เป็นส่วนหลักในการประมวลผลส่วนของการ Request ดังแสดงในรูปด้านล่าง
  • 12. www.programmerthailand.com 12 ขั้นตอนการร้องขอ ในขั้นตอนนี้เรามาดูกันว่าการร้องขอจาก Client ไปยัง Yii Framework จะมีขั้นตอนอย่างไรบ้าง 1. เมื่อ Client มีการร้องขอ URL Address เช่น http://www.programmerthailand.com/index.php?r=post/view&id=1 ในส่วนของ Web Server ก็จะทําการเรียกไฟล์ index.php 2. Index.php ก็จะสร้าง Application Instance และสั่งให้ทํางาน 3. ในส่วนของ Application ก็จะมีส่วนจัดการกับข้อมูลการร้องขอซึ่งเป็นส่วนหนึ่งของ Application Component ที่เรียกว่า request 4. ส่วน Application ก็จะจัดการกับการร้องขอ controller และ action ซึ่งเป็น Application Component ที่เรียกว่า urlManager จากตัวอย่างก็จะเรียก controller ชื่อว่า post ซึ่งก็คือ PostController และ action ที่เรียกว่า view ที่อยู่ใน PostController นั่นเอง 5. Application ก็จะสร้าง Instance ของ Controller ที่เรียก และเรียก action ที่ request มานั่นก็ คือ view โดยที่เรียก actionView ใน PostController ซึ่งในขณะเดียวกันก็จะมีส่วนของการ filter
  • 13. www.programmerthailand.com 13 ด้วย เช่นเรื่องสิทธิ์การเข้าถึง action (access control) เป็นต้น ซึ่งจะมีความเชื่อมโยงกับ action หากว่าสามารถเรียกใช้งาน action ได้ filter ก็จะยอมให้เรียกใช้ action ได้ 6. Action ก็จะไปอ่าน Post model โดยเรียก ID ของ Primary Key มีค่าเท่ากับ 1 7. Action view ก็จะทําการ render ไฟล์ view ที่มีชื่อว่า view พร้อมกับส่ง Post model เข้าไปที่ view ด้วย 8. ใน view ก็จะมีการประมวลผล widgets ต่างๆ (ถ้ามี) 9. หลังจากประมวลผลส่วนการแสดงผลแล้วก็จะประมวลผลส่วนของ Layout หรือส่วนโครงสร้าง เว็บไซต์ 10. Action view ก็จะทํางานเสร็จสมบูรณ์เรียบร้อยแล้ว พร้อมแสดงผลออกมาในฝั่ง Client ให้เราได้ เห็น และนี่คือขั้นตอนการทํางานของ Yii Framework นะครับ ถ้าเข้าใจขั้นตอนเหล่านี้ก็จะสามารถ พัฒนา Application ได้อย่างง่ายดายมากยิ่งขึ้นครับ โดยขั้นตอนเหล่านี้เป็นขั้นตอนพื้นฐานที่เราต้อง เรียนรู้และทําความเข้าใจครับ เอาล่ะครับถึงขั้นตอนนี้แล้วก็น่าจะพอรู้จักกับ Yii Framework มาบ้างแล้วล่ะครับ โดยขั้นต่อไป ไป เรียนรู้วิธีการพัฒนา Application ก็ได้เลยครับ โดยผมจะพาทําแบบ Step by Step ทีล่ะขั้นตอนซึ่ง หลังจากทําตามเสร็จแล้ว อาจจะสร้างเป็นแนวทางของตัวเองนอกเหนือจากที่ผมได้นําเสนอก็ได้นะครับ เนื่องจากว่าการเขียนโปรแกรมจะเป็นรูปแบบของแต่ละคนน่ะครับ อาจเขียนไม่เหมือนกัน บางคนเขียน คําสั่งยาว แต่บางคนก็อาจเขียนคําสั่งสั้นครับ ถ้างั้นไปลุยกันเลยนะครับ ^ ^
  • 14. www.programmerthailand.com 14 Bootstrap คืออะไร Bootstrap คือ CSS Framework หรือเข้าใจง่ายๆ ว่าหน้าจอ User Interface ที่เราสามารถเรียกใช้งาน ได้ทันที โดยที่เราไม่ต้องมานั่งเขียน CSS เองแบบว่าง่ายมากจริงๆ ครับ ตัวอย่างเช่น ถ้าต้องการสร้างปุ่มที่สวยงามก็เพียงแค่เรียกใช้งาน class ของปุ่มนั้นๆ ตามภาพด้านล่าง
  • 15. www.programmerthailand.com 15 ทีนี้อย่างที่กล่าวไปแล้วว่า Bootstrap ง่ายมากจริงๆ ในการทํา User Interface จากนั้นมีผู้พัฒนาได้นํามา ต่อยอดพัฒนาเป็นลักษณะของ ส่วนเสริม (Extension) ให้กับ Yii Framework แล้วตั้งชื่อใหม่ว่า Yii Booster โดยสามารถดาวโหลดได้ที่ http://yiibooster.clevertech.biz/ และใน Yii Booster ก็มีการเรียกใช้งานลักษณะที่เป็น ภาษา PHP โดยจะทําเป็น widget ให้เรียกใช้งาน แบบง่ายๆ ตัวอย่างเช่น จะเห็นว่าสามารถเรียกใช้งานได้ง่ายดายมากๆ ท่านผู้อ่านสามารถศึกษารายละเอียดเพิ่มเติมได้จากเว็บไซต์ http://twitter.github.io/bootstrap/ สําหรับ Bootstrap
  • 16. www.programmerthailand.com 16 http://yiibooster.clevertech.biz สําหรับ Yii Booster การติดตั้ง WAMP Server WAMP คือ การจําลองเครื่องเรา ไม่ว่าจะเป็น Notebook หรือ PC ให้กลายเป็นเครื่อง Web Server หรือจะติดตั้งที่เครื่อง Server โดยตรงก็ได้ เพื่อให้สามารถแปลคําสั่ง PHP ได้โดยทํางานบน ระบบปฏิบัติการ Windows ซื่งก็คือ W = Windows A = Apache M = MySQL P = PHP นอกจากนั้นเรายังสามารถใช้ระบบอื่นๆ ได้เช่น AppServ หรือ XAMPP ก็ได้ไม่ได้จํากัดนะครับ เพียงแต่เลือกใช้ตามความถนัดของแต่ละท่าน สรุปว่าให้สามารถเขียน PHP แล้วแปลคําสั่งได้ก็พอครับ ดาวโหลด WAMP Server การดาวโหลด WAMP ให้ไปที่เว็บไซต์ www.wampserver.com แล้วกดเปลี่ยนเป็นภาษาอังกฤษ จากนั้นกดปุ่ม Download
  • 17. www.programmerthailand.com 17 ซึ่งจะมี Scrolling ลงมาด้านล่าง แล้วเลือก Version ตามต้องการ โดยเลือกจากระบบปฏิบัติการว่าใช้กี่บิต
  • 18. www.programmerthailand.com 18 ตัวอย่างเช่นถ้าใช้ 64 bit ก็กดที่ 64 bit ก็จะปรากฏ Popup สําหรับเครื่อง 64 bit ให้ดาวโหลด โดยเรา จะดาวโหลด 2 อย่าง อย่างแรก คือ WAMP และ Microsoft Visual C++ 2010 SP1 ทําการดาวโหลดทั้ง 2 โปรแกรม การติดตั้ง WAMP Server การติดตั้ง Microsoft Visual C++ 2010 SP1 ให้ทําการติดตั้ง Microsoft Visual C++ 2010 ก่อน โดยเปิดไฟล์ vcredist_x64.exe
  • 19. www.programmerthailand.com 19 แล้วกดปุ่ม Next> จนกว่าจะติดตั้งสําเร็จ กดปุ่ม Finish ก็เป็นอันเสร็จเรียบร้อย
  • 20. www.programmerthailand.com 20 ติดตั้ง WAMP Server เปิดไฟล์ wampserver2.2e-php5.3.13-httpd2.2.22-mysql5.5.24-x64.exe ที่ได้ทําการดาวโหลดมา
  • 21. www.programmerthailand.com 21 กดปุ่ม Next > ไปที่หน้ายอมรับข้อตกลงการใช้งาน กดปุ่ม Next > เพื่อเลือกตําแหน่งของการติดตั้ง ในที่นี้คือ D:wamp
  • 22. www.programmerthailand.com 22 กดปุ่ม Next > เพื่อเลือกการสร้าง Shortcut กดปุ่ม Next > เพื่อเตรียมเข้าสู่การติดตั้ง
  • 23. www.programmerthailand.com 23 กดปุ่ม Install เพื่อเข้าสู่การติดตั้ง รอจนกว่าจะขึ้นให้กด Finish จะเห็นว่ามี Icon ปรากฏอยู่ที่มุมล่างขวาของหน้าจอเราแสดงว่าพร้อมทํางานแล้ว คลิ๊กที่ W สีเขียว แล้วเลือก localhost จะปรากฏหน้า localhost ดังนี้
  • 24. www.programmerthailand.com 24 แสดงว่าการติดตั้งเสร็จสมบูรณ์แล้ว การใช้งาน MySQL Workbench เบื้องต้น MySQL Workbench เป็นโปรแกรมในการจัดการ Entity หรือ ตารางใน Schema หรือ ฐานข้อมูล โดยสามารถลากเส้นเชื่อมโยงที่เรียกว่า Relation โดยมีการเชื่อมโยงหลายๆ แบบ เช่น หนึ่งต่อ หนึ่ง (1:1), หนึ่งต่อกลุ่ม (1:M) และ กลุ่มต่อกลุ่ม (M:N) ให้สามารถมองเป็นเป็นโครงสร้าง โดยเป็น โปรแกรมของ MySQL โดยตรงเราจึงควรเรียนรู้การใช้งานนะครับ เพราะมีประโยชน์มากครับ ดาวโหลด MySQL Workbench เข้าไปที่เว็บไซต์ http://www.mysql.com/products/workbench/ กดที่ Download Now >>
  • 25. www.programmerthailand.com 25 จะปรากฏหน้าสําหรับ Download โดยสามารถเลือกได้ 2 แบบ คือ แบบติดตั้ง และแบบ zip ทํางานโดย ไม่ต้องติดตั้ง ในที่นี้ผมเลือกแบบ zip กดที่ปุ่ม Download ได้เลยครับ จะปรากฏหน้าการเข้าสู่ระบบและสมัครสมาชิก หากไม่ต้องการเข้าสู่ระบบหรือสมัครสมาชิก ให้คลิ๊กที่ No thanks, just start my download. ติดตั้ง MySQL Workbench เมื่อดาวโหลดเรียบร้อยให้แตก zip ไฟล์ไปเก็บไว้ตามที่ต้องการในที่นี้คือ D:MySQL Workbench xxxx
  • 26. www.programmerthailand.com 26 ทําการส่ง Icon ไปแสดงที่หน้าจอ คลิ๊กขวาที่ MySQLWorkbench.exe เลือก Send to แล้วเลือก Desktop (create shortcut) ทดลองเปิดใช้งาน
  • 27. www.programmerthailand.com 27 การดาวโหลดและติดตั้ง Yii Framework ทีนี้มาถึงคิวของ Yii Framework พระเอกของเราแล้วล่ะครับ ซึ่งส่วนนี้จะกล่าวถึงเรื่องของการดาวโหลด และติดตั้ง Yii Framework ของเรานะครับ การดาวโหลด Yii Framework เข้าไปที่เว็บไซต์ http://www.yiiframework.com/ จากนั้นกดปุ่ม Download Yii
  • 29. www.programmerthailand.com 29 จากนั้นคลิ๊กขวา Computer เลือก Properties จะปรากฏหน้ารายละเอียดระบบ แล้วกดที่ Advanced system settings
  • 30. www.programmerthailand.com 30 ปรากฏส่วนของ System Properties แล้วกดปุ่ม Environment Variables…