Yiithaimanual by นายบ้านนอก หัดคอม

คู่มือการใช้งาน Yii Framework Yii Framework เป็น Framework ที่จะช่วยให้นักพัฒนาโปรแกรม สามารถพัฒนาโปรแกรม ได้สะดวกและรวดเร็วขึ้น โดยคู่มือนี้ได้รวบรวมขั้นตอนและวิธีการต่า ง ๆ ในการพัฒนาระบบงาน ให้ผู้ที่สนใจได้ศึกษา โดยมีหัวข้อต่าง ๆ ดังนี้ 1. การดาวน์โหลดและติดตั้ง 2. การตั้งค่า Config 3. Code Generate 4. การสร้างหน้าสมัครสมาชิก 5. การทาระบบ Login โดยดึงข้อมูล User จากฐานข้อมูล 6. เกี่ยวกับ Session 7. การสร้างแบบฟอร์มสาหรับกรอกข้อมูล 7.1 การใช้งาน session 7.2 การกาหนดขนาด Textbox 7.3 การสร้าง Radio Button 7.4 การสร้าง Textarea 7.5 การสร้าง DropdownList แบบดึงข้อมูลจากฐานข้อมูล 7.6 การสร้าง DropdownList แบบสร้างตัวเลือกในแบบฟอร์ม 8. การ Join ตาราง 8.1 การแสดงผลแบบ CListView 8.2 การแสดงผลแบบ CGridView 9. การสร้างฟอร์มสาหรับอัพโหลดและการแสดงผลสาหรับดาวน์โหลด 10. การสร้างฟอร์มสาหรับอัพโหลดรูปและการแสดงผล 11. การใช้ DateTimePicker ด้วย Extension CJuiDateTimePicker 12. การใช้ extension jquery-gmap 13. การติดตั้ง extension Rights 14. การใช้ entension MbMenu เพื่อกาหนดรูปแบบการแสดงเมนูแบบ DropdownList 15. การกาหนดการมองเห็นเมนู

1. การดาวน์โหลดและติดตั้ง การดาวน์โหลดและติดตั้งมีวิธีการดังต่อไปนี้ 1. ดาวน์โหลด Yii Framework เวอร์ชั่ น 1.1.10 ได้ที่ http://www.yiiframework.com/ download/ ดังรูปที่ 1-1

รูปที่ 1-1 แสดงหน้าเว็บไซต์สาหรับดาวน์โหลด yii framework 2. Extract ไฟล์ที่ดาวน์โหลดมา ไว้ภายใต้ไดเรคทอรี่ C:/AppServ/www/ 3. เมื่ อ Extract ไฟล์ แ ล้ ว ให้ เ ข้ า ไปตรวจความต้ อ งการของระบบ โดยเข้ า ไปที่ http://localhost/yii/requirements ดังรูปที่ 1-2

รูปที่ 1-2 แสดงการตรวจสอบความต้องการของระบบ 4. หาก PDO MySQL extension แสดงเป็น Warning ให้ไปแก้ไขที่C:\window\php.ini 4.1 ทาการลบ comment (;) ที่บรรทัด extension=php_pdo.dll และ extension = php_pdo_mysql.dll หลังจากนั้นทาการ save และ restart เครื่องใหม่ 5. หลังจากนั้นให้ทาการสร้างโปรเจคงาน ที่มีชื่อว่า YiiTraining โดยมีวิธีการดังนี้ 5.1 เปิด cmd.exe แล้วไปที่ไดเรคทอรี่ AppServ/www/yii/framework ด้วยค าสั่ง cd C:/AppServ/www/yii/framework 5.2 ภายใต้ไดเรคทอรี C:/AppServ/www/yii/framework/ พิมพ์ php yiic webapp ../../ YiiTraining เพื่อสร้างโปรเจค ictExpert ดังรูปที่ 1-3

รูปที่ 1-3 แสดงการสร้างโปรเจค YiiTraining 6. เมื่อสร้างโปรเจค YiiTraining เป็นที่เรียบร้อยแล้ว สามารถเข้าไปดูหน้า เว็บแอพพลิเคชั่น ที่เราสร้างขึ้นได้ที่ http://localhost/YiiTraining/index.php ซึ่งมีหน้าแสดงผลดังรูปที่ 1-4

รูปที่ 1-4 แสดงหน้าหลักของเว็บแอพพลิเคชั่น

2. การตั้งค่า Config หลังจากที่ได้สร้างโปรเจค YiiTraining แล้ว ต้องทาการแก้ไขค่า Config เพื่อให้สามารถใช้ งานได้ ซึ่งมีวิธีการแก้ไขดังนี้ 1. ภายใต้ไดเรคทอรี่ www/YiiTraining/protected/config/main.php จะประกอบด้ว ยส่ว น ต่างๆ ดังนี้ 1.1 ส่วนของชื่อ เว็บแอพพลิเคชั่น สามารถแก้ไขได้ที่ 'name'=> YiiTraining ', ดัง รูปที่ 2-1

รูปที่ 2-1 แสดงส่วนแก้ไขหัวข้อเว็บแอพพลิเคชั่น 1.2 ส่ว นของ gii ส่ว นนี้เป็นเครื่องมือที่ใช้ในการ Generate โค้ด ต่า ง ๆ เพื่อใช้ใน การสร้างเว็บแอพพลิเคชั่น แก้ไขโดยการลบ comment ของ gii ออกและแก้ไข password ตามที่เราต้องการ ดังรูปที่ 2-2

รูปที่ 2-2 แสดงส่วนแก้ไข gii 1.3 ส่ว นของ Component ให้ลบ comment ของ urlManager ออก เพื่อเป็นการ format การเรียกใช้ url ใหม่ ดังรูปที่ 2-3

รูปที่ 2-3 แสดงส่วนแก้ไข urlManager

6 โดยเมื่อลบ comment ออก จะเกิดความแตกต่างดังนี้ - การเรียกใช้ gii จากเดิม การเรียกใช้จะมีลักษณะดังนี้ http://localhost/YiiTraining/index.php?r=gii - เมื่อมีการลบ comment ออก การเรียกใช้จะมีลักษณะดังนี้ http://localhost/YiiTraining/index.php/gii 1.4 ตั้งค่าการเชื่อมต่อกับฐานข้อมูลดังนี้ 1. ใส่ comment ในบรรทั ด ต่ อไปนี้ เพื่ อเป็ น การปิ ด การเชื่ อ มต่ อ กั บ ฐานข้อมูลเดิม ดังรูปที่ 2-4

รูปที่ 2-4 แสดงส่วนแก้ไขการเชื่อมต่อฐานข้อมูลที่ต้องใส่ comment 2. ลบ comment ในบรรทั ด ต่ อไปนี้ เพื่อ เป็ นการเปิ ด การเชื่ อมต่อ กั บ ฐานข้อมูลที่ต้องการ โดยเมื่อลบ comment ออก จะต้องแก้ไขข้อมูล ดังรูปที่ 2-5 2.1 แก้ไข host และชื่อฐานข้อมูลในบรรทัด connectionString 2.2 แก้ ไ ข username ที่ ใ ช้ เ ชื่ อ มต่ อ กั บ ฐานข้ อ มู ล ในบรรทั ด username โดย username ต้ อ งตรงกั บ username ที่ ใ ช้ ใ นการ login ฐานข้อมูล 2.3 แก้ ไ ข password ที่ ใ ช้ เ ชื่ อ มต่ อ กั บ ฐานข้ อ มู ล ในบรรทั ด password โดย password ต้ อ งตรงกั บ password ที่ ใ ช้ ใ นการ login ฐานข้อมูล

รูปที่ 2-5 แสดงส่วนแก้ไขการเชื่อมต่อฐานข้อมูล

7 2. หลั ง จากแก้ ไ ข Config เป็ น ที่ เ รี ย บร้ อ ยแล้ ว จะสามารถเข้ า ใช้ ง าน Gii ได้ ที่ http://localhost/YiiTraining/index.php/gii โดยหน้า Gii ใช้ในการ Generate โค้ด ที่ใช้ในการสร้า ง เว็บแอพพลิเคชั่นได้ โดยจะต้อง login ก่อนเพื่อเข้า ไปยังหน้า Code Generator ซึ่งหน้า login มีการ แสดงผล ดังรูปที่ 2-6

รูปที่ 2-6 แสดงหน้า login ของ Gii เมื่อ login เป็นที่ เรียบร้อยแล้ว จะเข้ า สู่ห น้า Code Generator ซึ่ง มีรูปแบบการแสดงผล ดังรูปที่ 2-7

รูปที่ 2-7 แสดงหน้า Code Generator

3. Code Generate ใน Code Generator ประกอบไปด้วย 5 ส่วนดังนี้ -

Controller Generator Crud Generator Form Generator Model Generator Module Generator

