บทที่1 เตรียมเครื่องมือสําหรับ y 2 · 2016....

1 [วนัที�]

บทที่1 เตรียมเคร่ืองมือสําหรับ YII2

บทนี้จะกล�าวถึงการเตรียมความพร�อมของเครื่องคอมพิวเตอร�และเครื่องมือท่ีใช�สําหรับเขียนโปรแกรม

Web Application ด�วย Yii Framework สิ่งท่ีต�องเตรียมดังนี้

1. เครื่องคอมพิวเตอร� PC , Notebook , Mac Book เปCนระบบปฏิบัติการ Window , Linux หรือ OS X ก็ได� แต�ต�องทราบว�าเปCนสถาปNตยกรรม 64 หรือ 32 บิต Ram อย�างน�อย 4 GB , HHD ไม�น�อยกว�า 50 GB

2. เว็บเบราว�เซอร� แนะนํา mozilla firefox หรือ google chrome

3. ติดต้ัง โปรแกรม Text Editors ตัวท่ีผู�ใช�ถนัด เช�น Edit plus , Notepad ++, Atom , Sublime text แนะนํา NetBeans สําหรับ Yii2

4. ติดต้ังโปรแกรม จําลอง Server ได�แก�


- AppServ ดาวน�โหลดได�ท่ี https://www.appservnetwork.com/th/ version ล�าสุดคือ AppServ 8.0.0 รองรับการเขียนเว็บ ด�วย Yii2

- Xampp ดาวน�โหลดได�ท่ี https://www.apachefriends.org/index.html รองรับ OS ท่ีเปCน Windows (32/64 Bits), Linux, OSx Version ล�าสุด 5.6.15

- Wamp ดาวน�โหลดได�ท่ี http://www.wampserver.com/en/ Version ล�าสุด Wampserver 2.5

ใช�ได�กับ Windows 32 /64 bits (แนะนํา)

5. ติดต้ัง NetBeans V8.0.2 ดูรายละเอียดได�ท่ี https://netbeans.org/downloads/8.0.2/

6. ติดต้ัง Composer สําหรับ Windows

7. สมัครใช�งาน GitHub


WAMP Server เปCน Web Server ท่ีสามารถจําลองเครื่องของเปCน Web Server สําหรับ Run Script

PHP และมีฐานข�อมูลMySQL ด�วยนอกจากนั้น Version ล�าสุดของ WAMP Server คือ 2.5 ซ่ึงมาพร�อมกับ Apache 2.4.9 PHP 5.5.12 และ MySQL 5.6.17 ซ่ึงเหมาะสําหรับการพัฒนา Web Application ด�วย Yii2 Download WampServer จากเว็บไซต� http://www.wampserver.com/ เลือกโหลด 64 บิต หรือ 32 บิต แล�วแต�เครื่องคอมพิวเตอร�จะรองรับ

คลิกดาวน�โหลด ตามท่ีเราต�องการ จากนั้นจะมีหน�า popup ข้ึนมา

ให�ดาวน�โหลด 2 ไฟล�

- ไฟล�ท่ี 1 Link download directly เปCนตัวโปรแกรม - ไฟล�ท่ี 2 VC 11 Link http://www.microsoft.com/en-us/download/details.aspx?id=30679

เปCนตัวติดต้ังเสริมสําหรับ WampServer

ติดตั้ง WAMP Server


หน�าดาวน�โหลด ให�เลือกภาษา English กดปุxม Download

เลือกไฟล�ให�ตรงกับความต�องการ คลิก Next >

1. ให�ทําการติดต้ัง Vcredist ก�อนโดยดับเบิลคลิกไฟล� vcredist_x64.exe


เลือก I agree กดปุxม Install

โปรแกรมกําลัง Initializing โปรดรอ...


เม่ือติดต้ังโปรแกรมเรียบร�อยแล�ว ให�ทําการ Restart เครื่อง 1 ครั้ง 2. ติดต้ัง WAMP Server โดยดับเบิลคลิกไฟล� wampserver2.5-Apache-2.4.9-Mysql-5.6.17-PHP-5.5.12-64b.exe

