มาใช้ Git บน Virtual Studio 2013 กันเถอะ ตอนที่ 1

การทำ Source Control นั้นมีประโยชน์มากสำหรับนักพัฒนาโปรแกรม เพราะหากเกิดเหตุการณ์ที่ไม่คาดฝัน เช่น เครื่องคอมฯของเราพัง หรือ Source code หาย หรือ ต้องการ Source Code ในเวอร์ชั่นเดิมๆ กลับมา ฯลฯ  ถ้าเราไม่มี backup ไว้จะทำให้ชีวิตของเราลำบากมากที่สุด

ประโยชน์ของการทำ Source Control นั้นมีมากมาย สาธยายไปก็อาจไม่หมด ต้องลองใช้ดูจะติดใจกับความสามารถของมัน 

Source Control มีหลายอย่าง ตั้งแต่สมัย Source Safe ของ Microsoft  ไปเรื่อยจนถึง SVN และมาปัจจุบันที่นิยมกันมากที่สุด คือ Git

Git ถูกสร้างโดย Linus Torvalds ซึ่งเป็นผู้สร้างระบบปฏิบัติการ Linux นั่นเอง (อ่านความเป็นมาของ Git ได้ที่นี่) 

เอาล่ะทีเนี่ย พอจะเริ่มใช้ Git ก็เกิดคำถามต่อมาคือ ใช้ยังไงล่ะ :-|

ก่อนจะไปใช้งานกัน มารู้ก่อนว่า Git เนี่ยมันทำงานได้ 2 แบบ คือ Git local กับ Git server

โดยปกติ Git local เนี่ย หากเราติดตั้ง Git โดยการดาวน์โหลดจากเว็ป Git  เราก็สามารถใช้งานแบบ local ได้ทันที แต่การใช้แบบ local เนี่ยมันก็ยังไม่ได้มีประโยชน์ หากเครื่องของเราพังไป โค้ดเราก็หายไปอยู่ดี

นั่นไง เราก็ต้องเอาขึ้นไปที่ Server ด้วยสิ หากเราต้องการ Source code เราก็สามารถ Checkout โค้ดของเราออกมา ไม่ว่าเราจะอยู่ที่เครื่องใดก็ตาม เราก็สามารถ Checkout ได้ นี่แหละที่ทำให้เรามีสถานที่เก็บรักษาโค้ดของเราไว้แล้ว

ไปดูความสามารถของมันต่อได้ที่นี่ http://goo.gl/H7mOg3

เนื่องจาก Git นี้เป็น Open source ทำให้ Git Server โผล่ขึ้นมามายมายหลากหลายยี่ห้อให้ท่านเลือกสรรใช้งานกัน แต่ขอสรุปเจ้าหลักๆ ที่ใช้กันมาก ได้แก่

1. Github - ตัวนี้ยกให้เป็นดาวเด่นของวงการ Open Source เพราะใช้ฟรีแบบ Public แต่ เสียเงินถ้าจะใช้แบบ Private

2. Bitbucket - ตัวนี้หลังจากถูก atlassian ซื้อไป ทำให้หน้าตาสวยงามน่าใช้เป็นที่สุด ตัวนี้ใช้ฟรีแบบ Private แต่หากเสียตังค์จะสามารถ Public ได้
3. สำหรับผู้ที่ต้องการทำ Git Server ตั้งขึ้นเองในบริษัท เลือกใช้ Gitlab ก็ได้แต่ก็มีอีกหลายตัวให้ท่านเลือกใช้ ลองหาดูครับ

เอาล่ะ รู้จัก Git กันพอหอมปากหอมบ้างแล้ว ต่อไปจะเป็นการใช้งาน Git ร่วมกับ Visual Studio 2013

ติดตั้ง และ เตรียม sublime text 2

Sublime Text คือ Editor Tool สำหรับการเขียนโค้ดที่นิยมกันตัวนึง สามารถดาวน์โหลดได้ที่ http://www.sublimetext.com

หมายเหตุ : จะต้องติดตั้ง Git และ NodeJS ไว้ก่อนแล้ว

ให้ทำการดาวน์โหลด และติดตั้ง ขณะนี้เวอร์ชันที่เสถียรคือ เวอร์ชัน 2 

เมื่อติดตั้งเรียบร้อยแล้ว ต่อมาคือการติดตั้ง Package Control โดยไปยัง https://packagecontrol.io/installation 

ให้ เลือก Tab "SUBLIME TEXT 2" (แต่หากติดตั้งเเวอร์ชัน 3 ก็ให้เลือก Tab "SUBLIME TEXT 3")