Controller Generator คือ ส่วนที่ใช้ในการ Generate Controller ตามรูปแบบ MVC (Model-View-Controller) ซึ่ง Controller Generator มีรูปแบบการแสดงผล ดังรูปที่ 3-1

รูปที่ 3-1 แสดงหน้า Controller Generator Crud Generator Crud ย่อมาจาก (Create – Read – Update – Delete) คือ ส่ว นที่ทาให้การ Generate โค้ด ให้ สามารถเพิ่ม ลบ แก้ไข ข้อมูลได้ โดยที่ไม่ต้องเขียนโค้ด เอง ซึ่งจะสามารถใช้ Crud Generator ได้ก็ ต่อเมื่อ มีการ Generate Model ที่ต้องการแล้วเท่า นั้น ซึ่ง Crud Generator มีรูปแบบการแสดงผล ดัง รูปที่ 3-2

รูปที่ 3-2 แสดงหน้า Crud Generator Form Generator คือ ส่ว นที่ท าการสร้ า งหน้ า แบบฟอร์ มที่ ใ ช้ ในการกรอกข้อ มู ล โดยจะถูก เรีย กใช้ โ ดย Controller รูปแบบฟอร์มที่ Generate ออกมานั้นจะมีรูปแบบมาจาก Model ที่ได้สร้า งไว้ ซึ่ง Form Generator มีรูปแบบการแสดงผล ดังรูปที่ 3-3

รูปที่ 3-3 แสดงหน้า Form Generator

10 Model Generator คือ ส่ว นที่เชื่อมต่อกับฐานข้อมูล โดยการสร้า ง Model นั้น จะมีการอ้า งถึงตารางที่อยู่ใน ฐานข้อมูลด้วย ซึ่ง Model Generator มีรูปแบบการแสดงผล ดังรูปที่ 3-4

รูปที่ 3-4 แสดงหน้า Model Generator Modules Generator คือหน่วยซอฟต์แวร์ในตัวเองที่ประกอบด้วย models, views, Controllers และส่ว นประกอบ ที่สนับสนุนอื่น ๆ ในหลาย ๆ ด้านโมดูลคล้ายกับโปรแกรม แต่มีค วามแตกต่า งที่สาคัญคือโมดูลจะ ไม่สามารถใช้งานได้ในตัว เดียวและมันจะต้องอยู่ภายในของแอพลิเคชัน ผู้ใช้สามารถเข้า ถึงการ ควบคุมในโมดูลเหมือนที่พวกเขาทากับตัวควบคุมในการใช้งานปกติ โมดูลจะมีประโยชน์ในสถานการณ์ต่างๆ สาหรับโปรแกรมขนาดใหญ่ โดยอาจแบ่งโมดูล ออกเป็นโมดูลต่าง ๆ แต่ละการพัฒนาและมีการเก็บรักษาไว้ต่า งหาก คุณ ลักษณะบางอย่า งที่ใช้กัน ทั่ว ไปเช่น การจัด การผู้ใช้ การจัด การความคิด เห็น อาจได้ รับการพั ฒนาในแง่ข องโมดูลเพื่อให้ สามารถนากลับมาได้อย่างง่ายดายในโครงการในอนาคต Model Generator มีรูปแบบการแสดงผล ดังรูปที่ 3-5

รูปที่ 3-5 แสดงหน้า Model Generator

4. การสร้างหน้าสมัครสมาชิก User Login เป็นตารางสาหรับเก็บข้อมูล user และ password สาหรับใช้ในการ Login โดย หน้าสมัครสมาชิกมีวิธีการทาดังต่อไปนี้ 1. Generate Model UserLogin เป็นการ Generate Model มาจากตาราง user_login เพื่อใช้ในการติด ต่อกับฐานข้อมูล โดย การ Generate Model UserLogin มีวิธีการดังรูปที่ 4-1 1. ที่ http://localhost/YiiTraining/index.php/gii เลื อ ก Model Generator ใส่ ชื่ อ ตารางที่ Table Name และตั้งชื่อ Model Class 2. คลิกที่ Preview หลังจากนั้นจะแสดง File ซึ่ งสามารถแสดงรู ปแบบ Source Code ได้ 3. คลิกที่ Generate เพื่อสร้าง File

รูปที่ 4-1 แสดงการ Generate Model UserLogin 4. เมื่อ Generate แล้ว สามารถดูโค้ด ได้ที่ไดเรคทอรี่ www/YiiTraining/protected/ models/UserLogin.php 2. Generate Crud UserLogin หลังจากที่ได้สร้า ง Model UserLogin เป็นที่เรียบร้อยแล้ว จะทาการสร้า ง Controller และ View โดยใช้ Crud Generator เพื่อสร้างรูปแบบการเพิ่ม ลบ แก้ไขข้อมูล โดยการ Generate มีวิธีการ ดังรูปที่ 4-2 1. ที่ http://localhost/YiiTraining/index.php/gii เลื อ ก Crud Generator ใส่ ชื่ อ Model และ Controller 2. คลิกที่ Preview หลังจากนั้นจะแสดง File ซึ่ งสามารถแสดงรู ปแบบ Source Code ได้ 3. คลิกที่ Generate เพื่อสร้าง File

รูปที่ 4-2 แสดงการ Generate Crud UserLogin 4. เมื่อ Generate แล้วจะมีโค้ดถูกสร้างขึ้นมา 2 ส่วน คือ Controller และ View โดย ไฟล์ ที่ เ ป็ น Controller สามา รถดู โ ค้ ด ได้ ที่ ไ ดเรคทอรี่ www/YiiTraining/protected/ controller/UserLoginController.php และไฟล์ที่เป็น View สามารถดูโค้ด ได้ที่ไดเรคทอรี่ www/YiiTraining/protected/views/userLogin/ 3. แก้ไข Controller เพื่อให้ผู้ใช้ทั่วไปสามารถกรอกข้อมูลได้ มีวิธีการดังนี้ 1. ที่ไดเรคทอรี่ www/YiiTraining/protected/controllers/UserLoginController.php ในฟังก์ชัน accessRules ส่วนนี้จะเป็นการกาหนดสิทธิของผู้ใช้งานในแต่ละระดับ ซึ่งได้แก่ - ส่วนของผู้ใช้ทั่วไป (users) สัญลักษณ์ที่ใช้ คือ * - ส่วนของสมาชิก (member) สัญลักษณ์ที่ใช้ คือ @ - ส่วนของผู้ดูแลระบบ (admin) สัญลักษณ์ที่ใช้ คือ admin ซึ่งการกาหนดสิทธิของผู้ใช้จะมีลักษณะดังรูปที่ 4-3

รูปที่ 4-3 แสดงรูปแบบการกาหนดสิทธิของผู้ใช้ 2. กาหนดสิทธิของผู้ใช้ทั่วไปให้สามารถใช้สิทธิในการ create ได้ จากเดิม สมาชิก เท่านั้นที่จะสามารถ create ได้ ซึ่งมีวิธีการดังนี้ 2.1 เพิ่ม 'create' ในส่วนของการกาหนดสิทธิให้กับผู้ใช้ทั่ว ไป และ ลบ 'create' ใน ส่วนของสมาชิก เพื่อป้องกันไม่ให้สมาชิกสามารถกรอกข้อมูลเพิ่มได้อีก โดยแก้ไข ดังรูป ที่ 4-4

รูปที่ 4-4 แสดงการกาหนดสิทธิ create ให้กับผู้ใช้ 3. ที่ ไ ดเรค ทอรี่ www/YiiTraining/protected/views/accountLogin/_form.php แก้ไขส่วนต่าง ๆ ดังนี้ 3.1 แก้ ไ ขรู ป แบบการกรอกข้ อ มู ล ข อง Password จา ก textField เป็ น passwordField เพื่อให้การกรอกรหัสผ่า นมีค วามปลอดภัยเพิ่มมากขึ้น โดยแก้ไขค าสั่ง ดัง รูปที่ 4-5

รูปที่ 4-5 แสดงการกาหนด passwordField 3.2 เมื่ อแก้ ไข เรี ยบ ร้ อ ย แล้ ว ผู้ ใ ช้ ทั่ ว ไป สา มา รถ สมั ค รส มา ชิ ก ได้ ที่ http://localhost/YiiTraining/index.php/userlogin/create ซึ่งมีรูปแบบการแสดงผล ดังรูปที่ 4-6

รูปที่ 4-6 แสดงแบบฟอร์มหน้า create ของ UserLogin

5. การทาระบบ Login โดยดึงข้อมูล User จากฐานข้อมูล 1. ที่ไดเรคทอรี่ www/YiiTraining/protected/components/UserIdentity.php ให้แก้ไข ดังนี้ 1. ประกาศตัวแปร private $id_user; ภายใต้ Class UserIndentity 2. แก้ไขฟังก์ชั่น authenticate ให้เป็นดังรูปที่ 5-1