จากนั้นกดปุxม Next >


เลือก I accept ยอมรับเงือนไขการใช�งานแล�วกดปุxม Next >


สามารถเปลี่ยน Part ของโปรแกรมได� หรือท่ีเก็บ Project จาก C:\ เปCน D:\ หรือ Drive อ่ืน ๆ ตามต�องการแล�วกดปุxม Next >

เลือกท่ีจะสร�าง Short cut หรือไม�ถ�าเลือกก็คลิก Create a Desktop แล�วกดปุxม Next >

หน�า Ready to Install จากนั้นกดปุxม Install


ระบบจะติดต้ัง WAMP Server ตามข้ันตอน โปรดรอ...


ให�กดปุxม Browse เพ่ือเลือกโปรแกรม browser โดยใช�ไฟล� explorer.exe กดปุxม Open

โปรแกรมจะให�เลือกการต้ังค�า SMTP และ Email ในข้ันตอนนี้ให�กดปุxม Next >


ข้ันตอนสุดท�ายของการติดต้ัง ให�กดปุxม Finish เพ่ือ Run WAMP Server

ทดสอบการทํางานของ Web Server โดยพิมพ� http://localhost/ หรือ 127.0.0.1 ก็จะได�ดังภาพ แสดงว�าติดต้ัง WAMP Server เสร็จเรียบร�อยแล�ว

ทดสอบเข�าใช�งาน phpMyAdmin โปรแกรมสําหรับจัดการฐานข�อมูล MySQL ท่ีมาพร�อมกับ WAMP


รูปแบบโครงสร�างการจัดเก็บไฟล� ของ WAMP Server เราจะทําการจัดเก็บ โปรเจ็คไว�ใน C:\wamp\www หรือตําแหน�งอ่ืนๆ ท่ีระบุในข้ันตอนการติดต้ัง

เปด rewrite_module เพ่ือการทํา Pretty URL โดยให�กด W->Apache->Apache modules ทําเครื่องหมายถูกหน�า rewrite_module สําหรับ Yii2


Net Beans เปCน Tools IDE ท่ีได�รับความนิยมท่ีใช�ในการเขียนโปรแกรมภาษาต�าง ๆ Net Beans เปCน

Open Source ฟรี ท่ีสามารถทําการพัฒนา Plugin หรือ Add-on ไว�สําหรับการพัฒนาโปรแกรมภาษาอ่ืน ๆ ได�

เช�น HTML5, PHP, C/C++ และอ่ืน ๆ

ดาวน�โหลดท่ี NetBeans https://netbeans.org/

1. ติดต้ัง JDK 7 (Java Development Kit) ก�อนสําหรับเครื่องท่ีไม�เคยติดต้ัง เครื่องท่ีเคยติดต้ังแล�วข�ามข้ันตอนนี้

ได�เลย ดาวน�โหลดได�ท่ี http://www.oracle.com/technetwork/java/javase/downloads/jdk-7-netbeans-

download-432126.html

เลือก Product และ File ให�ตรงกับความต�องการ คลิกดาวน�โหลด

การติดตั้ง Net Beans


เม่ือดาวน�โหลดเสร็จแล�วก็เปดไฟล�ติดต้ังได�เลย โดยหน�าแรกให�กดปุxม Next >

จะมีรายชื่อโปรแกรมท่ีต�องติดต้ังแสดงข้ึนมา ไม�ต�องต้ังค�าอะไรเพ่ิมเติม ให�กดปุxม Next >


เม่ือติดต้ัง JDK เสร็จแล�ว โปรแกรมก็จะทําการติดต้ัง JRE ต�อ ให�กดปุxม Next > เพ่ือดําเนินการต�อได�เลย

เม่ือติดต้ังเสร็จแล�วก็ให�กดปุxม Close เพ่ือจบการติดต้ังได�เลย


