Tag: web application development

  • วิธีการ set property ของ radio button ใน Dojo

    sirima.sa

    เนื่องจากช่วงนี้ ผู้เขียนมีโอกาสได้เข้ามาอยู่ในแวดวงของ Dojo และได้ประสบกับปัญหาในการที่จะ set property ของ Dojo ซึ่งในที่นี้คือ Radio Button หลังจากที่ได้ลองผิด ลองถูก Error กันหัวหมุน  จนสุดท้ายได้เจอทางออก  เลยอยากจะบันทึกไว้สำหรับตัวเองมาดูในอนาคต และเผื่อท่านอื่นที่ประสบปัญหาเดียวกัน มาเจอจะได้ลองนำไปใช้งานกันดูค่ะ Let’s GO!!!

     

    เนื่องจาก Radio Button เป็น Control ภายใต้ dijit/form/RadioButton ดังนั้น การเขียนคำสั่งเพื่อ set property จึงได้เป็นดังนี้

    dijit.byId(‘control_id‘).set(‘control_prop‘, value);

    control_id : id ของ control นั้น ๆ

    control_prop : property ของ control ที่ต้องการกำหนดค่า

    value : ค่าที่ต้องการกำหนด

     

    ตัวอย่างเช่น ต้องการกำหนดให้ radio button ที่มี id=”rdBtn1″ ไม่สามารถใช้งานแต่ยังแสดง(disable) และ

    id=”rdBtn2″ มีค่าโดยปริยายเป็นเลือกไว้ จะเขียน Code ได้ดังนี้

    dijit.byId(‘rdBtn1’).set(‘disabled’, true); 

    dijit.byId(‘rdBtn2’).set(‘checked’, true); 

     

    ซึ่ง properties ของ control ต่าง ๆ สามารถดูเพิ่มเติมได้จากเว็ปเพจของ Dojo ตามลิงค์นี้ค่ะ Dojo Documentation

    หวังว่าบทความนี้จะเป็นประโยชน์แก่ท่านผู้อ่านไม่มาก็น้อยนะคะ แล้วพบกันใหม่ตอนหน้าค่ะ 

  • Short Note on Workshop “Web Application Development Workflow”

    wiboon.w

    ผมชวนเพื่อนๆ CoP PSU IT ซึ่งเป็นรุ่นน้องชื่อคุณราชศักดิ์ บูรณะพาณิชย์กิจ และพัฒนาวดี ศิวติณฑุโก อยู่ที่คณะวิศวกรรมศาสตร์ มาจัด Workshop ใช้เวลา 1 วัน เรื่อง Web Application Development Workflow
    git.6

    วิทยากรเตรียม slide ที่นี้ครับ http://bratchasak.github.io/slide/
    คร่าวๆ คือ แนะว่า Web Application Development Workflow คืออะไร อธิบายว่าขั้นตอนของการพัฒนาและเครื่องมือที่ใช้ในการทำงาน ก็คือ Chrome Browser และ Sublime Text และติดตั้งโปรแกรม Git ใช้งานแบบ command line และ github for Windows แบบ GUI และสมัครบริการที่จำเป็นต้องใช้ก็คือ GitHub web เครื่องมือทั้งหมดนี้ก็จะสร้างระบบ Version control สำหรับการพัฒนาด้วย Git ได้แล้ว

    การเตรียมเครื่องมือสำหรับทำงาน
    1.เกี่ยวกับ Chrome Browser (google chrome)
    ต้องลงชื่อเข้าใช้ google เพื่อทำงานได้ครบทุก Feature
    เข้าเว็บหน้านี้ https://www.google.com/intl/th/chrome/browser/ จะเห็นตัวอย่างชัดๆในการตรวจสอบด้วย Developper Tools
    เปิดหน้าต่าง Developper Tool ด้วย Ctrl+Shift+i
    คลิกเลือกไอคอน แว่นขยาย เพื่อส่องดูโค้ดได้
    นอกจากนี้ก็มีแท็บน่าสนใจคือ แท็บ Console สำหรับ debug และ แท็บ Network สำหรับดู latency load time

    เปิดดูการทำงาน เมนูที่ใช้ใน workshop คือ คลิกปุ่มกำหนดค่าและควบคุม (มุมบนขวา) > เครื่องมือ > ตัวจัดการงาน

    ติดตั้งส่วนขยาย LiveReload
    www.google.com > search คำว่า livereload > เลือก Chrome Web Store – LiveReload
    คลิกปุ่มกำหนดค่าและควบคุม (มุมบนขวา) > เครื่องมือ > ส่วนขยาย > เลือกตัวเลือก อนุญาตให้เข้าถึงไฟล์ URL

    2. ติดตั้งโปรแกรม Sublime Text 3 for Windows
    git.5
    www.google.com > search คำว่า sublime
    เลือกเวอร์ชั่นให้ตรงกับ Windows OS ที่ใช้
    ตาม slide หน้านี้ http://bratchasak.github.io/slide/#sublimetext_package

    ติดตั้ง package เพิ่มลงใน Sublime
    กดแป้น Ctrl+Shift+p > search คำว่า package > เลือก Package Control: Install Package
    > search คำว่า emmet > คลิกเลือก emmet
    > search คำว่า livereload > คลิกเลือก LiveReload
    > search คำว่า syntax คลิกเลือก Syntax Manager

    ต่อมา วิทยากรอธิบาย Software configuration management ว่ามี 3 model คือ Local data model, Client-server model และ Distributed model เช่น Git
    “Git is a free and open source distributed version control system.”
    git.2

    3. ติดตั้ง Git
    เข้าไปเว็บไซต์ http://git-scm.com/ และดาวน์โหลดเวอร์ชั่นสำหรับวินโดวส์ จะได้ไฟล์ Git-1.9.0-preview20140217.exe
    คลิก Run เพื่อติดตั้ง แต่ไม่คลิก Next ทั้งหมด
    ในหน้า Select Components เลือก Simple context menu
    ในหน้า Adjusting your PATH environment เลือก Run Git from the Windows Command Prompt
    ในหน้า Configuring the line ending conversions เลือก Checkout Windows-style,commit Unix-style line endings

    ต่อจากนั้น วิทยากรอธิบายเกี่ยวกับ Git – File Status Lifecycle
    ดูที่ http://bratchasak.github.io/slide/#gitstatus
    git.1

    เริ่มต้นเข้าสู่การใช้งาน Git
    แบบที่ 1 เรียนรู้การทำงานในแบบ command line
    สร้างโฟลเดอร์ที่จะเป็น Repository (ก็คือ project)
    คลิกปุ่ม Start > พิมพ์ cmd
    cd \
    mkdir test
    cd test
    git init
    จะเกิดโฟลเดอร์ชื่อ .git

    ตรวจสอบสถานะ
    git status

    เริ่มต้นด้วยการกำหนดชื่อ identity เจ้าของ repository
    git config –global user.name “Wiboon Warasittichai”
    git config –global user.email “wiboon080808@gmail.com”

    ตรวจสอบรายการในไฟล์ config
    git config –list

    นำไฟล์ index.html เข้าใน project หรือเรียกว่า repository
    git add index.html

    เปลี่ยนเข้าสู่สถานะ staged
    git commit -m “initial commit”

    ตรวจดูรายการแก้ไข
    git log
    หรือ
    แสดงผลแบบ 1 บรรทัดพร้อมด้วยตัวชี้(pointer)
    git log –graph –decorate –all –pretty –oneline

    การแตก branch เพื่อใช้ทำงานเขียนโปรแกรม แทนการแก้ไขที่ master
    git branch feat_test

    เข้าแก้ไขใน branch
    git checkout feat_test

    เปิดหน้า sublime แล้วลองเพิ่ม 1 บรรทัดลงใน index.html

    ต่อไปทำซ้ำรอบในการทำงาน คือนำไฟล์ index.html เข้าใน project (จะเรียกว่า repository)
    git add index.html

    เปลี่ยนเข้าสู่สถานะ staged อีกครั้งแต่รอบนี้เป็นการแก้ไขที่ branch
    git commit -m “1st edit – add 1 line”

    แสดงผลแบบ 1 บรรทัดพร้อมด้วยตัวชี้(pointer)จะเห็นว่า pointer อยู่ที่ branch ชื่อ feat_test
    git log –graph –decorate –all –pretty –oneline

    กลับไปที่ master
    git checkout master

    ดูที่ sublime text editor จะเห็นว่าเป็น index.html ก่อนการเพิ่มอีก 1 บรรทัด
    (แสดงผลที่แตกต่างทันทีจากที่เพิ่ม package ชื่อ LiveReload ลงใน sublime text)

    ต้องการ merge ไฟล์ index.html ของ branch ชื่อ feat_test เข้ากับ branch ชื่อ master
    git merge feat_test

    ตรวจสอบสถานะ
    git status

    สมัครสมาชิก GitHub web เพื่อใช้เป็นที่เก็บ repository ของเราเพื่อเผยแพร่สาธารณะ
    เข้าไปที่ https://github.com/
    git.3

    แบบที่ 2 เรียนรู้การใช้งาน Git แบบ GUI
    git.4
    ต่อไปจะเป็นการใช้ GitHub for Windows (เรียกว่า Client) ให้ดาวน์โหลดที่นี่ http://windows.github.com
    ติดตั้งใช้เวลานิดนึง เพราะไฟล์ขนาด 41.8MB เมื่อเสร็จจะมีหน้าต่าง Welcome เพื่อให้ login
    ก็ใส่ e-mail และ password ที่สมัคร
    ต่อไปจะอยู่ที่ขั้นตอน configure ให้คลิก Next
    อยู่ที่ขั้นตอน repositories ให้คลิก dashboard
    จะเปิดหน้าต่าง ให้เราลาก โฟลเดอร์ชื่อ test มาใส่ที่ local – repositories
    แล้วคลิกลูกศรชี้ขวาที่บรรทัด test จะเป็นคำว่า Open this repo
    คลิก publish
    เมื่อมีการแก้ไข branch master หรือ branch feat_test ก็คลิก Sync

    ในทางกลับกัน หากสร้าง repository จากหน้า GitHub web ก็สามารถ clone ลงไปที่ Windows ได้เช่นกัน
    กลับไปที่ GitHub web โดยเข้าไปที่ https://github.com/
    คลิก New repository
    ตั้งชื่อ Repository name ตั้งว่า ztest แล้วคลิก Create repository
    คลิกปุ่ม Set up in Desktop มันจะมาสร้างไดเรกทอรีที่ c:\My Documents\GitHub\ztest
    Google chrome จะถามอะไรสักอย่าง ก็ให้ตอบ “เปิดใช้งานแอปพลิเคชัน”
    เราก็เริ่มทดสอบสร้างไฟล์ my.html ไว้ที่นี่ แล้ว publish กลับไปที่ GitHub web ได้เมื่อต้องการ

    เรื่องสุดท้าย GitHub – Features อันแรก Collaborators คือ การอนุญาต user บน GitHub ให้ร่วมแก้ไขไฟล์ด้วยกันได้ และอีกอัน Fork & Pull Request คือ เอาไปทั้งหมดแยกกันไปทำแล้วค่อยมารวม และ GitHub Pages คือ การสร้าง web page บน GitHub

    การสร้าง web page บน GitHub ทำดังนี้
    หากเราสร้าง repository ด้วยการตั้งชื่อด้วยข้อความ username.github.io ก็จะได้ web page ไว้ใช้งานด้วย
    ซึ่งสร้างอย่างง่ายๆด้วย Automatic Page Generator (https://help.github.com/articles/creating-pages-with-the-automatic-generator) หลังจากสร้างเสร็จต้องรอ 10 นาที web page ก็จะใช้งานได้
    ทดสอบด้วยการพิมพ์ว่า http://username.github.io ตัวอย่างเช่น http://wiboon.github.io/

    ทั้งหมดนี้ผมก็ฟังไปจดไปในกระดาษ แล้วก็กลับมาลองทำเองดูในวันนี้ แล้วก็เขียนลง sysadmin blog ที่นี้ไว้เผื่อเพื่อนๆด้วยครับ