รูปที่ 5-1 แสดงการแก้ไขฟังก์ชั่น authenticate 2. ที่ ไ ดเรค ทอรี่ www/YiiTraining/protected/models/UserLogin.php เพิ่ ม ฟั ง ก์ ชั่ น validatePassword ดังรูปที่ 5-2

รูปที่ 5-2 แสดงฟังก์ชั่น validatePassword 3. ทดลองระบบ Login โดยใช้ ชื่ อ user ที่ มี อ ยู่ ใ นฐานข้ อ มู ล ได้ ที่ http://localhost/ YiiTraining/index.php ดังรูปที่ 5-3

รูปที่ 5-3 แสดงการ Login โดย user 6. เกี่ยวกับ session การประกาศ session เพื่อเก็บ id_user ของผู้ใช้งาน โดยจะทาการ เก็บ id_user ของผู้ใช้ใน ขณะที่ผู้ใช้ทาการ Login ซึ่งมีวิธีการดังต่อไปนี้ 1. ที่ ไ ดเรคทอรี่ www/YiiTraining/protected/components/UserIdentity.php เพิ่ ม ค าสั่ ง Yii::app()-> session['user'] = $user-> id_user; เพื่อนาค่า id_user ไปเก็บไว้ใน อาร์เรย์ session ที่ชื่อ ว่า ID_User ดังรูปที่ 6-1

รูปที่ 6-1 แสดงการสร้าง session

18 2. การเรียกใช้งาน session ทาได้โดย ประกาศตัว แปร 1 ตัว เพื่อเก็บ session โดยใช้ค าสั่ง ดัง นี้ $ID_User = Yii::app()->session['ID_User']; เป็ นการเก็บ ค่า session['user'] ไว้ ใ นตั ว แปร $ID_User ดังรูปที่ 6-2

รูปที่ 6-2 แสดงการเรียกใช้ session

7. การสร้างแบบฟอร์มสาหรับกรอกข้อมูล การสร้า งแบบฟอร์มสาหรับกรอกข้อมูลนั้น ได้รวบรวมหัว ข้อเรื่องต่า ง ๆ เข้า ไว้ด้ว ยกัน โดยใช้การแบบฟอร์มของ User Detail ในการรวบรวมข้อมูล ซึ่งมีหัวข้อต่าง ๆ ดังนี้ การสร้างแบบฟอร์ม User Detail เพื่อใช้ในการแสดงผล และ เก็บข้อมูล 1. Generate Model UserDetail เป็นการ Generate Model มาจากตาราง user_detail เพื่อใช้ในการติด ต่อกับฐานข้อมูล โดย การ Generate Model UserDetail มีวิธีการ ดังรูปที่ 7-1 1. ที่ http://localhost/YiiTraining/index.php/gii เลื อ ก Model Generator ใส่ ชื่ อ ตารางที่ Table Name และตั้งชื่อ Model Class 2. คลิกที่ Preview หลังจากนั้นจะแสดง File ซึ่ง สามารถแสดงรูปแบบ Source Code ได้ 3. คลิกที่ Generate เพื่อสร้าง File

รูปที่ 7-1 แสดงการ Generate Model UserDetail 4. เมื่อ Generate แล้ว สามารถดูโค้ด ได้ที่ไดเรคทอรี่ www/YiiTraining/protected/ models/UserDetail.php 2. Generate Crud UserDetail หลังจากที่ได้สร้า ง Model UserDetail เป็นที่เรียบร้อยแล้ว จะทาการสร้า ง Controller และ View โดยใช้ Crud Generator เพื่อสร้างรูปแบบการเพิ่ม ลบ แก้ไขข้อมูล โดยการ Generate มีวิธีการ ดังรูปที่ 7-2 1. ที่ http://localhost/YiiTraining/index.php/gii เลื อ ก Crud Generator ใส่ ชื่ อ Model และ Controller 2. คลิกที่ Preview หลังจากนั้นจะแสดง File ซึ่ งสามารถแสดงรู ปแบบ Source Code ได้ 3. คลิกที่ Generate เพื่อสร้าง Code File

รูปที่ 7-2 แสดงการ Generate Crud userDetail 4. เมื่อ Generate แล้วจะมีโค้ดถูกสร้างขึ้นมา 2 ส่วน คือ Controller และ View โดย ไฟล์ ที่ เ ป็ น Controller สามา รถดู โ ค้ ด ได้ ที่ ไ ดเรคทอรี่ www/YiiTraining/protected/ controller/userDetailController.php และไฟล์ที่เป็น View สามารถดูโค้ด ได้ที่ไดเรคทอรี่ www/YiiTraining/protected/views/userDetail/ เมื่อได้ Generate เพื่อสร้า งแบบฟอร์ม User Detail เป็นที่เรียบร้อยแล้ว ต่อไปจะเป็นการ ยกตัวอย่างการจัดการกับแบบฟอร์มในรูปแบบต่าง ๆ ดังนี้ การใช้งาน Session การใช้ง าน Session เป็ น การสาธิ ต การน าSession เข้า มาใช้ง านหลั ง จากที่ ได้ มี การเก็ บ Session แล้วในหัวข้อเรื่อง เกี่ยวกับ Session โดยการนา Session มาใช้งานมีวิธีการดังต่อไปนี้ 1. ประกาศ ตัว แปร session ในบรรทัด แรกของไดเรคทอรี่ www/YiiTraining/protected/ views/userDetail/_form.php โดยใช้คาสั่ง ดังรูปที่ 7-3

รูปที่ 7-3 แสดงการประกาศตัวแปรเพื่อเรียกใช้ session

21 2. กาหนดค่าลงไปใน Text field ของ id_user โดยเพิ่มค าสั่ง array('value'=>$ID_User) ลง ไปในคาสั่ง textField ดังรูปที่ 7-4

รูปที่ 7-4 แสดงการกาหนดค่าใน textField id_user 3. เมื่ อ ค่ า ในTextbox เรี ย บร้ อ ยแล้ ว สามารถดู ก ารแสดงผลได้ ที่ http://localhost/ YiiTraining/index.php/userDetail/create/ ในการเข้า ถึงหน้า UserDetail นั้น ผู้ใช้ต้องทาการ Login เข้าสู่ระบบก่อนจึงจะสามารถดูรูปแบบการแสดงผลได้ โดยการแสดงผลการกาหนดค่า ใน Textbox โดยใช้ Session มีรูปแบบการแสดงผล ดังรูปที่ 7-5

รูปที่ 7-5 แสดงการกาหนดค่าใน textField

22 การกาหนดขนาด Textbox การกาหนดขนาด Textbox เป็นการกาหนดขนาดความกว้างของ Textbox และปริมาณของ ตัว อักษรที่ใส่ใน Textbox โดยการกาหนดขนาดนั้ นจะกาหนดความกว้า ง คือ size และจานวน ตัวอักษรที่รับคือ maxlength ซึ่งการกาหนดค่าได้แสดงดังรูปที่ 7-6

รูปที่ 7-6 การกาหนดขนาด Textbox การสร้าง Radio Button ที่ไดเรคทอรี่ www/YiiTraining/protected/views/userDetail/_form.php กาหนดรูปแบบการ แสดงผลของ gender จาก Textbox เป็น Radio Button ดังรูปที่ 7-7

รูปที่ 7-7 การกาหนด Radio Button เมื่อกาหนดรูปแบบการแสดงแบบฟอร์มเป็นที่เรียบร้อยแล้ว สามารถ ดูรูปแบบการแสดง ผลได้ที่ http://localhost/YiiTraining/index.php/userdetail/create ซึ่งมีรูปแบบการแสดงผล ดังรูปที่ 7-8

รูปที่ 7-8 การแสดงแบบฟอร์ม แบบ Radio Button การสร้าง Textarea ที่ไดเรคทอรี่ www/YiiTraining/protected/views/userDetail/_form.php กาหนดรูปแบบการ แสดงแบบฟอร์มของ address จาก Textbox เป็น TextArea ดังรูปที่ 7-9 โดยต้องกาหนด 2 ส่วนด้วยกันคือ - ส่วนที่ 1 การกาหนดแบบฟอร์มเป็น TextArea - ส่วนที่ 2 การกาหนดขนาดของ TextArea

รูปที่ 7-9 การกาหนดรูปแบบ TextArea

24 เมื่อกาหนดรูปแบบการแสดงแบบฟอร์มเป็นที่เรียบร้อยแล้ว สามารถ ดูรูปแบบการแสดง ผลได้ที่ http://localhost/YiiTraining/index.php/userdetail/create ซึ่งมีรูปแบบการแสดงผล ดังรูปที่ 7-10

