Month: January 2015

  • เทคนิคการเพิ่ม user ในระบบ linux คราวละมากๆ

    มีผู้สนใจ linux ได้สอบถามเข้ามาทางอีเมลว่า จะเพิ่ม user ในระบบ linux คราวละมากๆ พอจะมี shell scripts ให้นำไปใช้งานหรือเปล่า ผมก็มีอยู่แล้ว แต่ก็ปรับแต่งเล็กน้อย

    shell script นี้มีดังนี้
    1. makeusername.sh เพื่อสร้างไฟล์รายชื่อตามจำนวนที่ต้องการ เลขเริ่มต้น min และสิ้นสุด max
    2. bulkuseradd.sh เพื่อเพิ่ม user และ password แบบ random และสร้างไฟล์ .csv เก็บ user:password นำไปพิมพ์แจก user ได้
    3. bulkuserdel.sh เพื่อลบ user

    ผมเขียนไว้ในเว็บไซต์ opensource.cc.psu.ac.th หัวข้อ เทคนิค+scripts (
    http://opensource.cc.psu.ac.th/เทคนิคการเพิ่ม_user_ในระบบ_linux_คราวละมากๆ)

  • วิธีการติดตั้ง CA Certificate PSU Passport บน Ubuntu Server

    ทดสอบบน : Ubuntu 14.04

    ขั้นตอนการติดตั้ง Certificate บนเครื่อง Ubuntu Server

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

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

    3. ในหน้าต่าง Download a CA Certificate ให้ทำการ Download ไฟล์ดังรูป (เลือกดี ๆ นะครับ เลือก Base 64 ไม่ใช่ DER)2015-01-27_153731

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

    5. เมื่อดูข้อความในไฟล์จะได้ประมาณรูปนี้ (ที่เป็นแถบขาว คือ Sensor ครับ :P)2015-01-27_153759

    6. ทำการ copy ข้อความในไฟล์ certificate ไปยัง folder เก็บ certificate ดังนี้

    sudo sh -c 'cat certnew.cer > /etc/ssl/certs/psucer.crt'
    

    7. ทำการแก้ไขไฟล์ /etc/ldap/ldap.conf ดังนี้

    #TLS_CACERT /etc/ssl/certs/ca-certificates.crt
    TLS_CACERT /etc/ssl/certs/psucer.crt
    

    *หมายเหตุ จริง ๆ แล้วมีอีกวิธีคือข้ามการ Check Certificate ไปเลย โดยจะเพิ่มข้อความ TLS_REQCERT never ท้ายไฟล์ /etc/ldap/ldap.conf ก็ได้ดังนี้

    sudo sh -c 'echo "TLS_REQCERT never" >> /etc/ldap/ldap.conf'

    แต่วิธีนี้อาจจะไม่ปลอดภัยครับ เพราะอาจเจอ phising site ที่ปลอม server เข้ามาสวมรอยได้ครับ เพราะไม่ได้มีการ verify certificate ว่า server เป็นตัวจริง

  • 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 (กำลังดำเนินการ)
    บทความเพิ่มเติม
    ยังไม่มี
  • วิธีการติดตั้ง 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….. ดังรูป1

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

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

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

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

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

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

    4. เพิ่มข้อความในไฟล์ ldap.conf ดังนี้

    TLS_CACERT c:\openldap\sysconf\certnew.pem
    

    5. จากนั้นทำการ Restart เครื่องเป็นอันจบ

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

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

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

    3. เลือก Computer Account
    cerpsu03

    4. เลือก Local computer
    cerpsu04

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

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

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

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

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

    เป็นอันเสร็จครับ ^ ^

  • วิธีตรวจสอบเว็บไซต์ที่โดน Hack #16

    ShellShock หรือในอีกชื่อคือ Bashdoor (เลียนเสียง Backdoor) ซะงั้น เป็นช่องโหว่ใน Shell ที่ใช้กันทั่วไปในตระกูล *NIX ทั้ง UNIX, Linux รวมถึง Mac OS X[1] ด้วย โดยอาศัยความสามารถในการเขียน Function ใส่ใน Environment Variable ได้ โดยไม่มีการตรวจสอบข้อมูลที่แถมมาทำให้สามารถแทรกคำสั่งของระบบปฏิบัติการได้

    ช่องโหว่นี้เริ่มประกาศเป็น CVE-2014-6271[2] โดย Bash Shell ที่ได้รับผลกระทบเริ่มตั้งแต่รุ่น 1.14.0 ถึง 4.3 ย้อนกลับไปตั้งแต่ปี 1999 กันเลยทีเดียว !!  มีผลกระทบกับ CGI-base Web Server (ได้แก่ Apache), OpenSSH Server, DHCP Clients และ Qmail Server โดยเป็น Bug ตาม CWE 78[3] Improper Sanitization of Special Elements used in an OS Command (‘OS Command Injection’)

    วิธีตรวจสอบ Bash Version ใช้คำสั่ง

    bash --version

    หากพบว่า ต่ำกว่า 4.3 ก็ให้ลองคำสั่งต่อไปนี้

    env x='() { :;}; echo Vulnerable' bash -c 'echo Hello World'

    ถ้าตอบมาว่า

    Vulnerable
    Hello World

    ก็แสดงว่า เป็นเครื่องนี้มีช่องโหว่ครับ

    อธิบายเพิ่มเติม

    1. คำสั่งในการสร้าง Environment Variable คือ

    env x=' … '

    โดยในที่นี้จะมีตัวแปร x เป็น Environment Variable

    2. ต่อมา ในตัวแปร x สามารถสร้าง Function ได้ ในรูปแบบ

    env x='() { :;};'

    ภายใน { } จะใส่คำสั่งอะไรก็ได้ แต่ในตัวอย่างนี้ เครื่องหมาย : มีความหมายเหมือนกับ true อะไรทำนองนั้น

    3. ปัญหาอยู่ตรงที่ว่า Bash Shell ที่มีปัญหา ไม่ได้ตรวจสอบว่า Environment Variable ที่สร้างแบบ Function นี้ สิ้นสุดแค่การสร้าง function ทำให้สามารถแทรกคำสั่งเพิ่มเติมได้ หลังเครื่องหมาย ;

    env x='() { :;}; echo Vulnerable'

    ลองใช้คำสั่ง

    env x='() { :;}; cat /etc/passwd'

    จะแสดงตัวแปร Environment Variable ทั้งหมด และพบตัวแปร x มีค่าเป็น function อยู่ แต่จะยังไม่มีอะไรเกิดขึ้น

    4. แต่เมื่อมีการเรียก Bash Shell ทำงาน ด้วยคำสั่ง

    env x='() { :;}; echo Vulnerable' bash -c 'echo Hello World'

    ก็จะเป็นการเรียกคำสั่งในตัวแปร x ออกมาด้วยนั่นเอง

    กรณีผลกระทบของ DHCP Client คือ ถ้าเครื่อง DHCP Server ตัวอย่างเช่น dnsmasq[4] สามารถตั้งค่า dhcp-option-force ซึ่งจะส่งคำสั่งไปยัง DHCP Client ที่ใช้ Bash Shell ทำงานตามต้องการได้ เช่น

    dhcp-option-force=100,() { :; }; echo ‘You are going to be shocked..ShellShock !!!’>/tmp/

    ในส่วนของ Web Security หากติดตั้ง Apache [5]และใช้งาน CGI บนเครื่องที่มี Bash Shell ที่มีช่องโหว่นี้ ก็จะเกิดปัญหา โดยอาศัยตัวแปร Agent String วิธีการทดสอบมีดังนี้

    1. ที่เครื่องเว็บเซิร์ฟเวอร์ที่มี Apache และใช้งาน CGI มี test.cgi ง่ายๆดังนี้

    #!/bin/bash
     echo "Content-type: text/plain"
     echo
     echo
     echo "Hi"

    2. ถ้าเรียกผ่าน Web Server มี IP Address เป็น 192.168.56.101 และจะเรียก URL ของ CGI ดังนี้

    http://192.168.56.101/cgi-bin/test.cgi
    

    การเรียกผ่าน Web Browser ก็จะทำงานตามปรกติ

    3. แต่ถ้าใช้ wget ผ่านทาง command linet ไป โดยกำหนด option -U เพื่อบอกว่า Agent String ที่ติดต่อไปคืออะไร ก็จะสามารถแทรกคำสั่งเพิ่มเติมได้ เพราะ Apache CGI ใช้ Bash Shell ในการทำงานนี้ เช่นใช้คำสั่ง

    wget -U "() { :;};echo \"Content-type: text/plain\"; echo; echo; /bin/cat /etc/passwd" http://192.168.56.101/cgi-bin/test.cgi

    คำสั่งนี้ จะติดต่อไปยัง Web Server โดยแทนที่จะบอกว่าติดต่อไปจาก Agent อะไรธรรมดาๆ ก็จะแทรก Shell เข้าไปด้วย โดยตัวอย่างนี้ จะได้ /etc/passwd ออกมา เก็บไว้ที่เครื่อง ชื่อไฟล์ test.cgi

    ดังนั้น รีบ Patch ซะ

    ขอให้โชคดี


    [1] “Shellshock (software bug) – Wikipedia, the free encyclopedia.” 2014. 20 Jan. 2015 <http://en.wikipedia.org/wiki/Shellshock_(software_bug)>

    [2] “CVE-2014-6271 – CVE Details.” 2014. 20 Jan. 2015 <http://www.cvedetails.com/cve/CVE-2014-6271/>

    [3] “CWE – CWE-78: Improper Neutralization of Special …” 2006. 20 Jan. 2015 <http://cwe.mitre.org/data/definitions/78.html>

    [4] “shellshock dhcp exploitation – Security StackExchange.” 2014. 20 Jan. 2015 <http://security.stackexchange.com/questions/68877/shellshock-dhcp-exploitation>

    [5] “What is a specific example of how the Shellshock Bash bug …” 2014. 20 Jan. 2015 <http://security.stackexchange.com/questions/68122/what-is-a-specific-example-of-how-the-shellshock-bash-bug-could-be-exploited>

  • ทำความรู้จักกับ 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 จะพบว่ามีโครงสร้างไฟล์ดังนี้

    file_structure

    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 ซึ่งมีเทมเพลตพื้นฐานดังรูป

    basic template

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

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

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

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

     

     

     

  • การทำ Wireframe

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

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

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

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

    wireframe

    หรือจะใช้โปรแกรมคอมพิวเตอร์ช่วยในการทำก็ได้แล้วแต่ความถนัดของแต่ละคน ซึ่งโปรแกรมคอมพิวเตอร์ที่ช่วยในการทำ 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 ซึ่งเท่าที่เคยได้ลองเล่นดูพบว่าเป็นโปรแกรมที่น่าสนใจ มีเครื่องมือให้ใช้ค่อนข้างครบถ้วน และที่สำคัญคือใช้งานได้ฟรีไม่มีค่าใช้จ่าย

     

  • Mozilla Thunderbird & Google Calendar

    1. ติดตั้ง extension 2 ตัวใน Thunderbird ได้แก่ Lightning และ Provider for Google Calendar ดังรูป

    Screenshot from 2015-01-12 13:55:01
    extension; lightning, Provider for Google Calender

    2. รีสตาร์ท Thunderbird จะพบปุ่ม Screenshot from 2015-01-12 13:47:30 อยู่ทางมุมบนขวา
    3. เข้า gmail.psu.ac.th ล็อคอินให้เรียบร้อย คลิก  Screenshot from 2015-01-12 14:25:17 แล้วเลือก Calendar
    4. ที่หน้า Calendar คลิก Screenshot from 2015-01-12 13:42:32 เลือก Setting

    5. คลิก Calenders ทีี่มุมซ้ายบน Screenshot from 2015-01-12 13:43:43

    6. เลือกปฏิทินที่ต้องการ

    Screenshot from 2015-01-12 13:44:58
    Available Calendar

    7. ตรวจสอบว่าใช่ปฏิทินที่ต้องการหรือไม่ดูที่ ช่อง Calender Owner ว่าเป็นอันเดียวกับ Username ที่ล็อคอินเข้า gmail

    Screenshot from 2015-01-12 13:45:26
    Calendar Owner

    8. เลื่อนดูด้านล่างในส่วนของ Private Address:

    Screenshot from 2015-01-12 13:45:49
    Private Address

    9. คลิกขวาที่ ICAL เลือก Copy Link Location

    Screenshot from 2015-01-12 13:47:1010. กลับมาที่ Thunderbird กดปุ่ม Screenshot from 2015-01-12 14:37:32 เพื่อเปิดปฏิทิน
    11. คลิกขวาที่ช่องว่างฝั่งซ้ายมือใต้คำว่า Calendar เลือก New Calendar

    Screenshot from 2015-01-12 13:48:07
    New Calendar

    12. ได้หน้าต่าง Create New Calendar เลือก Google Calendar กด Next

    Screenshot from 2015-01-12 13:56:5913. กด Ctrl-v เพื่อ paste URL ของปฏิทินที่ Copy มาในข้อก่อนหน้า

    Screenshot from 2015-01-12 13:57:2114. กด back 1 ครั้งแล้วกด Next ใหม่ (อันนี้น่าจะเป็นบักของ Ubuntu 14.10)

    Screenshot from 2015-01-12 13:57:3915. กด Next
    16. จะมีหน้าต่างเพื่อยืนยันตัวตนของ Google ปรากฎขึ้นมา

    Screenshot from 2015-01-12 14:00:1217.  กด Sign in จะได้อีกหน้าต่างดังรูป กดยอมรับ

    Screenshot from 2015-01-12 13:59:0518. จะมีหน้าให้เลือกปฏิทินที่ต้องการอีกครั้งกด Next

    Screenshot from 2015-01-12 13:59:30
    Lacate your calendar

    19. จะมีหน้าให้ ยืนยันตัวตน และหน้าเพื่อขอสิทธิ์การเข้าถึง อีกรอบกดให้ Sign in และยอมรับ

    20. กด Finish

    Screenshot from 2015-01-12 14:00:3721. ก็จะได้ปฏิทินเพิ่มมาตามต้องการ

    Screenshot from 2015-01-12 14:51:2822. ทั้งหมดนี้ทำบน Ubuntu 14.10 บน Windows ก็น่าจะทำเหมือนกัน
    23. สามารถเพิ่มลบเหตุการณ์ผ่าน Thunderbird ได้เลยไม่ต้องเข้าเว็บอีก …
    24. จากที่ทดสอบหนึ่ง Profile ของ Thunderbird สามารถมี Google Calendar ได้เพียง account เดียว
    25. ขอให้สนุกครับ

  • เตรียมความพร้อมก่อนการพัฒนา 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