2. ติดต้ัง NetBeans V 8.0.2 ดาวน�โหลดท่ี https://netbeans.org/downloads/8.0.2/ สําหรับการเขียน Web

Application Yii2 แนะนําให�เลือก Download Bundles HTML/PHP

หลังจากดาวน�โหลดเรียบร�อยแล�ว ให�ดับเบิลคลิกไฟล� ชื่อ netbeans-8.0.2-php-windows

แสดงหน�าติดต้ัง กดปุxม Next >


เลือก I accept คลิกปุxม Next >


กําหนด Part สําหรับติดต้ังโปรแกรม ให�ใช�ค�าเดิมดังรูป กดปุxม Next >

หน�าแสดง Summary ให�คลิก ไม�ต�อง Check Update กดปุxม Install

ดําเนินการติดต้ังโปรแกรม โปรดรอ...


หน�าแสดงการติดต้ังโปรแกรมเสร็จ กดปุxม Finish

เปดโปรแกรมหน�า Desktop ให�ทําการ Update Plugins ไปท่ี Tools > Plugins


หน�า Plugins แสดงรายการท่ีต�อง Update กดปุxม Update

แสดงรายละเอียดของ Plugin ท่ีทําการ Update กดปุxม Next >


เลือก I accept กดปุxม Update รอจนกว�าจะทําการ Update เสร็จ


ให� Restart IDE Now กดปุxม Finish

ติดต้ัง Plugins เพ่ิมเติมสําหรับ Yii Framework ในช�องค�นหา ให�พิมพ�คําว�า “yii” Enter ท่ีคีย�เบอร�ด ในช�อง

Install ให�คลิก เครื่องหมาย � จากนั้นกดปุxม Install

ให�ตรวจสอบ หลังการติดต้ังสําเร็จ ไปท่ี Tap Install จะต�องมี PHP Yii Framwork อยู�ในรายการติดต้ังของ

NetBeans ก็เปCนอันเสร็จสมบูรณ�สําหรับการติดต้ัง ต�อไปก็พร�อมใช�งาน


Composer คือ ตัวจัดการส�วนของ source code ภายนอก ท่ีไม�ได�เปCนส�วนหนึ่งของ source code ของ

โปรเจ็คของเรา แต�เราสามารถเรียกใช�งานส�วนนี้ได� โดยมีแหล�งรวม packages ต�างๆ อยู�ท่ี http://packagist.org

จะรวม repository ส�วนของ dependency library จากหลายๆ ท่ีไม�ว�าจะเปCน github bitbucket และ อ่ืนๆ

เข�าไปดาวน�โหลด ท่ี URL เว็บหลักของ Composer ได�ท่ี https://getcomposer.org/

กดปุxม Download ดังรูปด�านบน

ในหน�าเว็บไซต� ให�เราหาหัวข�อ Windows Installer ดังภาพ แล�วคลิก เลือก Composer-Setup.exe

การติดตั้ง Composer


ติดต้ัง Composer กดปุxม Next >

เลือก Do not install Shell Menus กดปุxม Next >


ระบุ Path ของไฟล� php.exe เปCนข้ันตอนสําคัญของการติดต้ัง Composer

แสดงข�อมูลการติดต้ัง กดปุxม Install และ ปุxม Next >


ติดต้ัง Composer บน Windows OS เปCนอันเสร็จ กดปุxม "Finish" ดังภาพ และ Restart เครื่องหลังจากติดต้ัง Cเพ่ือให� Windows ใส� Composer ไว�ท่ี %PATH% ซ่ึงเปCน System Variable ของ Windows เพ่ือไม�ให�เกิดปNญหาในการใช�งานต�อไป

ทดสอบการติดต้ัง Composer โดยใช�คําสั่ง Command Line ว�า composer หากสําเร็จจะแสดงผลดังภาพ การ Update Composer มีความจําเปCนหากมีการเตือนเกิดข้ึน หรือควรอับเดท ทุก 30 วัน สําหรับวิธี Update ใช�คําสั่ง ดังนี้ composer self-update จากนั้นกดปุxม Enter