รูปที่ 7-10 การแสดงแบบฟอร์ม แบบ TextArea การสร้าง DropdownList แบบดึงข้อมูลจากฐานข้อมูล การสร้าง DropdownList แบบดึงข้อมูลจากฐานข้อมูล มีวิธีการ ดังรูปที่ 7-11 1. Generate Model Provice 1. ที่ http://localhost/YiiTraining/index.php/gii เลื อ ก Model Generator ใส่ ชื่ อ ตารางที่ Table Name และตั้งชื่อ Model Class 2. คลิกที่ Preview หลังจากนั้นจะแสดง File ซึ่ง สามารถแสดงรูปแบบ Source Code ได้ 3. คลิกที่ Generate เพื่อสร้าง File

รูปที่ 7-11 แสดงการ Generate Model Province 2. ที่ไดเรคทอรี่ www/YiiTraining/protected/views/userDetail/_form.php กาหนดรูปแบบ การแสดงแบบฟอร์มของ Province ดังรูปที่ 7-12

รูปที่ 7-12 แสดงการกาหนดรูปแบบ DropdownList แบบดึงข้อมูลจากฐานข้อมูล 3. เมื่อกาหนดรูปแบบ DropdownList แบบดึงข้อมูลจากฐานข้อมูล แล้ว สามารถดูรูปแบบ การแสดงผลได้ ที่ http://localhost/YiiTraining/index.php/userdetail/create ซึ่ ง มี รู ป แบบการ แสดงผล ดังรูปที่ 7-13

รูปที่ 7-13 การแสดงแบบฟอร์ม แบบ DropdownList แบบดึงข้อมูลจากฐานข้อมูล การสร้าง DropdownList แบบสร้างตัวเลือกในแบบฟอร์ม ที่ไดเรคทอรี่ www/YiiTraining/protected/views/userDetail/_form.php กาหนดรูปแบบการ แสดงแบบฟอร์มของ Type_user ดังรูปที่ 7-14

รูปที่ 7-14 แสดงการกาหนดรูปแบบ DropdownList แบบสร้างตัวเลือกในแบบฟอร์ม

27 เมื่อกาหนดรูปแบบ DropdownList แบบสร้างตัวเลือกในแบบฟอร์มแล้ว สามารถดูรูปแบบ การแสดงผลได้ ที่ http://localhost/YiiTraining/index.php/userdetail/create ซึ่ ง มี รู ป แบบการ แสดงผล ดังรูปที่ 7-15

รูปที่ 7-15 การแสดงแบบฟอร์ม แบบ DropdownList แบบสร้างตัวเลือกในแบบฟอร์ม

8. การ Join ตาราง และการแสดงผล ในการ join ตารางนี้จะทาการ join ระหว่า งตาราง user_login และ ตาราง user_detail เพื่อ สร้างหน้า Profile ของสมาชิก โดยจะสาธิตรูปแบบการแสดงผล 2 แบบด้วยกัน ซึ่งมีวิธีการดังนี้ สร้าง Controller Member การสร้าง Controller Member มีวิธีการดังรูปที่ 8-1 1. ที่ http://localhost/YiiTraining/index.php/gii เลือก Controller Generator ใส่ชื่อตารางที่ Controller และ View 2. คลิกที่ Preview หลังจากนั้นจะแสดง File ซึ่งสามารถแสดงรูปแบบ Source Code ได้

28 3. คลิกที่ Generate เพื่อสร้าง File

รูปที่ 8-1 แสดงการ Generate Controller Member 4. เมื่อ Generate แล้ว จะมีโค้ด ถูกสร้า งขึ้นมา 2 ส่ว น คือ Controller และ View โดยไฟล์ที่ เป็ น Controller สา มา ร ถดู โ ค้ ด ไ ด้ ที่ ได เ รค ท อรี่ www/YiiTraining/protected/controllers/ MemberController.php และไฟล์ที่ เป็น View สามารถดูโค้ ด ได้ ที่ไดเรคทอรี่ www/YiiTraining/ protected/views/member/index.php การเขียนฟังก์ชั่นในการ join ตาราง เมื่อทาการ Generate Controller Member เป็นที่เรียบร้อยแล้ว สามารถ แก้ไข Controller Member ได้ ที่ ไ ดเรคทอรี่ www/YiiTraining/protected/controllers/MemberController.php โดย แก้ไขฟังก์ชั่น actionIndex () เพื่อให้แ สดงผลในหน้า index ซึ่งการแก้ไข ฟังก์ชั่น actionIndex () มี วิธีการดังรูปที่ 4-1

รูปที่ 8-2 แสดงการแก้ไขฟังก์ชั่น actionIndex() การแสดงผลแบบ CListView หลังจากที่ได้แก้ไขฟังก์ชั่น actionIndex() เป็นที่เรียบร้อยแล้ว การแสดงผลในรูปแบบของ CListView มีวิธีการดังนี้ 1. เรียกใช้ widget CListView โดยการใช้คาสั่งดังรูปที่ รูปที่ 8-3

รูปที่ 8-3 แสดงการเรียกใช้ widget CListView 2. ภายใต้ไ ดเรคทอรี่ www/YiiTraining/protected/views/member สร้า งไฟล์ _view.php เพื่อใช้ในการแสดงผล โดยในไฟล์ _view.php ใช้คาสั่ง ดังรูปที่ 8-4

รูปที่ 8-4 แสดงการเรียกใช้ widget CListView เมื่อใช้ค าสั่ง widget CListView และสร้า งไฟล์ _view.php เป็นที่เรียบร้อยแล้ว สามารถดู รูปแบบการแสดงผลแบบ CListView ได้ที่ http://localhost/YiiTraining/index.php/member/index ซึ่งมีรูปแบบการแสดงผล ดังรูปที่ 8-5

รูปที่ 8-5 แสดงรูปแบบการแสดงผลแบบ CListView การแสดงผลแบบ CGridView หลังจากที่ได้แก้ไขฟังก์ชั่น actionIndex() เป็นที่เรียบร้อยแล้ว การแสดงผลในรูปแบบของ CGridView มีวิธีการดังนี้ ที่ ไ ดเรค ทอรี่ www/YiiTraining/protected/views/member/index.php เรี ย กใช้ widget CGridView โดยใช้คาสั่งดังรูปที่ 8-6

รูปที่ 8-6 แสดงการเรียกใช้ widget CGridView เมื่ อ ท าการเรี ย กใช้ widget CGridView แล้ ว สามารถดู รู ป แบบการแสดงผลแบบ CGridView ได้ที่ http://localhost/YiiTraining/index.php/member/index ซึ่งมีรูปแบบการแสดงผล ดังรูปที่ 8-7

รูปที่ 8-7 แสดงรูปแบบการแสดงผลแบบ CGridView

9. การสร้างฟอร์มสาหรับอัพโหลดและการแสดงผลสาหรับดาวน์โหลด การสร้างฟอร์มสาหรับอัพโหลดและการแสดงผลสาหรับดาวน์โหลดมีวิธีการดังต่อไปนี้ การสร้างฟอร์มสาหรับอัพโหลด 1.Generate Model Document เป็นการ Generate Model มาจากตาราง Document เพื่อใช้ในการติด ต่อกับฐานข้อมูล โดย การ Generate Model Document มีวิธีการดังรูปที่ 9-1 1. ที่ http://localhost/YiiTraining/index.php/gii เลื อ ก Model Generator ใส่ ชื่ อ ตารางที่ Table Name และตั้งชื่อ Model Class 2. คลิกที่ Preview หลังจากนั้นจะแสดง File ซึ่ งสามารถแสดงรู ปแบบ Source Code ได้ 3. คลิกที่ Generate เพื่อสร้าง File

รูปที่ 9-1 แสดงการ Generate Model Document 4. เมื่อ Generate แล้ว สามารถดูโค้ด ได้ที่ไดเรคทอรี่ www/YiiTraining/protected/ models/Document.php 2. Generate Crud Document หลังจากที่ได้สร้า ง Model Document แล้ว จะทาการสร้า ง Controller และ View โดยใช้ Crud Generator เพื่อสร้างรูปแบบการเพิ่ม ลบ แก้ไขข้อมูล โดยการ Generate มีวิธีการ ดังรูปที่ 9-2 1. ที่ http://localhost/YiiTraining/index.php/gii เลื อ ก Crud Generator ใส่ ชื่ อ Model และ Controller 2. คลิกที่ Preview หลังจากนั้นจะแสดง File ซึ่ งสามารถแสดงรู ปแบบ Source Code ได้ 3. คลิกที่ Generate เพื่อสร้าง Code File

รูปที่ 9-2 แสดงการ Generate Crud Document 4. เมื่อ Generate แล้วจะมีโค้ดถูกสร้างขึ้นมา 2 ส่วน คือ Controller และ View โดย ไฟล์ ที่ เ ป็ น Controller สามา รถดู โ ค้ ด ได้ ที่ ไ ดเรคทอรี่ www/YiiTraining/protected/ controllers/DocumentController.php และไฟล์ที่เป็น View สามารถดูโค้ด ได้ที่ไดเรคทอรี่ www/YiiTraining/protected/views/Document/ การแก้ไขแบบฟอร์มสาหรับอัพโหลดไฟล์ การแก้ไข Controller Document เพื่ออัพโหลดไฟล์ มีวิธีการดังนี้ 1. สร้างไดเรคทอรี่ภายใต้ www/YiiTraining ชื่อ Document เพื่อใช้สาหรับเก็บไฟล์เอกสาร ดัง รูปที่ 9-3

