Category: Developer

งานพัฒนาระบบ, เขียนโปรแกรม

Workshop PSU Passport Authentication

“อยากจะ authen PSU Passport ทำยังไง ทำไมต่อยากจัง”

Workshop นี้จะทำให้ท่านรู้ว่ามันไม่ยากอย่างที่คิดเลยยยย

มาถึงอีก 1 workshop ที่ควรจะสอนทุกปี(เพราะพนักงานใหม่มีทุกปี :P) เคยฝาก blog ไว้นานแล้วครับ แต่ไม่เคยรวบรวมเอามาสอนมาก่อน อาจจะมาช้าไป แต่ไม่สายไปใช่ไหมครับ ^.^

คำเตือน : บทความนี้เป็นบทความปิด ถ้าท่านเปิด Blog นี้ได้ แสดงว่าท่านได้รับอนุญาตในการอ่าน ห้ามนำบทความไปเผยแพร่ในที่สาธารณะครับ เพราะอาจส่งผลต่อความปลอดภัยของบัญชี PSU Passport ได้

Passport Overview : แนะนำ PSU Passport เบื้องต้น
http://server-dev.psu.ac.th/psupassportv2.pptx
http://server-dev.psu.ac.th/psupassportv2.pdf

VirtualBox Installation

เครื่องที่ใช้ในการทดสอบ (Oracle VM VirtualBox)
*แนะนำให้เปิดกับโปรแกรม version ล่าสุด

รายละเอียด	URL
psu-passport	https://passport.psu.ac.th/psu-passport.ova ** User : administrator, Password : 123456

โดยรวบรวม Blog แบ่งเป็น 14 Blog ดังนี้
*Note : แต่ละ Blog จะมีการ Update ให้ทันสมัยอยู่เสมอ