ให้ copy โค้ด ตั้งแต่ "import urllib2,os ... Text to finish installation" ไปจนจบเก็บเอาไว้

เปิด Sublime Text ขึ้นมา ไปยัง เมนู "View" และ "Show Console"
จากนั้นวาง โค้ดที่ copy เอาไว้ลงไปตามรูป แล้วกด enter

จากนั้นกด ⇧⌘P (command+shift+P) และพิมพ์ว่า "Install Package" แล้วกด enter

พิมพ์ Package ที่ต้องการติดตั้ง เช่น Dayle Rees Color Schemes แล้วกด enter

• Dayle Rees Color Schemes   :  สำหรับเปลี่ยน Color Schemes ของ Sublime Text
• BraketHighighter : สำหรับช่วยบอก บล็อคของโค้ด เช่น ตำแหน่ง tag เปิดปิด ของ ที่ cursor เราชี้อยู่ เป็นต้น
• SublimeCodeIntel  : สำหรับ intellisence โค้ด html, javascript, PHP เป็นต้น (ชอบมาก) อีกทั้งยังทำให้เรากด control+click เพื่อไปยัง definition ได้ด้วย

• SublimeLinter  :  สำหรับช่วยบอกว่าโค้ดเราเขียนผิด
• HTML-CSS-JS Prettify : สำหรับช่วยจัดโค้ดให้เรียบร้อยด้วยการคลิก ⌃⇧H (control+command+H)
• Emmet  : เป็น code snippet ให้เราเขียนโค้ดได้ง่ายขึ้น
• jQuery  :  ช่วยเขียนโค้ด jQuery

Start Apache บน Mac Yosemite

บนเครื่อง Mac OS ปกติจะมีการติดตั้ง Apache Web Server และ php ไว้ให้เป็นดีฟอลท์อยู่แล้ว  แต่เราจะต้องเรียกเปิดใช้งานเอง
ขั้นตอนการและใช้งาน และตั้งค่ามีดังนี้

เปิด Terminal

สร้างไฟล์ config ของ user ที่เข้าใช้เครื่อง Mac ตัวอย่างของผมคือ noom ด้วยคำสั่ง

sudo nano /etc/apache2/users/noom.conf

อย่าลืมเปลี่ยนชื่อ noom.conf เป็นชื่อ user ของตัวเองด้วย

พิมพ์ค่า config ลงไปในไฟล์ noom.conf แต่ต้องเปลี่ยนชื่อ noom เป็น user ของตัวเอง

<Directory "/Users/username/Sites/">
     AllowOverride All
     Options Indexes MultiViews FollowSymLinks
     Require all granted
</Directory>

กดปุ่ม control+o และ enter เพื่อ save
กดปุ่ม control+x เพื่อออกจาก nano

เมื่อสร้างไฟล์ noom.conf เสร็จแล้ว ต่อไป เป็นการแก้ไข apache config
เริ่มจาก backup ไฟล์ httpd.conf ไว้ก่อน ด้วยคำสั่ง

cp /etc/apache2/httpd.conf httpd.conf.bak

เปิดไฟล์ httpd.conf ด้วย nano

sudo nano /etc/apache2/httpd.conf

นำเครื่องหมาย # ออกจากข้อความเหล่านี้

LoadModule userdir_module libexec/apache2/mod_userdir.so

LoadModule alias_module libexec/apache2/mod_alias.so

LoadModule rewrite_module libexec/apache2/mod_rewrite.so

LoadModule php5_module libexec/apache2/libphp5.so

จากนั้น แก้ไข user และ group โดย remark ของเดิมด้วย # จากนั้นใส่

User  noom
Group staff 

ยังอยู่ในไฟล์ httpd.conf เอา # ออกจากบันทัดนี้

Include /private/etc/apache2/extra/httpd-userdir.conf

กด control+o และ control+x

จากนั้นไปยัง httpd-userdir.conf ด้วยคำสั่ง

sudo nano /etc/apache2/extra/httpd-userdir.conf  

เอา # ออกจาก