รูปที่ 9-3 แสดงการสร้างไดเรคทอรี่ Document 2. ที่ www/YiiTraining/protected/controllers/DocumentController.php แก้ ไ ขฟั ง ก์ ชั่ น actionCreate( ) ดังนี้ 1. ใช้ฟังก์ชั่น getInstance ของ คลาส CUploadFile ในการอัพโหลดไฟล์ ภายใต้ คาสั่ง if(isset($_POST['Document'])) ดังรูปที่ 9-4

รูปที่ 9-4 แสดงการใช้ฟังก์ชั่น getInstance 2. เรียกใช้ฟังก์ชั่น saveAs() เพื่อบันทึกเอกสารในไดเรคทอรี่ Document ภายใต้ คาสั่ง if($model->save()) ดังรูปที่ 9-5

รูปที่ 9-5 แสดงการเรียกใช้ฟังก์ชั่น saveAs()

37 การสร้างหน้าแสดงผลสาหรับดาวน์โหลดเอกสาร ในการสร้างหน้าแสดงผลนั้น จะทาการแก้ไขรูปแบบการแสดงผลของ _view.php ซึ่งเป็น ส่วนที่แสดงรายละเอียดของหน้า index.php ให้มี Link ที่สามารถแสดงเอกสารได้ โดยมีวิธีการดังนี้ ที่ ไ ดเรคทอรี่ www/YiiTraining/protected/views/document/_view.php แก้ ไ ขส่ ว นของ Attribute ที่ชื่อ document_file เพื่อสร้าง Link แสดงเอกสาร ซึ่งมีการแก้ไขคาสั่ง ดังรูปที่ 9-6

รูปที่ 9-6 แสดงการทา Link แสดงเอกสาร เมื่อ สร้ า ง Link แสดงเอกสารเป็ นที่ เรี ยบร้อ ยแล้ว สามารถดูรู ปแบบการแสดงผลได้ ที่ http://localhost/YiiTraining/index.php/Document/index โดยมีรูปแบบการแสดงผล ดังรูปที่ 9-7

รูปที่ 9-7 แสดงผล Link แสดงเอกสาร

38 เมื่อคลิกที่ Link เอกสาร จะแสดงผล ดังรูปที่ 9-8

รูปที่ 9-8 แสดงผลเอกสาร

10. การสร้างฟอร์มสาหรับอัพโหลดรูปและการแสดงผล การสร้างฟอร์มสาหรับอัพโหลดรูปและการแสดงผลวิธีการดังต่อไปนี้ การสร้างฟอร์มสาหรับอัพโหลด 1.Generate Model Image เป็นการ Generate Model มาจากตาราง image เพื่อใช้ในการติด ต่อกับฐานข้อมูล โดยการ Generate Model Image มีวิธีการดังรูปที่ 10-1

39 1. ที่ http://localhost/YiiTraining/index.php/gii เลื อ ก Model Generator ใส่ ชื่ อ ตารางที่ Table Name และตั้งชื่อ Model Class 2. คลิกที่ Preview หลังจากนั้นจะแสดง File ซึ่ งสามารถแสดงรู ปแบบ Source Code ได้ 3. คลิกที่ Generate เพื่อสร้าง File

รูปที่ 10-1 แสดงการ Generate Model Image 4. เมื่อ Generate แล้ว สามารถดูโค้ด ได้ที่ไดเรคทอรี่ www/YiiTraining/protected/ models/Image.php 2. Generate Crud Document หลังจากที่ได้สร้า ง Model Image แล้ว จะทาการสร้า ง Controller และ View โดยใช้ Crud Generator เพื่อสร้างรูปแบบการเพิ่ม ลบ แก้ไขข้อมูล โดยการ Generate มีวิธีการ ดังรูปที่ 10-2 1. ที่ http://localhost/YiiTraining/index.php/gii เลื อ ก Crud Generator ใส่ ชื่ อ Model และ Controller 2. คลิกที่ Preview หลังจากนั้นจะแสดง File ซึ่ งสามารถแสดงรู ปแบบ Source Code ได้

40 3. คลิกที่ Generate เพื่อสร้าง Code File

รูปที่ 10-2 แสดงการ Generate Crud Image 4. เมื่อ Generate แล้วจะมีโค้ดถูกสร้างขึ้นมา 2 ส่วน คือ Controller และ View โดย ไฟล์ ที่ เ ป็ น Controller สามา รถดู โ ค้ ด ได้ ที่ ไ ดเรคทอรี่ www/YiiTraining/protected/ controllers/ImageController.php และไฟล์ ที่ เ ป็น View สามารถดู โ ค้ด ได้ ที่ไ ดเรคทอรี่ www/YiiTraining/protected/views/image/ การแก้ไขแบบฟอร์มสาหรับอัพโหลดไฟล์รูปภาพ การแก้ไข Controller Image เพื่ออัพโหลดไฟล์รูปภาพ 1. สร้างไดเรคทอรี่ภายใต้ www/YiiTraining ชื่อ images เพื่อใช้สาหรับเก็บไฟล์รูปภาพ ดัง รูปที่ 10-3

รูปที่ 10-3 แสดงการสร้างไดเรคทอรี่ Document 2. ที่ www/YiiTraining/protected/controllers/ImageController.php แก้ไขฟังก์ชั่น actionCreate() ดังนี้ 1. ใช้ ฟังก์ ชั่น getInstance ของ คลาส CUploadFile ในการอัพ โหลดไฟล์ ภายใต้ค าสั่ ง if(isset($_POST['Document'])) ดังรูปที่ 10-4

รูปที่ 10-4 แสดงการใช้ฟังก์ชั่น getInstance เรี ย กใช้ ฟั ง ก์ ชั่ น saveAs() เพื่ อ บั น ทึ ก เอกสารในไดเรคทอรี่ Document ภายใต้ ค าสั่ ง if($model->save()) ดังรูปที่ 10-5

รูปที่ 10-5 แสดงการเรียกใช้ฟังก์ชั่น saveAs() ปัญหาที่พบ : ในฟังก์ชั่น actionCreate() มีปัญหาในส่ว นที่เป็นค าสั่ง $this-> redirect (array( 'view', 'id'=>$model->image_id )); ซึ่งปัญหาที่เกิดขึ้นจะทาการชี้แจงใน ภาคผนวก ก. การแสดงผลรูปภาพ ที่ ไ ดเรค ท อรี่ www/YiiTraining/protected/views/image/_view.php แก้ ไ ข ส่ ว นข อ ง Attribute ที่ชื่อ picture เพื่อให้สามารถแสดงผลรูปภาพได้ ซึ่งมีการแก้ไขคาสั่ง ดังรูปที่ 10-6

รูปที่ 10-6 แสดงการใช้คาสั่ง แสดงผลรูปภาพ เมื่ อ แก้ ไ ขค าสั่ ง เรี ย บร้ อ ยแล้ ว สามารถดู รู ป แบบการแสดงผลได้ ที่ http://localhost/ YiiTraining/index.php/image/index ซึ่งมีรูปแบบการแสดงผล ดังรูปที่ 10-11

รูปที่ 10-11 แสดงรูปภาพที่อัพโหลด

11. การใช้งาน DateTimePicker ด้วย Extension CJuiDateTimePicker CJuiDateTimePicker เป็น Extension เสริมสาหรับ Field ที่ต้องใส่ข้อมูลวันที่ และ เวลา เพื่อให้มีความสะดวกต่อผู้ใช้ โดยการนา Extension CJuiDateTimePicker มาใช้งานมีวิธีการดังนี้ 1. Generate Model Datetime เป็นการ Generate Model มาจากตาราง datetime เพื่อใช้ในการติดต่อกับฐานข้อมูล โดยการ Generate Model Datetime มีวิธีการ ดังรูปที่ 4-29 1. ที่ http://localhost/YiiTraining/index.php/gii เลื อ ก Model Generator ใส่ ชื่ อ ตารางที่ Table Name และตั้งชื่อ Model Class 2. คลิกที่ Preview หลังจากนั้นจะแสดง File ซึ่ง สามารถแสดงรูปแบบ Source Code ได้ 3. คลิกที่ Generate เพื่อสร้าง File