Git เปCนเทคโนโลยีท่ีจะให�นักพัฒนาอย�างเราๆ สะดวกสบายในการพัฒนาอะไรสักอย�างหนึ่งข้ึนมา ซ่ึง git จะทําหน�าท่ีในการจัดการเก่ียวกับเวอร�ชันของซอร�สโค�ดของเรา ไม�ว�าจะเปCนเรื่องการตรวจสอบความแตกต�างระหว�างเวอร�ชัน (diff) การย�อนกลับมาเวอร�ชันก�อนหน�าเม่ือมีปNญหา (revert) หรือตรวจสอบเก่ียวกับรายละเอียดของแต�ละเวอร�ชัน (log) เข�าไปท่ี https://github.com/

ปอนรายละเอียดการสมัครท่ีหน�าแรกโดย ปอนรายละเอียดดังนี้ Username , Email (เปCนอีเมลท่ีมีอยู�จริงและใช�งาน), Password แล�วกดปุxม Sign up for Github

การสมัครใช8งาน GitHub


หลังจากสมัครสมาชิก ก็จะเข�าสู�การเลือก package สําหรับการใช�บริการ GitHub ถึงแม� GitHub จะ

อนุญาตให�เราสามารถสมัครสมาชิก และใช�บริการได�ฟรีก็ตาม แต�ก็มีข�อจํากัดสําหรับความฟรีนี้อยู� นั่นคือใน package ท่ีฟรีเอง จะไม�สามารถสร�าง repository ท่ีต�องการใช�ในลักษณะ private ได� นั่นคือสามารถสร�างได�เฉพาะ public repository นั่นเอง

ความแตกต�างระหว�าง private repository กับ public repository คือไม�ว�าใครก็ตามจะสามารถเข�าถึง public repository ได�ทุกคน แต�สําหรับ private repository จะสามารถกําหนดผู�เข�าถึงได� ทําให� private repository เหมาะกับการใช�งานท่ีต�องการความปลอดภัยมากกว�า

เม่ือเข�าสู�หน�าต�างการใช�งาน GitHub เราจะพบ notification เตือนเก่ียวกับการ verify account ผ�านอีเมลท่ีเราระบุไว�ในข้ันตอนแรก

ให�คลิกท่ี verifying บน notification ดังกล�าว แล�วตรวจสอบข�อความในอีเมลท่ีใช�ลงทะเบียน จะพบลิงค�ภายในข�อความนั้น เม่ือคลิกท่ีลิงค�ดังกล�าว จะกลับมาสู�หน�า verify อีกครั้ง ให�คนปุxม comfirm เพ่ือยืนยันอีเมลท่ีใช�ลงทะเบียน เปCนอันเสร็จสําหรับการสมัครใช�งาน GitHub


1. เข�าสู�ระบบด�วยการ กดปุxม Sing In แล�วระบุ Username เปCน email และ Password ท่ีได�สมัครไว�ก�อนหน�านี้

2. คลิกท่ีรูป Profile เลือก Settings หรือ คลิกท่ี Edit profile ดังรูป

3. เลือกท่ีเมนูข�างซ�าย Personal access tokens แล�วคลิกท่ี Generate new token

วิธีการนํา Token ใน Github มาใช�งาน


4. ต้ังชื่อ Token ในตัวอย�างต้ังว�า yii2-demo ให�เลือก Scopes ดังนี้ repo , gist , user , delete แล�วกด Generate Token ด�านล�าง

5. เอารหัสโค�ดท่ีได�จากการ Generate token ไปใส�ใน Command Prompt หรือ CMD Dos ท่ี Composer เรียกหา

6. ให�นําไปวาง แล�ว กดปุxม Enter ท่ีคีย�บอร�ด (รหัส Token ท่ีนํามาวางจะไม�เห็น เพราะมันถูกต้ังค�าเปCน hidden)

บทที่1 เตรียมเครื่องมือสําหรับ y 2 · 2016....

Documents