Include /private/etc/apache2/users/*.conf

กด control+o และ control+x


สร้างโฟลเดอร์ site ด้วยคำสั่ง

mkdir ~/Sites/

ทดลองสร้างไฟล์ php ด้วยคำสั่ง

echo "<? php phpinfo(); ?>" >  ~/Sites/phpinfo.php

เปิด Apache ด้วยคำสั่ง

sudo apachectl restart

ลองเข้าด้วย http://localhost/  จะเป็นหน้าดีฟอลท์ของ Apache ขึ้นว่า It works!
โฟลเดอร์ที่เก็บอยู่ที่ ~/Library/WebServer/Documents/

จากนั้นลองเปิด http://localhost/~noom/phpinfo.php   **เปลี่ยน ~noom เป็น user ของตัวเองด้วย
จะแสดงข้อมูลของ php ที่เราเรียกจากฟังก์ชั่น phpinfo();

จากนี้เครื่อง Mac ของคุณ ก็พร้อมที่จะเขียน php web application แล้วครับ

Create WCF Service for Ajax jQuery (Part1)

ผมทำสรุปขั้นตอนการสร้าง WCF Service เพื่อให้เรียกใช้งานจาก Ajax jQuery เอาไว้ เพื่อนๆ ที่สนใจสามารถดูรายละเอียดได้จาก link ด้านล่างครับ

Create WCF Service for Ajax jQuery (Part1)

ASP.NET - การจัดเก็บและเรียกรูปภาพจากฐานข้อมูล MS SQL Server

ผมได้ทำโปรแกรมตัวอย่างการจัดเก็บไฟล์ และเรียกไฟล์รูปภาพออกมาแสดง โดยโปรแกรมมีคุณสมบัติในการอัพโหลดไฟล์รูปภาพจากเครื่อง Client ขึ้นไปยัง Web Server 2 แบบ คือ

แบบที่ 1 - โปรแกรมจะจัดเก็บไฟล์รูปภาพลงฐานข้อมูล MSSQL และดึงข้อมูลจากฐานข้อมูลไปแสดงรูปภาพบนหน้า Web
แบบที่ 2 - โปรแกรมไม่ได้จัดเก็บไฟล์ลงฐานข้อมูล แต่จะนำไปแสดงบนหน้า Web

( ดาวน์โหลด ซอร์สโค้ด ได้ที่นี่ครับ https://github.com/noomdev/StoreImageDB )

เมื่อได้ดาวน์โหลดไฟล์ source code มาแล้ว จะต้องเปิดไฟล์ด้วย MS Visual Studio 2010 ขึ้นไป (ผม dev ด้วย Web Developer 2010 Express) ครับ


ก่อนอื่น เราจะต้องมีฐานข้อมูลที่จัดเก็บไฟล์รูปภาพ โดยเราจะเลือกจัดเก็บเป็นแบบ varbinary(max)




ทดลองรันโปรแกรม จะเข้าหน้า default.aspx

ตัวอย่างการทำงานของแบบที่ 1

    ให้กดปุ่ม Browse เพื่อเลือกไฟล์รูปภาพ (jpg) จากเครื่อง client จากนั้นกดปุ่ม "Upload & Save Picture"

    เมื่อกดปุ่มเสร็จแล้ว โปรแกรมจะทำงานดังนี้

1. อัพไฟล์รูปภาพจากเครื่อง Client ขึ้น Web Server 
2. แปลงไฟล์รูปภาพ ไปเป็น byte[] แบบ array
3. บันทึกเข้าฐานข้อมูล
4. เรียกข้อมูล จากฐานข้อมูล มาเป็น byte[]
5. นำ byte ไป content เป็น image/jpg และแสดงผลลงใน Image1 Control

    ผลลัพธ์จากการทำงานทั้งหมด

 
เมื่อดูในตารางจะพบข้อมูล จัดเก็บอยู่

ตัวอย่างการทำงานของแบบที่ 2

    ให้กดปุ่ม Browse เพื่อเลือกไฟล์รูปภาพ (jpg) จากเครื่อง client จากนั้นกดปุ่ม "Upload & Save Picture"

เมื่อกดปุ่มเสร็จแล้ว โปรแกรมจะทำงานดังนี้

1. อัพไฟล์รูปภาพจากเครื่อง Client ขึ้น Web Server 
2. แปลงไฟล์รูปภาพ ไปเป็น byte[] แบบ array
3. ส่ง byte[] ไปยัง การแสดงผลรูปภาพทันที

ผลลัพธ์จากการทำงาน

** เทคนิค **

ในการแสดงผลรูปภาพทาง Image1 Control นั้น ผมได้ใช้การอ้างไปยัง "Image.aspx" อีกทีเพื่อทำการแปลง byte[] ไปเป็น Response.OutputStream และส่งกลับไปยัง default.aspx เพื่อแสดงรูปบน Image1 โดยโคิดส่วนที่สำคัญ คือ การใช้ MemoryStream ในการอ่าน byte[] และ ส่งไปยัง Image Object และให้ Image Object ทำการ Save ไฟล์แบบ Response.OutputStream 

////////////  NoooM  ////////////