รูปที่ 11-1 แสดงการ Generate Model Datetime 4. เมื่อ Generate แล้ว สามารถดูโค้ด ได้ที่ไดเรคทอรี่ www/YiiTraining/protected/ models/Datetime.php 2. Generate Crud Datetimes หลังจากที่ได้สร้า ง Model UserDetail เป็นที่เรียบร้อยแล้ว จะทาการสร้า ง Controller และ View โดยใช้ Crud Generator เพื่อสร้างรูปแบบการเพิ่ม ลบ แก้ไขข้อมูล โดยการ Generate มีวิธีการ ดังรูปที่ 11-2 1. ที่ http://localhost/YiiTraining/index.php/gii เลื อ ก Crud Generator ใส่ ชื่ อ Model และ Controller 2. คลิกที่ Preview หลังจากนั้นจะแสดง File ซึ่ งสามารถแสดงรู ปแบบ Source Code ได้ 3. คลิกที่ Generate เพื่อสร้าง Code File

รูปที่ 11-2 แสดงการ Generate Crud Datetimes 4. เมื่อ Generate แล้วจะมีโค้ดถูกสร้างขึ้นมา 2 ส่วน คือ Controller และ View โดย ไฟล์ ที่ เ ป็ น Controller สามา รถดู โ ค้ ด ได้ ที่ ไ ดเรคทอรี่ www/YiiTraining/protected/ controller/DatetimesController.php และไฟล์ที่เป็น View สามารถดูโค้ด ได้ที่ไดเรคทอรี่ www/YiiTraining/protected/views/datetimes/ 3. เ มื่ อ ท า ก า ร Generate เ รี ย บ ร้ อ ย แ ล้ ว ใ ห้ ท า ก า ร ด า ว น์ โ ห ล ด extension CJuiDateTimePicker ที่ http://www.yiiframework.com/extension/datetimepicker/ ดังรูปที่ 11-3

รูปที่ 11-3 แสดงหน้าดาวน์โหลด extension CJuiDateTimePicker

46 4. ท าการแตกไฟล์ ที่ ด าวน์ โ หลดเก็ บ ไว้ ที่ ไ ดเรคทอรี่ www/YiiTraining/protected/ extensions 5. เรียกใช้ extension CJuiDateTimePicker ซึ่งมีวิธีการดังนี้ 1. ที่ ไ ดเรคทอรี่ www/YiiTraining/protected/views/datetimes/_form.php แก้ ไ ข ดังนี้ 1.1 แก้ไข Text field ของ datetime1 ให้แสดงรูปแบบสาหรับป้อนค าสั่งแบบวันที่ และเวลา โดยใช้คาสั่ง ดังรูปที่ 11-4

รูปที่ 11-4 แสดงการแก้ไข textField datetime1 การแก้ไข Text field ของ datetime1 ให้แสดงรูปแบบสาหรับป้อนคาสั่งแบบวันที่แ ละเวลา มีรูปแบบการแสดงผลดังรูปที่ 11-5

รูปที่ 11-5 แสดงรูปแบบการแสดงผลแบบวันที่และเวลา

47 1.2 แก้ไข Text field ของ datetime2 ให้แสดงรูปแบบสาหรับป้อนค าสั่งแบบวันที่ โดยใช้คาสั่ง ดังรูปที่ 11-6

รูปที่ 11-6 แสดงการแก้ไข textField datetime2 การแก้ ไข Text field ของ datetime2 ให้แ สดงรู ปแบบส าหรับ ป้อ นค าสั่ งแบบวัน ที่ มี รูปแบบการแสดงผลดังรูปที่ 11-7

รูปที่ 11-7 แสดงรูปแบบการแสดงผลแบบวันที่ 1.3 แก้ไข Text field ของ datetime3 ให้แสดงรูปแบบสาหรับป้อนค าสั่งแบบเวลา โดยใช้คาสั่ง ดังรูปที่ 11-8

รูปที่ 11-8 แสดงการแก้ไข textField datetime3 การแก้ไ ข Text field ของ datetime3 ให้แ สดงรู ปแบบสาหรั บป้ อนค าสั่ง แบบเวลา มี รูปแบบการแสดงผลดังรูปที่ 11-9

รูปที่ 11-9 แสดงรูปแบบการแสดงผลแบบเวลา 6. เ มื่ อ แ ก้ ไ ข เ ป็ น ที่ เ รี ย บ ร้ อ ย แ ล้ ว ส า ม า ร ถ ดู รู ป แ บ บ ก า ร แ ส ด ง ผ ล ไ ด้ ที่ http://localhost/YiiTraining/index.php/datetimes/create โดยผู้ ใช้จะต้ องทาการ Login ก่ อนจึงจะ สามารถเข้าถึงการใช้งานได้

12. การใช้ extension jquery-gmap เพื่อแสดงแผนที่ extension jquery-gmap เป็น extension เสริมเพื่อนาแผนที่มาประยุกต์ใ ช้งาน ซึ่งการน า extension jquery-gmap มาใช้งานมีวิธีการดังต่อไปนี้ 1. สร้าง Controller jquery_gmap การสร้าง Controller Jquery_gmap มีวิธีการดังรูปที่ 12-1 1. ที่ http://localhost/YiiTraining/index.php/gii เลือก Controller Generator ใส่ชื่อ ตารางที่ Controller และ View 2. คลิกที่ Preview หลังจากนั้นจะแสดง File ซึ่ง สามารถแสดงรูปแบบ Source Code ได้ 3. คลิกที่ Generate เพื่อสร้าง File

รูปที่ 12-1 แสดงการ Generate Controller Jquery_gamp 4. เมื่อ Generate แล้วจะมีโค้ดถูกสร้างขึ้นมา 2 ส่ว น คือ Controller และ View โดย ไฟล์ ที่ เ ป็ น Controller สามา รถดู โ ค้ ด ได้ ที่ ไ ดเรคทอรี่ www/YiiTraining/protected/ controllers/Jquery_gampController.php และไฟล์ ที่ เ ป็ น View สามารถดู โ ค้ ด ได้ ที่ ไดเรคทอรี่ www/YiiTraining/protected/views/jquery_gmap/index.php

50 2. ดาวน์โ หลด extension jquery-gmap ได้ที่ http://www.yiiframework.com/extension/ jquery-gmap/ ดังรูปที่ 12-2

รูปที่ 12-2 แสดงหน้าเว็บไซต์สาหรับดาวน์โหลด extension jqurey-gamp 3. ทาการ Extract ไฟล์ ที่ ด าวน์ โหลดมา แล้ ว น าไดเรคทอรี่ jquery-gampที่อ ยู่ ภ ายใน ไดเรคทอรี่ jqurey-gmap_2.1 ซึ่ ง เป็ น ไดเรคทอรี่ ที่ Extract มา น าไปไว้ ใ นไดเรคทอรี่ www/YiiTraining/protected/extensions 4. ที่ www/YiiTraining/protected/views/jquery_gmap แก้ไ ขไฟล์ index.php ให้สามารถ แสดงแผนที่และกาหนด Marker ได้ ซึ่งมีวิธีการดังนี้ 1. เรียกใช้งาน Extension jquery-gmap โดยใช้คาสั่ง ดังรูปที่ 12-3

รูปที่ 12-3 แสดงการเรียกใช้งาน Extension jquery-gmap

51 2. สร้างแผนที่โดยใช้คาสั่ง ดังรูปที่ 12-4

รูปที่ 12-4 แสดงการใช้คาสั่งสร้างแผนที่ 3. สร้าง Marker การสร้าง Marker เป็นการสร้างเพื่อเป็นการกาหนดตาแหน่ง หรือบ่งบอกสถานที่ที่ ต้องการ โดยการสร้าง Marker มีด้วยกัน 2 วิธีคือ สร้า งแบบกาหนดละติจูด ลองติจูด และ สร้างแบบกาหนดชื่อเมือง และประเทศ 3.1 การสร้าง Marker แบบกาหนดละติจูด ลองติจูด มีวิธีการ ดังรูปที่ 12-4

รูปที่ 12-5 แสดงการสร้าง Marker แบบกาหนดละติจูด ลองติจูด

52 3.2 การสร้าง Marker แบบกาหนดชื่อเมือง และประเทศ มีวิธีการ ดังรูปที่ 12-6

รูปที่ 12-6 แสดงการสร้าง Marker แบบกาหนดชื่อเมือง และประเทศ 4. ใช้คาสั่งแสดงแผนที่ ดังรูปที่ 12-7

รูปที่ 12-7 แสดงการใช้คาสั่งแสดงแผนที่ 5. เมื่ อแก้ไ ขไฟล์ index.php เป็ น ที่เ รีย บร้ อ ยแล้ว สามารถดูรู ป แบบการแสดงผลได้ ที่ http://localhost/YiiTraining/index.php/jquery_gmap/index ซึ่งมีรูปแบบการแสดงผลดังรูปที่ 12-8

รูปที่ 12-8 แสดงรูปแบบการใช้งาน Extension jquery-gamp