Blog ที่	ชื่อ Blog
1	วิธีการติดตั้ง CA Certificate PSU Passport บน Windows Server
2	วิธีการติดตั้ง CA Certificate PSU Passport บน Ubuntu Server
3	การเชื่อมต่อ PSU Passport : WordPress-LDAP (AD Integration Plugin)
4	การเชื่อมต่อ PSU Passport : Drupal6-LDAP (Module LDAP integration)
5	การเชื่อมต่อ PSU Passport : Drupal7-LDAP (Module LDAP)
6	การเชื่อมต่อ PSU Passport : Joomla-LDAP
7	การเชื่อมต่อ PSU Passport : Moodle-LDAP (กำลังดำเนินการ)
8	การเชื่อมต่อ PSU Passport : OwnCloud-LDAP (กำลังดำเนินการ)
9	การเชื่อมต่อ PSU Passport : PHP-Webservice (กำลังดำเนินการ)
10	การเชื่อมต่อ PSU Passport : PHP-LDAP
11	การเชื่อมต่อ PSU Passport : ASP-LDAP
12	การเชื่อมต่อ PSU Passport : ASP.NET(C#)-LDAP
13	การเชื่อมต่อ PSU Passport : JSP-LDAP
14	การเชื่อมต่อ PSU Passport : FreeRadius-LDAP (กำลังดำเนินการ)

บทความเพิ่มเติม

ยังไม่มี

January 27, 2015

วิธีการติดตั้ง CA Certificate PSU Passport บน Windows Server
ทดสอบบน : Windows Server 2008 R2

ขั้นตอนการดาวน์โหลด CA Certificate PSU Passport

1. เข้า Web Site : https://ca.psu.ac.th ทำการ Login ด้วย Account PSU Passport

2. ให้เลือกหัวข้อ Download a CA Certificate….. ดังรูป

3. ในหน้าต่าง Download a CA Certificate ให้ทำการ Download ไฟล์ดังรูป

4. เมื่อโหลดแล้วจะได้ไฟล์ดังรูป

ขั้นตอนการติดตั้ง Certificate บนเครื่อง Windows Server สำหรับ PHP5

1. ในกรณีที่ใช้งานกับ php5 ให้ดาวน์โหลด CA Certificate PSU Passport ใหม่โดยเลือกเป็น Base 64 ดังรูป

2. จากนั้น ให้ rename file cer เป็น .pem ดังรูป (ระวังชื่อไฟล์ให้ดี ๆ ครับ จากรูปชื่อไฟล์ certnew(1).cer เพราะมีไฟล์ certnew.cer อยู่แล้ว ซึ่งเป็นไฟล์แบบ DER ใช้แทนกันไม่ได้)

3. สร้าง Folder c:/openldap/sysconf/ และทำการ copy file .pem และสร้างไฟล์ ldap.conf ดังรูป

4. เพิ่มข้อความในไฟล์ ldap.conf ดังนี้
```
TLS_CACERT c:\openldap\sysconf\certnew.pem
```
5. จากนั้นทำการ Restart เครื่องเป็นอันจบ

ขั้นตอนการติดตั้ง Certificate บนเครื่อง Windows Server สำหรับ .NET Application

1. เปิดหน้าต่าง Run พิมพ์ mmc จากนั้นกด OK

2. เลือก Add/Remove Snap-in

3. เลือก Computer Account

4. เลือก Local computer

5. เลือก Trust Root Certification Authorities -> Certificates คลิกขวา เลือก All Tasks -> Import

6. จะปรากฎหน้าต่าง Welcome กด Next

7. จากนั้นจะปรากฎให้ใส่ไฟล์ Cer ให้ Browse ไฟล์ Cer ดังรูป (ชื่อไฟล์ในรูปอาจจะคนละชื่อกับไฟล์ที่โหลดในข้อ 1 ไม่ต้องสงสัยครับ)

8. จากนั้นกด Next

9. สุดท้ายกด Finish

เป็นอันเสร็จครับ ^ ^
January 27, 2015
ทำความรู้จักกับ Bootstrap

สำหรับในบทความนี้ เป็นภาคต่อจาก “เตรียมความพร้อมก่อนการพัฒนา Web Application ” โดยจะมาทำความรู้จักกับ Bootstrap กันให้มากขึ้น ซึ่ง Bootstrap จัดเป็น Front-end Framework ที่กำลังได้รับความนิยมเป็นอย่างมากในปัจจุบัน อาจจะเป็นเพราะว่า Bootstrap มีแนวทางในการพัฒนาในแบบ Responsive Web Design ก็เป็นได้ (บทความ แนวทางการพัฒนาเว็บแบบ Responsive Web Design)

แนวคิดของ Bootstrap จะให้ความสำคัญกับการออกแบบการแสดงผลในอุปกรณ์ขนาดเล็กก่อน (Mobile First Approach) กล่าวคือ การสร้างเว็บไซต์ 1 หน้าสำหรับ Content ชุดเดียวกัน เราต้องออกแบบการแสดงผลให้ครอบคลุมหน้าจออย่างน้อย 3 ขนาดทั้ง Mobile device, Table และ Notebook จริงๆ แล้วการจะออกแบบโดยเริ่มต้นที่หน้าจอขนาดใหญ่ หรือเล็กก่อนก็สามารถทำได้ทั้งนั้น แต่การเริ่มต้นจากหน้าจอขนาดเล็กจะทำให้เราได้โฟกัสใน Content ที่สำคัญๆ ก่อน เพื่อให้ User ได้รับข้อมูลหลักที่เว็บไซต์ต้องการนำเสนอ และค่อยๆ ออกแบบโดยเพิ่มรายละเอียดที่สำคัญรองลงมาในหน้าจอขนาดใหญ่ขึ้นตามลำดับ

ใน Bootstrap เวอชั่น 3 นั้นได้เพิ่มคุณสมบัติการเป็น Responsive มาในตัวแล้ว การนำมาใช้งานจึงไม่ต้อง Include ไฟล์คุณสมบัตินี้เพิ่มเหมือนในเวอร์ชั่นก่อนหน้า

การดาวน์โหลด Bootstrap

สามารถดาวโหลดได้ที่ www.getbootstrap.com

โครงสร้างไดเร็กทอรี่

หลังจากดาวน์โหลดไฟล์มาแล้ว ให้ทำการแตกไฟล์ .zip จะพบว่ามีโครงสร้างไฟล์ดังนี้

css
เป็นโฟลเดอร์สำหรับเก็บไฟล์ CSS ที่ใช้กำหนด Layout และ Theme ของหน้าเว็บ สังเกตว่าในโฟลเดอร์นี้จะมีไฟล์ .min ซึ่งเป็นไฟล์ CSS ที่ผ่านการคอมไพล์แล้วทำให้มีขนาดเล็กลง

js
เป็นโฟลเดอร์สำหรับเก็บไฟล์ JavaScript เพิ่มลูกเล่นให้กับเว็บ

fonts
เป็นโฟลเดอร์สำหรับเก็บฟอนต์ต่างๆ ที่ใช้ในการแสดงผลข้อความบนหน้าเว็บ

สิ่งที่ Bootstrap เตรียมไว้ให้

Grid system
ระบบ Grid จำนวน 12 คอลัมน์ สามารถเลือกใช้ได้ทั้งแบบ fixed และแบบ fluid

Base CSS
style sheets สำหรับ html elements พื้นฐาน เช่น typography, tables, forms และ images

Components
style sheets สำหรับสิ่งที่เราต้องใช้บ่อยๆ ไม่ว่าจะเป็น navigation, breadcrumbs รวมไปถึง pagination

JavaScript
jQuery plugins ต่างๆ ไม่ว่าจะเป็น modal, carousel หรือ tooltip

เทมเพลตพื้นฐาน

Bootstrap ใช้โครงสร้างเอกสารเป็น HTML5 ซึ่งมีเทมเพลตพื้นฐานดังรูป

ตัวอย่างการนำไปใช้งานที่เห็นได้ชัด และหลายๆ ท่านในชุมชน PSU SysAdmin เองคงจะคุ้นเคยกันดี เช่น

– Joomla เวอร์ชั่น 3 ที่นำ Bootstrap ไปใช้ เพื่อให้เว็บไซต์มีคุณสมบัติของ Responsive Design ตอบสนองการแสดงผลบนอุปกรณ์ที่มีขนาดต่างๆ กันได้เป็นอย่างดี

– WordPress ก็สามารถสร้าง Theme ด้วย Bootstrap ได้เหมือนกัน (http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial)

– นอกจากนี้ท่านยังสามารถดูตัวอย่างเว็บไซต์อื่นๆ ที่ทางผู้พัฒนา Bootstrap ได้รวบรวมไว้ได้ที่ http://expo.getbootstrap.com/

January 14, 2015
การทำ Wireframe
ในการพัฒนาเว็บไซต์ จะมีผู้ที่เกี่ยวข้องโดยตรงหลักๆ ได้แก่
1. ทีมพัฒนาเว็บไซต์ หรือโปรแกรมเมอร์ อาจจะมีคนเดียว หรือทำงานกันเป็นทีมก็ได้ และ
2. ผู้ใช้ หรือลูกค้า จะเป็นผู้กำหนดความต้องการของเว็บไซต์

หลังจากที่ทีมพัฒนาเก็บรวบรวมความต้องการของลูกค้า และได้ทำการวิเคราะห์ความต้องการแล้ว ขั้นตอนถัดไป ก็จะเป็นการวางแผน ออกแบบ Layout คร่าวๆ ก่อน เพื่อให้ทีมพัฒนามีความเข้าใจที่ตรงกัน อีกทั้งยังสามารถนำเสนอต่อลูกค้า เพื่อให้ลูกค้าเห็นภาพรวมของเว็บไซต์ก่อนการลงมือออกแบบเว็บไซต์ และเขียนโค้ดจริง เราเรียกกระบวนการออกแบบ Layout และนำเนื้อหาคร่าวๆ ในเว็บไซต์มาจัดเรียงบน Layout นี้ว่า “การทำ Wireframe”

การทำ Wireframe นั้นไม่ได้มีรูปแบบตายตัว นักพัฒนาแต่ละคนอาจมีวิธีการที่แตกต่างกันไป แต่มีวัตถุประสงค์ในการทำที่เหมือนกัน คือ เพื่อให้เห็นภาพรวมของเว็บไซต์ ทำให้ทีมเข้าใจตรงกัน และพัฒนาไปในทางเดียวกัน

ตัวอย่างเครื่องมือที่ใช้ทำ Wireframe ที่ทำได้ง่ายที่สุด คือการใช้ดินสอ วาด Layout ลงบนกระดาษ และจัดเรียงเนื้อหาคร่าวๆ ดังรูป

หรือจะใช้โปรแกรมคอมพิวเตอร์ช่วยในการทำก็ได้แล้วแต่ความถนัดของแต่ละคน ซึ่งโปรแกรมคอมพิวเตอร์ที่ช่วยในการทำ Wireframe จะมีให้เลือกใช้มากมาย ทั้งในแบบใช้งานออนไลน์ และแบบที่ต้องติดตั้งลงเครื่อง มีทั้งที่ให้ใช้งานฟรี และเสียตังค์ซื้อก็มี ตัวอย่างที่น่าสนใจได้แก่
1. Prototype – โปรแกรมทำ Wireframe ตัวนี้มีทั้งบน Windows / Mac OS โดยแบ่งเป็นเวอร์ชั่นฟรี กับเวอร์ชั่นเสียเงิน
2. Pencil Project – โปรแกรมทำ Wireframe ใช้ฟรี ๆ มีทั้งบน Windows / Linux / Mac OS
3. Cacoo – Web App สำหรับทำ Diagram, Wireframe ออนไลน์ โดย Account ฟรีจะสร้าง Wireframe ได้จำกัดหน้า
4. JumpChart – Web App สำหรับทำ Wireframe Online ที่หน้าตาเรียบง่าย โดย Account ฟรีจะสร้าง Wireframe ได้จำกัดหน้า
5. FrameBox – Web App สำหรับทำ Wireframe ฟีเจอร์น้อย แต่ใช้ฟรี ทำเสร็จส่งลิงค์ให้ลูกค้าได้ทันที
6. iPlotz – Web App สำหรับสร้าง Wireframe ออนไลน์ที่ดูมีสีสันกว่าตัวอื่น ใช้ฟรี Account จะจำกัดหน้า
วิธีการใช้งานโปรแกรมเหล่านี้ก็ไม่ยากมาก สามารถศึกษาได้ด้วยตนเอง และเลือกใช้งานโปรแกรมได้ตามความถนัดของแต่ละคน ตัวอย่างต่อไปนี้จะเป็นวีดีโอแนะนำการใช้งาน Pencil Project ซึ่งเท่าที่เคยได้ลองเล่นดูพบว่าเป็นโปรแกรมที่น่าสนใจ มีเครื่องมือให้ใช้ค่อนข้างครบถ้วน และที่สำคัญคือใช้งานได้ฟรีไม่มีค่าใช้จ่าย
January 13, 2015
เตรียมความพร้อมก่อนการพัฒนา Web Application

ในปัจจุบันนี้ต้องยอมรับว่าระบบอินเตอร์เน็ตเข้ามามีบทบาทสำคัญต่อการดำเนินกิจกรรมต่างๆ มากมาย ทั้งในด้านสังคม เศรษฐกิจ การเมือง การศึกษา หรือแม้กระทั่งวงการทหาร ดังนั้นแนวโน้มของโปรแกรมคอมพิวเตอร์จึงเน้นไปทางด้านโปรแกรมที่สามารถทำงานผ่านระบบอินเตอร์เน็ตได้ ประกอบกับอุปกรณ์ในการเข้าถึงอินเตอร์เน็ตมีความหลากหลายมากยิ่งขึ้นจึงมีผลต่อการพิจารณาเทคนิค วิธีการต่างๆ ที่จะนำมาใช้ในการพัฒนาระบบของผู้พัฒนาว่าควรจะเลือกใช้เทคโนโลยีใดบ้าง เพื่อให้โปรแกรมที่พัฒนาขึ้นมีความทันสมัย รองรับการใช้งานบนอุปกรณ์ต่างๆ ได้เป็นอย่างดี

เนื่องจากอุปกรณ์ต่างๆ ไม่ว่าจะเป็น Computer, Tablet หรือ Mobile จะมีโปรแกรมพื้นฐานที่เรียกว่า Web Browser สำหรับเข้าใช้งานเว็บไซต์ต่างๆ อยู่แล้ว ดังนั้นการพัฒนาโปรแกรมในรูปแบบ Web หรือที่เรียกว่า Web Application จึงเป็นทางเลือกที่ได้รับความนิยมเป็นอย่างมาก สามารถตอบสนองความต้องการของผู้ใช้งานได้เป็นอย่างดี

ก่อนการพัฒนาโปรแกรมทุกครั้ง ผู้พัฒนาระบบจะต้องทำการรวบรวมความต้องการของโปรแกรม (เป็นขั้นตอนแรกของการพัฒนาโปรแกรมตามกระบวนการ SDLC) เพื่อนำมาวิเคราะห์ และออกแบบระบบในขั้นตอนต่อไป ผลจากการวิเคราะห์ความต้องการในบางครั้งพบว่าเราไม่จำเป็นต้องพัฒนาโปรแกรมขึ้นมาใหม่ เนื่องจากโปรแกรมสำเร็จรูปบางตัวสามารถตอบโจทย์ความต้องการเหล่านั้นได้แล้ว เช่น Joomla, Moodle, WordPress เป็นต้น แต่ถ้าหากไม่ตอบโจทย์ความต้องการ ก็จะเป็นหน้าที่ของผู้พัฒนาที่จะต้องพัฒนาระบบขึ้นมาเอง ซึ่งในการที่จะพัฒนาระบบได้นั้น ผู้พัฒนาจะต้องมีความรู้พื้นฐานที่เกี่ยวข้อง เพื่อที่จะได้นำมาประกอบการตัดสินใจเลือกเทคนิคเหล่านั้นได้อย่างเหมาะสม ในบทความนี้เราจะมาทำความเข้าใจพื้นฐานที่ควรรู้สำหรับนักพัฒนาเว็บไซต์มือใหม่ได้แก่ความหมายของ Front-end, Back-end และ Front-end Framework

Front-end สำหรับเว็บไซต์ คือส่วนที่แสดงผล หรือหน้าเว็บไซต์ที่เราคุ้นเคยกัน เปรียบได้กับหน้าบ้าน ซึ่งเป็นส่วนที่ User โดยทั่วไปสามารถเห็น และเข้ามาใช้งานได้ เช่น หน้าเว็บที่ท่านกำลังอ่านอยู่ ณ ขณะนี้ เป็นต้น ซึ่งหน้าเว็บเหล่านี้จะต้องมีการออกแบบให้สวยงาม เพื่อสร้างความน่าสนใจของเนื้อหาเว็บไซต์ให้มากยิ่งขึ้น รวมทั้งการออกแบบในส่วนของการจัดวางเมนู การจัดตำแหน่งของเนื้อหาเว็บ การกำหนดรูปแบบ และขนาด Text เป็นต้น

Back-end ในที่นี้หมายถึงส่วนหน้าจอการจัดการข้อมูล ไม่ว่าจะเป็นการเพิ่ม แก้ไข ลบเนื้อหาเว็บไซต์ (Content) สำหรับผู้ดูแลเว็บไซต์ (Admin) ตัวอย่างเช่น เนื้อหาที่ท่านกำลังอ่าน ก็มาจากการเพิ่มข้อมูล หรือเขียน Blog ผ่านหน้าจอการจัดการ ข้อมูลนั่นเอง

สังเกตได้ว่าในการพัฒนาเว็บไซต์ทั้งส่วน Front-end หรือ Back-end ไม่ว่าจะเป็นเว็บใดก็ตามจะมีการนำเสนอเนื้อหาโดยใช้ภาษา HTML จากนั้นจึงจัดรูปแบบให้สวยงามด้วย CSS และเพิ่มลูกเล่นให้กับเว็บไซต์ให้น่าสนใจด้วย JavaScript ซึ่งเดิมทีการสร้างเว็บไซต์แต่ละเว็บนั้นเราจะเริ่มจากเขียน HTML, CSS และ JavaScript เองตั้งแต่ต้นจนจบ หรืออาจจะใช้เครื่องมือช่วยเช่น Dreamweaver แต่ในปัจจุบันนี้เราไม่จำเป็นต้องเริ่มจากศูนย์อีกแล้ว เนื่องจากได้มีการเขียนโค้ด HTML, CSS และ JavaScript แบบสำเร็จรูปรวมกันไว้เป็นชุดให้นักพัฒนาเว็บไซต์ได้ดาวน์โหลดไปใช้งานต่อได้เลย ซึ่งชุดโค้ดเหล่านี้จะทำหน้าที่ในการจัดวาง Layout ตัวอักษร ปุ่ม เมนู ฯลฯ นักพัฒนาก็แค่คัดลอกโค้ดส่วนที่ต้องการไปใช้ได้เลย เราเรียกชุดของโค้ดดังกล่าวนี้ว่า Front-end Framework

ตัวอย่างของ Front-end Framework ที่นิยมใช้งานกัน ได้แก่ Bootstrap, ZURB foundation เป็นต้น โดยในบทความถัดไปจะเป็นการแนะนำการพัฒนาเว็บไซต์ด้วย Bootstrap

January 10, 2015
วิธีใช้ Google Sheets สร้าง Account ใหม่ลงใน Sub Organization ของ GAFE
[บทความนี้ สำหรับผู้ที่มี GAFE Admin Privilege ขึ้นไป]
ในการสร้างบัญชีผู้ใช้ใหม่บน GAFE นั้นทำได้หลายวิธี ได้แก่
1. การสร้างทีละคนผ่าน Admin Console
2. การสร้างทีละหลายๆคนด้วย CSV File
3. การสร้างทีละหลายๆคนผ่าน Google Apps Directory Sync
เมื่อต้องการสร้างผู้ใช้จำนวนมาก เช่น 5,500 คน โดยต้องจัดแบ่งผู้ใช้ แยกลงไปในแต่ละ Sub Organization วิธีที่ 1. ทำได้แต่เป็นงานที่หนักมาก วิธีที่ 2. ทำไม่ได้ เพราะการใช้ CSV File ผ่าน Admin Console นั้นจะสร้างผู้ใช้รวมกันที่ Root Organization ไม่สามารถแยกลงไปใน Sub Organization ได้ ส่วนวิธีที่ 3. นั้นทำได้ แต่ต้องเข้าใจกระบวนการทำงานของ LDAP พอสมควร

ในบทความนี้ จะนำเสนอวิธีการที่ ทำได้ง่ายเหมือนการใช้ CSV แต่สามารถแยกลงไปใน Sub Organization ได้ ด้วย Google Sheets และ Google Apps Script ดังต่อไปนี้ (ขอยกตัวอย่างเพียง 5 Account เพื่อความสะดวก)
1. สร้าง Google Sheets แล้วใส่ข้อมูล email, firstname, lastname, OU, password, status
2. สร้าง Google Apps Scripts ใน Google Sheets นี้ ด้วยเมนู Tools > Script Editor … จากนั้นเลือก Blank Project แล้วกดปุ่ม Close
3. ตั้งชื่อโปรเจค AddMultiAccountToSubOU แล้วใส่โค๊ดดังนี้
4. ถ้าลอง Run เลย จะเจอ Error อย่างนี้
  คลิก Continue -> Accept -> Dismiss
  เพราะยังงไม่ได้ Enable API ไว้
5. เนื่องจากการสร้าง Account ต้องใช้สิทธิ์ของ Admin ขึ้นไป และต้องใช้ Admin SDK Directory API ด้วย วิธีการคือใช้เมนู Resources -> Advanced Google Services แล้วเลือก Admin Directory API เป็น On
6. จากนั้นคลิกที่ Google Developers Consol
  ที่ Admin SDK ให้เปลี่ยน ON
7. เมื่อ Run ใหม่ ก็จะได้ผลใน Google Sheets ตามภาพ
8. และจะสามารถสร้างผู้ใช้ได้ตาม Sub Organization ที่ต้องการ
หวังว่าจะเป็นประโยชน์ครับ
November 2, 2014
วิธีการใช้ Google Sheets เป็นระบบเฝ้าระวังเว็บไซต์ (Website Monitoring) จากภายนอกองค์กร
ในการเฝ้าระวังบริการเว็บไซต์ขององค์กร (Website Monitoring) ผู้ดูแลระบบมักจะจัดทำจากภายในระบบเครือข่ายขององค์กร แต่ไม่ได้เฝ้าระวังจากภายนอกระบบเครือข่ายขององค์กร ทำให้ไม่ทราบว่าภายนอกสามารถเข้าถึงเว็บไซต์ดังกล่าวได้หรือไม่
จาก “วิธีการใช้ Google Sheets เป็นฐานข้อมูล” ซึ่งได้กล่าวถึงพื้นฐานการพัฒนา Google Apps Script เพื่อใช้ต่อยอดความสามารถของ Google Sheets สามารถนำมาประยุกต์ใช้เพื่อเฝ้าระวังบริการเว็บไซต์จากภายนอกระบบเครือข่ายขององค์กรได้ (จาก Google Cloud Infrastructure เลยทีเดียว)

ขั้นตอนในการทำ
1. ในโปรเจค ProjectMyDB สร้างไฟล์ monitoring.gs ดังภาพ
2. ประกอบด้วย 3 ฟังก์ชัน คือ
  function check_website(url) { var response = UrlFetchApp.fetch(url, {muteHttpExceptions: true}); return response.getResponseCode(); } function doLog(timestamp, responseCode, timeDiff) { var ss = SpreadsheetApp.openByUrl('https://docs.google.com/a/psu.ac.th/spreadsheets/d/1HJmyqiBYC_AEATmdUWakLgHFyYGqSqeqSA8xEw-8o-c/edit'); SpreadsheetApp.setActiveSpreadsheet(ss); SpreadsheetApp.setActiveSheet(ss.getSheetByName("Log")); var activeSheet=ss.getActiveSheet(); activeSheet.appendRow([timestamp, responseCode, timeDiff]); } function getTime() { var startTime = new Date() ; var responseCode=check_website("http://www.psu.ac.th"); var endTime = new Date() ; var timeDiff = endTime-startTime; doLog(Utilities.formatDate(new Date(), "GMT+7", "yyyyMMdd-HHmmss") , responseCode , timeDiff); }
- check_website ใช้ UrlFetchApp เพื่อ url ของเว็บไซต์ แล้วรีเทิร์นผล Response Code ของ HTTP Protocol กลับไป
- doLog ใช้สำหรับเพิ่มค่า timestamp, responseCode และ timeDiff (เวลาในการตอบสนอง) ลงใน Sheet “Log” ใน Google Sheets ที่กำหนดไว้
- getTime ใช้คำนวนเวลาตั้งแต่เริ่มต้น แล้วเรียกใช้ฟังก์ชั่น check_website และ จับเวลาที่สิ้นสุด จากนั้นคำนวนเป็นเวลาในการตอบสนอง (timeDiff) แล้ว เรียกฟังก์ขัน doLog เพื่อเขียนข้อมูลต่อไป
1. สร้าง Trigger ด้วยเมนู Resources > Current project’s triggers
2. เลือกฟังก์ชัน getTime กำหนดเป็น Time-driven ทำงานในหน่วยนาที (Minute timmer) และ ทำงานทุกๆ 5 นาที แล้วกดปุ่ม Save
3. ผลการทำงาน และการสร้าง Chart ประกอบทำให้สามารถเห็นแนวโน้มได้
จากตัวอย่างข้างต้น ทำให้เห็นว่า การใช้ Google Apps Script ร่วมกับ Google Sheet สามารถสร้างระบบเฝ้าระวังเว็บไซต์จากภายนอกองค์กรได้อย่างง่ายๆ และไม่มีค่าใช้จ่าย ทำให้เห็นภาพการใช้งานจากภายนอกได้เป็นอย่างดี
October 11, 2014
วิธีการใช้ Google Sheets เป็นฐานข้อมูล
Google Sheets เป็นหนึ่งใน Google Apps ซึ่งเป็น Application Suite ของ Google ประกอบด้วย

ในการใช้งานทั่วไป Google Apps สามารถตอบสนองการใช้งานได้เป็นอย่างดี แต่เมื่อต้องการทำกิจกรรมบางอย่างที่นอกเหนือไปจากการใช้งานพื้นฐาน ผู้ใช้สามารถพัฒนาเพิ่มเติมได้เอง ด้วย Google Apps Script

Google Apps Script เป็น Scripting Language ที่อยู่บนพื้นฐานของภาษา JavaScript สามารถใช้งานได้และพัฒนาต่อยอดได้ทันทีโดยไม่ต้องติดตั้งอะไรเพิ่มเติมอีกแล้ว สามารถเรียกใช้ Google Service ต่างๆได้มากมาย รวมถึง Google Sheets เพื่อสร้าง เมนูพิเศษ หรือ Macro เพื่อให้การทำงานที่ทำหลายๆขั้นตอนลดลงเหลือเพียงแค่คลิกเดียว อีกทั้งยังสามารถตั้งเวลาให้ทำงานอัตโนมัติ หรือ ตั้ง Trigger เพื่อให้ทำงานเมื่อเกิด Action ต่างๆได้อีกด้วย

Google Apps Script มี 3 ชนิด ได้แค่ Standalone, Bound to Google Apps และ Web App ซึ่งจะสามารถใช้งานร่วมกับ Google Sites ได้อีกด้วย (Sites Gadget) รายละเอียดสามารถอ่านเพิ่มเติมได้ที่ Google Apps Script

ในที่นี้ จะแสดงตัวอย่างการประยุกต์ใช้ Google Apps Script แบบ Standalone เพื่อพัฒนาให้ Google Sheets ทำหน้าที่เป็นฐานข้อมูล และจะนำไปสู่การต่อยอดเป็น วิธีการใช้ Google Sheets เป็นระบบเฝ้าระวังเว็บไซต์ (Website Monitoring) จากภายนอกองค์กร เพื่อตรวจสอบระยะเวลาในการตอบสนอง ( Response Time) ของเว็บไซต์ ได้อีกด้วย

วิธีการใช้งาน Google Apps Script แบบ Standalone
1. ใน Google Drive คลิก New > More > Connect more apps
1. ในชื่อ search ใส่คำว่า script แล้วกด Enter
  จะพบ Google Apps Script แล้วกดปุ่ม Connect
2. จากนั้น ใน Google Drive ให้คลิกที่ New > More > Google Apps Script
3. จากนั้นให้คลิก Close ได้เลย
4. จะได้พื้นที่โปรเจค (Project) ในการพัฒนา Google Apps Script โดยในแต่ละโปรเจคจะประกอบไปด้วยหลายๆไฟล์ Google Apps Script ได้
ในการพัฒนา Google Apps Script นั้น จะต้องเขียนในรูปแบบของฟังก์ชั่น (Function) เพื่อให้สะดวกในการใช้งานต่างๆ

ตัวอย่างเช่น มี Google Sheets อยู่ใน Google Drive ดังภาพ

มีรายละเอียดดังนี้
1. ชื่อของ SpreadSheet คือ “ฐานข้อมูลของฉัน”
2. ประกอบไปด้วย Sheet ชื่อ “Sheet1” และ “Log”
3. มี URL คือ
  https://docs.google.com/a/psu.ac.th/spreadsheets/d/1HJmyqiBYC_AEATmdUWakLgHFyYGqSqeqSA8xEw-8o-c/edit
ต่อไปเป็นขั้นตอนการเขียน Google Apps Script เพื่อติดต่อกับ Google Sheet ข้างต้น เพื่อเขียนข้อมูลลงไป โดยตั้งชื่อโปรเจคนี้ว่า ProjectMyDB ตั้งชื่อไฟล์ว่า SheetDB.gs และตั้งชื่อฟังก์ชั่น “editSheet” ดังภาพ

ขั้นตอนการทำงานของฟังก์ชั่น editSheet
1. สร้างตัวแปร ss รับค่าจากการเปิด SpreadSheet จาก URL ข้างต้นด้วยคำสั่ง
```
var ss = SpreadsheetApp.openByUrl('https://docs.google.com/a/psu.ac.th/spreadsheets/d/1HJmyqiBYC_AEATmdUWakLgHFyYGqSqeqSA8xEw-8o-c/edit');
```
1. สั่งให้ SpreadSheet ดังกล่าว Active ด้วยคำสั่ง
```
SpreadsheetApp.setActiveSpreadsheet(ss);
```
1. เนื่องจากในแต่ละ SpreadSheet ประกอบด้วยหลาย Sheet จึงต้องระบุว่า จะทำงานกับ Active Sheet ชื่อ “Sheet1” ด้วยคำสั่ง
```
SpreadsheetApp.setActiveSheet(ss.getSheetByName("Sheet1"));
```
1. สร้างตัวแปร activeSheet เพื่อกำหนดว่ากำลังทำงาน Active Sheet ด้วยคำสั่ง
```
var activeSheet=ss.getActiveSheet();
```
1. เมื่อต้องการเขียนค่า “Hello World” ลงใน Active Sheet ที่ Cell “C3” ใช้คำสั่ง
```
activeSheet.getRange("C3").setValue("Hello World");
```
1. หากต้องการเขียนค่าทีละหลายๆ Cell หรือเป็น Range ต้องสร้างข้อมูลชนิด Array 2 มิติขึ้นมา แล้วจึงเขียนค่าลงไป กรณีต้องการใส่ค่าในช่วง “A1:C1” ใช้คำสั่ง
```
var values =[  ["คณกรณ์","หอศิริธรรม","'3720024"]  ];
activeSheet.getRange("A1:C1").setValues(values);
```
1. หากต้องการเขียนค่าในช่วง “A2:A4” ใช้คำสั่ง
```
values = [ ["เกรียงไกร"],["หนูทองคำ"],["'4220020"] ];
activeSheet.getRange("A2:A4").setValues(values);
```
1. เมื่อจะเก็บข้อมูลจริงๆ วิธีการข้างต้นจะไม่สะดวก เพราะจะต้องทราบว่าแถวสุดท้ายแล้วเพิ่มค่าแถวไปทีละหนึ่ง ซึ่งสามารถใช้วิธีการ Append Row กล่าวคือเขียนค่าลงไปในแถวถัดจากแถวล่าสุดที่มีข้อมูลได้ ในตัวอย่างนี้ จะสลับไปใช้ Sheet ชื่อ “Log” แล้วใส่ค่าลงไปด้วยคำสั่ง
```
SpreadsheetApp.setActiveSheet(ss.getSheetByName("Log"));
activeSheet=ss.getActiveSheet();
var timestamp = new Date();
activeSheet.appendRow([timestamp, 200 , 300]);
timestamp = new Date();
activeSheet.appendRow([timestamp, 200 , 456]);
```
จากนั้น Save ข้อมูล แล้วสั่ง Run โดยเลือกฟังก์ชั่นชื่อ editSheet ดังภาพ

ในการใช้งานครั้งแรก จะปรากฏหน้าต่าง Consent ขึ้นมาเพื่อขอสิทธิ์ในการเข้าใช้ไฟล์

ผลที่ได้จากการทำงานคือ

และ

จะเห็นได้ว่าสามารถใช้ Google Apps Script เพื่อเขียนค่าใน Google Sheets เพื่อเป็นฐานข้อมูลได้ และสามารถประยุกต์ใช้งานอื่นๆได้อีกมากมาย
October 10, 2014
ตั้งค่า php ให้แสดงข้อความ error

อาการปัญหา: นำโค้ดอัพโหลดขึ้นเครื่องเว็บเซิร์ฟเวอร์จริง ลองทดสอบการใช้งาน ปรากฎว่าเจอแต่หน้าว่างๆ ขาวๆ

ตอบ: เซิร์ฟเวอร์ปิดการทำงานการแสดงผลข้อความ error ต่างๆ ของ php เพื่อความปลอดภัย ต้องทำการเปิดก่อนที่ php.ini มีขั้นตอนดังนี้

(more…)

September 5, 2014