13. การติดตั้ง extension Rights เพื่อใช้ในการกาหนดสิทธิการใช้งานของผู้ใช้ Extension Rights เป็น extension เสริม เพื่อใช้ในการจัดการการเข้า ถึงข้อมูล และการจากัด สิทธิการใช้งานของผู้ใช้ ซึ่งการติดตั้งการใช้งานมีวิธีการดังต่อไปนี้ 1. ที่ www/YiiTraining/protected/ สร้างไดเร็คทอรี่ modules เพื่อเพิ่มส่ว นการทางานที่เป็น Module ดังรูปที่ 13-1

รูปที่ 13-1 แสดงการสร้างไดเรคทอรี่ modules 1. ดาวน์โหลด Extension Right ที่ http://www.yiiframework.com/extension/rights/ 2. Extract ไฟล์ Rights ไปไว้ที่ www/YiiTraining/protected/modules 3. ที่ไดเรคทอรี่ www/YiiTraining/protected/config/main.php แก้ไข config ดังนี้ 1. ที่ 'import' => array(), แก้ไขดังรูปที่ 13-2

รูปที่ 13-2 แสดงการแก้ไข import ใน config

55 2. ที่ 'modules' => array(), แก้ไขดังรูปที่ 13-3

รูปที่ 13-3 แสดงการแก้ไข modules ใน config 3. ที่ 'components' => array(), เพิ่มคาสั่งดังนี้ 3.1 เพิ่มคาสั่ง 'user'=>array( ), ดังรูปที่ 13-4

รูปที่ 13-4 แสดงการเพิ่มคาสั่ง 'user'=>array( ), ใน components 3.2 เพิ่มคาสั่ง 'authManager'=>array( ), ดังรูปที่ 13-5

รูปที่ 13-5 แสดงการเพิ่มคาสั่ง 'authManager'=>array( ), ใน components 4. โดยสรุปการแก้ไข Config มีลักษณะดังรูปที่ 13-6

รูปที่ 13-6 แสดงรูปแบบการแก้ไข Config ทั้งหมด ที่มา : Christoffer Niska. (2011,1 November), Yii-Rights documentation Version 1.2.0, หน้า 4. 4. แก้ ไ ข RightsModule ให้ ต รงกั บ Class ของ Model ที่ ใ ช้ ง าน โดยที่ ไ ดเรคทอรี่ www/YiiTraining/protected/modules/Rights/RightsModule.php ภา ยใน Class RightsModule แก้ไขดังนี้ 1. แก้ไ ข $userClass ให้ต รงกับ ชื่อ Class ของ Model ที่ ใช้ ในการ Login จาก ตัวอย่าง Model ที่ใช้ในการ Login คือ Model UserLogin โดยแก้ไขดังรูปที่ 13-7

รูปที่ 13-7 แสดงการแก้ไข $userClass 2. แก้ไ ข $userIdColumn โดยให้ ใ ช้ชื่ อ เดี ยวกั บ Column ที่ เ ก็บ รหัส ผู้ ใช้ จาก ตัวอย่าง Column ที่ใช้คือ id_user ดังรูปที่ 4-1

รูปที่ 13-8 แสดงการแก้ไข $userIdColumn

57 3. แก้ไ ข $userNameColumn โดยให้ใช้ ชื่อเดีย วกับ Column ที่เก็บ ชื่อผู้ใช้ จาก ตัวอย่าง Column ที่ใช้คือ username ดังรูปที่ 13-9

รูปที่ 13-9 แสดงการแก้ไข $userNameColumn 4. เมื่อแก้ไข config ต่าง ๆ เรียบร้อยแล้ว ให้ Admin ทาการ Login เข้า สู่ระบบ แต่ เมื่อAdmin ทาการ Login เข้าสู่ระบบแล้วจะเกิด Error ขึ้นดังรูปที่ 13-10 ซึ่งสาเหตุเกิด จาก ตารางต่าง ๆ ของ Rights Extension ยังไม่ได้ถูกสร้าง

รูปที่ 13-10 แสดงการเกิด Error 5. เข้ า ไปที่ http://localhost/YiiTraining/index.php/rights เพื่ อ เข้ า สู่ ก ารติ ด ตั้ ง Rights Extension ซึ่งแสดงดังรูปที่ 13-11 ให้ Admin คลิกที่ Yes เพื่อติดตั้ง

รูปที่ 13-11 แสดงหน้ายืนยันการติดตั้ง 6. เมื่อติดตั้งเรียบร้อยจะแสดงผลดังรูปที่ 13-12

รูปที่ 13-12 แสดงหน้าการติดตั้งสาเร็จ 5. เมื่อติดตั้งเรียบร้อยแล้ว ให้กลับไปปิด การติด ตั้งเพื่อไม่ให้การใช้งาน Rights กลับเข้า สู่ หน้าติด ตั้งอีก โดยไปที่ www/YiiTraining/protected/config/main.php ภายใต้ 'modules'=>array( ), แก้ไขดังรูปที่ 13-13

รูปที่ 13-13 แสดงการแก้ไขการตั้งค่า Rights 7. เมื่อแก้ไขการตั้งค่า Rights เป็นที่เรียบร้อยแล้ว สามารถเรียกใช้งาน Rights Extension ได้ ที่ http://localhost/YiiTraining/index.php/rights ซึ่งจะแสดงผลดังรูปที่ 13-14

รูปที่ 13-14 แสดงหน้า Rights สาหรับการคู่มือการใช้งาน Right Extension นั้น สามารถดาวน์โหลดได้ที่ http://yii-rights.googlecode.com/files/yii-rights-doc-1.2.0.pdf

14. การใช้ extension MbMenu เพื่อกาหนดรูปแบบการแสดงเมนูแบบ DropdownList Mbmenu เป็ น Extension เสริ ม ส าหรั บ ที่ ช่ ว ยในการท า Dropdown Menu เพื่ อ ให้ ผู้พัฒนาโปรแกรมมีความสะดวกรวดเร็วในการพัฒนาโปรแกรม อีกทั้งยังมีรูปแบบการแสดงผลที่ สวยงาม โดยการทา Dropdown Menu มีวิธีการดังนี้ 1. ดาวน์โหลด extension mbmenu ที่ http://www.yiiframework.com/extension/mbmenu ดังรูปที่ 14-1

รูปที่ 14-1 แสดงหน้าดาวน์โหลด extension mbmenu 2. ท าการแตกไฟล์ ที่ ด าวน์ โ หลดเก็ บ ไว้ ที่ ไ ดเรคทอรี่ www/YiiTraining/protected/ extensions 3. เรียกใช้ extension mbmenu 1. ไปที่ไดเรคทอรี่ www/YiiTraining/protected/views/layouts/main.php ปิด ค าสั่ง widget CMenu หรือ ลบคาสั่ง widget CMenu แล้วเพิ่มคาสั่งดังรูปที่ 14-2

รูปที่ 14-2 แสดงคาสั่ง Widget MbMenu 2. แก้ไข <div id="mainmenu"> เป็น <div id="mainMbMenu"> 3. เมื่อแก้ไขแล้วจะมีการเปลี่ยนแปลงรูปแบบการแสดงผลดังนี้ Menu ที่ใช้คาสั่ง Widget CMenu แสดงดังรูปที่ 14-3

รูปที่ 14-3 แสดงรูปแบบ Menu ที่ใช้คาสั่ง Widget CMenu

62 Menu ที่ใช้คาสั่ง Widget MbMenu แสดงดังรูปที่ 14-4

รูปที่ 14-4 แสดงรูปแบบ Menu ที่ใช้คาสั่ง Widget MbMenu

15. การกาหนดการมองเห็นเมนู การกาหนดการมองเห็นเมนูนั้น เป็นการกาหนดสิทธิการใช้งานในเมนู โดยการกาหนด สิทธินั้นสามารถกาหนดได้ทั้งเมนูแบบ CMenu และ MbMenu ซึ่งการกาหนดการมองเห็นนั้น หาก ต้องการกาหนดเมนูเฉพาะสาหรับ Admin ควรทาการติด ตั้ง Rights Extension ด้ว ย การกาหนดการ มองเห็นเมนูมีวิธีการดังนี้ ตัวอย่า ง การกาหนดรูปแบบการมองเห็นเมนูด้ว ย Widget CMenu โดยใช้การยกตัว อย่า ง การแสดงผลเมนู Contact ซึ่งมีวิธีการดังนี้ 1. ทาการสร้างสมาชิกใหม่ 1 สมาชิก และใช้ account ที่เป็น Admin แก้ไขให้สมาชิกใหม่ นั้นเป็น Authenticated คือเป็นสมาชิกธรรมดา 2. ที่ www/YiiTraining/protected/views/layout/main.php กาหนดรูปแบบการมองเห็นเมนู Contact โดยให้ผู้ใช้ที่เป็น Authenticated และAdminสามารถมองเห็นได้ มีวิธีการดังรูปที่ 4-1

รูปที่ 15-1 แสดงการกาหนดรูปแบบการมองเห็นเมนู

63 3. เมื่อกาหนดรูปแบบแล้ว จะมีรูปแบบการแสดงผลดังนี้ - การแสดงผลเมนูของผู้ใช้ทั่วไปมีรูปแบบการแสดงผล ดังรูปที่ 15-2

รูปที่ 15-2 แสดงผลเมนูของผู้ใช้ทั่วไป - การแสดงผลเมนูของผู้ใช้ที่เป็น Authenticated และAdminเมื่อทาการ Loginแล้ว จะมีรูปแบบการแสดงผล ดังรูปที่ 15-3

รูปที่ 15-3 แสดงผลเมนูของผู้ใช้ที่เป็น Authenticated และAdmin การกาหนดรูปแบบการมองเห็น มีด้วยกัน แบบ คือ 1. การกาหนดการมองเห็น เฉพาะผู้ใช้ทั่วไป ใช้คาสั่งดังรูปที่ 15-4

รูปที่ 15-4 แสดงการใช้คาสั่งกาหนดการมองเห็นเฉพาะผู้ใช้ทั่วไป

64 2. การกาหนดการมองเห็น เฉพาะผู้ใช้ที่เป็น Authenticated และAdmin ใช้ค าสั่งดังรูปที่ 15-5

รูปที่ 15-5 แสดงการใช้คาสั่งกาหนดการมองเห็นเฉพาะผู้ใช้ที่เป็น Authenticated และAdmin 3. การกาหนดการมองเห็น เฉพาะผู้ใช้ที่เป็น Authenticated ใช้คาสั่งดังรูปที่ 15-6

รูปที่ 15-6 แสดงการใช้คาสั่งกาหนดการมองเห็นเฉพาะผู้ใช้ที่เป็น Authenticated 4. การก าหนดการมองเห็น เฉพาะผู้ใ ช้ที่เป็น Admin ในส่ว นนี้ค วรทาการติด ตั้ง Rights Extension เพื่อความสะดวกในการกาหนดการใช้งาน โดยใช้คาสั่งดังรูปที่ 15-7

รูปที่ 15-7 แสดงการใช้คาสั่งกาหนดการมองเห็นเฉพาะผู้ใช้ที่เป็น Admin

บรรณานุกรม Christoffer Niska. (2011,1 November), Yii-Rights documentation Version 1.2.0, หน้า 4. แหล่งรวมการตอบปัญหากระทู้ ชุมชน Yii Framework ในประเทศไทย (ออนไลน์) สามารถเข้าถึงได้จาก : http://www.yii.in.th/form/ (วันที่สืบค้นข้อมูล : 23 พฤศจิก ายน 2554) แหล่งรวมการตอบปัญหากระทู้ เว็บไซต์ Yii Framework (ออนไลน์) สามารถเข้าถึงได้จาก : http://www.yiiframework.com/ forum/ (วันที่สืบค้นข้อมูล : 19 มกราคม 2555) แหล่งศึกษาการใช้งาน Yii Framework (ออนไลน์) สามารถเข้าถึงได้จาก : http://www.yiiframework.com (วันที่สืบค้นข้อมูล : 19 มกราคม 2555)

ภาคผนวก

ภาคผนวก ก ปัญหา Error ปัญหาที่ 1 Config DbConnect_Failed ดังรูปที่ ก-1

รูปที่ ก-1 แสดงการเกิด Error DbConnect_Failed สาเหตุ เกิดจากการเชื่อมต่อฐานข้อมูล หรือ การรองรับฐานข้อมูล การแก้ปัญหา 1. ตรวจสอบใน C:\AppServ\www\YiiTraining\protected\config\main.php ในส่วนของ 'db' ว่า เชื่อมต่อฐานข้อมูลถูกต้องหรือไม่ 2. ตรวจสอบการรองรับฐานข้อมูล โดยสามารถตรวจสอบได้ที่ http://localhost/yii/requirements/ หาก PDO MySQL extension แสดงเป็น Warning ให้แก้ไขดังนี้ 2.1 ที่ไดเรคทอรี่ C:\Windows\php.ini ลบ Comment [;] ที่บรรทัด extension=php_pdo_mysql.dll 2.2 หลังจากนั้นทาการ Save และ Restart เครื่องใหม่

68 ปัญหาที่ 2 Config Error 403 code Generator ดังรูปที่ ก-2

รูปที่ ก-2 แสดงการเกิด Error 403 code Generator สาเหตุ เกิดจากไม่อนุญาตให้ใช้งาน (ปัญหาที่เกิดจากการทางานบน Server) การแก้ปัญหา ที่ไดเร็คทอรี่ C:\AppServ\www\YiiTraining\protected\config\main.php แก้ไข 'gii'=>array( )ให้ ipFilters มีลักษณะดังนี้ 'ipFilters'=>false, ปัญหาที่ 3 การแสดงผลแบบ CListView คลิก Link Update แล้วเกิด Error 400 Your request is invalid. ดังรูปที่ ก-3

รูปที่ ก-3 แสดงการเกิด เกิด Error 400

69 สาเหตุ ปัญหาเกิดจาก Link ที่ Generate ไม่สอดคล้องกับ การเรียกใช้แบบ CListView เนื่องจาก ฟังก์ชั่น View ถูกแก้ไขให้มีลักษณะการแสดงผลเป็น CListView การแก้ปัญหา หลังจาการแก้ปัญหา ฟังก์ชั่น view ได้ถูกแก้ไขให้มีการเก็บ session ดังนั้น จึงนา session ที่ ถูกเก็บมาใช้งาน โดยการแก้ไขดังนี้ 1. ประกาศใช้ session ที่ บรรทัดแรกของ views/document/view.php ดังรูปที่ ก-4

รูปที่ ก-4 แสดงการประกาศใช้ session 2. แก้ไข Link ภายใต้ $this->menu=array( ); ดังรูปที่ ก-5

รูปที่ ก-5 แสดงการแก้ไข Link โดยมีรายละเอียดการแก้ไข Link ดังรูปที่ ก-6

รูปที่ ก-6 แสดงรายละเอียด Link

70 ปัญหาที่ 4 การสร้างฟอร์ม สาหรับอัพโหลด การ Update หน้า Document ไม่ได้ สาเหตุ เกิดจากการไม่ได้แก้ไขให้ฟังก์ชั่น Update ของ DocumentController สามารถอัพโหลดไฟล์ ได้ การแก้ปัญหา แก้ไขคาสั่งในฟังก์ชั่น update ให้มีลักษณะเดียวกันกับฟังก์ชั่น create ปัญหาที่ 5 การสร้างฟอร์มสาหรับอัพโหลดรูป Cannot modify header information - headers already sent by (output started at C:\AppServ\www\YiiTraining\protected\models\Image.php:1) ดังรูปที่ ก-7

รูปที่ ก-7 แสดงการเกิดเกิดปัญหาการเรียกหน้าแสดงผล

71 สาเหตุ เกิดจากการเรียกหน้าแสดงผลหลังจากอัพโหลดรูปภาพ ดังรูปที่ ก-8

รูปที่ ก-8 แสดงบรรทัดที่เกิดปัญหา การแก้ปัญหา ปัญหาที่เกิดขึ้นยังไม่สามารถหาวิธีการแก้ไขได้ ซึ่งปัญหานี้เกิดขึ้นภายในฟังก์ชั่น create ของ คลาส ImageController เท่านั้น ปัญหาที่ 6 การใช้ extension Rights YiiBase::include(User.php) [<a href='yiibase.include'>yiibase.include</a>]: failed to open stream: No such file or directory ดังรูปที่ ก-9

รูปที่ ก-9 แสดงการเกิดปัญหา YiiBase::include(User.php) สาเหตุ เกิดจากยังไม่ได้สร้าง Model User หรือ Model ที่ใช้ในการ Login นั้น ไม่ได้ชื่อ User (โดย ปกติ Extension Rights จะตั้งค่าเริ่มต้น ให้ใช้คู่กับ Model User) การแก้ปัญหา ที่ไดเรคทอรี่ www/YiiTraining/protected/modules/rights/RightsModule.php ใช้แก้ไขดังนี้ 1. แก้ไข $userClass ให้ตรงกับชื่อ Class ของ Model ที่ใช้ในการ Login จากตัวอย่าง Model ที่ใช้ในการ Login คือ Model UserLogin โดยแก้ไขดังรูปที่ ก-10

รูปที่ ก-10 แสดงการแก้ไข $userClass 2. แก้ไข $userIdColumn โดยให้ใช้ชื่อเดียวกับ Column ที่เก็บรหัสผู้ใช้ จากตัวอย่าง Column ที่ใช้คือ id_user ดังรูปที่ ก-11

รูปที่ ก-11 แสดงการแก้ไข $userIdColumn 3. แก้ไข $userNameColumn โดยให้ใช้ชื่อเดียวกับ Column ที่เก็บชื่อผู้ใช้ จากตัวอย่าง Column ที่ใช้คือ username ดังรูปที่ ก-12

รูปที่ ก-12 แสดงการแก้ไข $userNameColumn