การพัฒนา ASP.NET Web Application – Page 9

ASP.NET MVC Part3: สร้าง Model ด้วย Entity Framework

January 15, 2016 14:00

จากบทความก่อนหน้า ซึ่งอาจจะนานมากพอสมควรที่ได้แนะนำ MVC ไปไว้แล้วในเบื้องต้น (ASP.NET MVC Part 1 : ทำความรู้จักกับ ASP.NET MVC และ ASP.NET MVC Part2: เริ่มต้นสร้างเว็บด้วย MVC with Bootstrap) บทความนี้จะมาแนะนำในส่วนของการสร้าง Model ในการเชื่อมต่อกับฐานข้อมูล ในการ query และจัดการกับข้อมูล เพื่อส่งให้กับ Controller และ View เรียกใช้ในลำดับต่อไป Model คือ ส่วนหนึ่งในองค์ประกอบของการพัฒนาเว็บแอพพลิเคชันตามรูปแบบ MVC Framework (Model-View-Controller) โดยจะเป็นส่วนที่ทำหน้าที่ Business Model หรือส่วนที่ติดต่อกับฐานข้อมูล โดยบทความนี้นำเสนอการนำเครื่องมือ Entity Framework มาใช้ในการสร้างและจัดการ Model ในการเชื่อมต่อกับฐานข้อมูล สำหรับการพัฒนาเว็บแอพพลิเคชันตามรูปแบบ MVC Framework Entity Framework Entity Framework คือ tools ที่ทำหน้าที่จัดการกับฐานข้อมูล โดยแนวคิดของ Entity Framework อยู่ในรูปแบบของ O/RM (Object/Relational Mapping) คือ Entity Framework จะสร้าง Layer ทำหน้าที่เป็น Database Model ขึ้นมาเป็น Class ใน Project ของเรา โดยจะทำหน้าที่ Mapping ตัว Class ที่จะสร้างขึ้น กับ Table , View และ Stored Procedure จากฐานข้อมูบ มาไว้บน Project ซึ่งทำให้เราเราสามารถเรียกใช้มันผ่าน Class ที่อยู่ใน Project เราได้เลย ส่วนการเขียน Query หรือจัดการกับข้อมูลผ่านตัว Entity Model จะใช้ Syntax ของ LINQ to Entities ซึ่งเป็น syntax ที่สามารถเข้าใจได้ง่ายตามรูปแบบของภาษาเช่น VB.Net หรือ C# วิธีการใช้งาน Entity Framework เบื้องต้น 1. เปิด solution ที่ต้องการใช้ขึ้นมา (ในบทความนี้เป็น project แบบ MVC Framework) 2. คลิกขวาที่โฟลเดอร์ Model แล้วเลือก Add =>New Item 3. ที่ tab ด้านซ้ายมือ เลือก Data จากนั้นเลือก ADO.NET Entity Data Model และทำการตั้งชื่อ และกดปุ่ม Add 4. เมื่อเข้าสู่หน้าจอให้เลือก Model Content ให้เลือก EF Desiner from DataBase และกด Next จะเข้าสู่ขั้นตอนต่อไป 5.ขั้นตอนถัดมาคือการเลือก Data Connection เป็นการเลือกการติดต่อกับฐานข้อมูลว่าจะให้ Entity ติดต่อกับฐานข้อมูลไหน โดยครั้งแรกหากยังไม่มี ฐานข้อมูลมาให้เลือกใน comboBox จะต้อง New Connection ขึ้นมาก่อน และทำตามขั้นตอนไปได้เลย แต่ถ้ามีแล้วให้เลือก Connection จาก ComboBox หลังจากนั้นให้กดเลือก Yes,include the sensitive data in connection string และเลือก Checkbox ให้ Save Connection string เข้าสู่ Web.Config และตั้งชื่อให้กับ Conection string โดย default ชื่อจะเป็น “Entities” และกดปุ่ม Next

การเรียกใช้งานเมธอดในฝั่งเซิร์ฟเวอร์/เว็บเซอร์วิสแบบ Ajax ด้วย jQuery (C#)

January 15, 2016 03:29

ก่อนจะพูดถึงวิธีการเรียกใช้งานเมธอดในฝั่งเซิร์ฟเวอร์/เว็บเซอร์วิสแบบ Ajax ด้วย jQuery ผู้เขียนขอเกริ่นนำเกี่ยวกับที่มาที่ไปเกี่ยวกับแนวคิดแบบ Ajax เพื่อให้ผู้อ่านบางท่านที่ยังอาจงงๆได้ทำความเข้าใจเสียก่อน ว่าโดยปกติแล้วนั้น ในการพัฒนาเว็บไซต์(Web application)ของ ASP.NET จะประกอบด้วย 2 ส่วน คือ Client side และ Server side ซึ่งการทำงานในส่วนของ Client side จะหมายถึงส่วนของ browser หรือหน้าจอการทำงานของผู้ใช้ เช่น Google Chrome Firefox และ Internet explorer ส่วนในฝั่งเซิร์ฟเวอร์จะมีการรับคำร้องขอ(request) จากฝั่ง Client ทำการประมวลผลและส่งค่าผลลัพธ์คืนกลับมายังฝั่ง Client อีกครั้งเพื่อให้ผู้ใช้เห็นผลลัพธ์การตอบกลับนั้นได้ ซึ่งโดยปกติแล้วนั้นการพัฒนาจะประกอบด้วยโค้ด 2 ส่วน คือ Server-side code ซึ่งเป็นเทคโนโลยีของการทำงานในการติดต่อไปยังฝั่งเซิร์ฟเวอร์ และถูกนำมาใช้ในการพัฒนา Web application ซึ่งใน ASP.NET นั้นนับว่าได้รับความนิยมเป็นอย่างมาก โดยจะมีการใช้งานผ่านทาง .NET Framework ในรูปแบบของภาษา C# VB หรือภาษาอื่นๆที่มีใน .NET ในการประมวลผลเพื่อติดต่อกับฐานข้อมูล หรือแหล่งข้อมูลอื่นๆจากคำร้องขอในฝั่ง Client และทำการส่งผลลัพธ์ที่ได้กลับมายังฝั่ง Client อีกครั้ง หลังจากมีการส่งผลลัพธ์ตอบกลับมาเรียบร้อยแล้วนั้น จะมีการ render หน้าจอดังกล่าวขึ้นอีกครั้งเพื่อแสดงผลลัพธ์ที่ได้ ทำให้เพจหรือหน้าจอที่ใช้งานมีการโหลดหรือ refresh เกิดขึ้น ซึ่งอาจส่งผลเสียทำให้ผู้ใช้รู้สึกล่าช้าในการรอการตอบกลับการประมวลผลพร้อมทั้งการแสดงผลจากฝั่งเซิร์ฟเวอร์ โดยโค้ดในลักษณะนี้ผู้พัฒนาบางท่านอาจรู้จักกันในนามของ code behind นั่นเอง Client-side code อาจเรียกได้ว่าเป็น client-side script ที่ถูกฝังไว้ในฝั่ง client และมีการประมวลผลในส่วนของ Browser ของผู้ใช้ ซึ่งสคริปต์ที่นิยมใช้ในการพัฒนาโดยส่วนใหญ่จะเป็น JavaScript และโต้ตอบกลับมาโดยตรงด้วย element ที่มีใน HTML เช่น textbox ปุ่ม หรือตาราง เป็นต้น นอกจากนี้ยังมีการใช้งานของโค้ดภาษา HTML และ CSS(Cascading Style Sheets) ร่วมด้วย แต่การพัฒนาในส่วนนี้ต้องมีการคำนึงถึงภาษาและโค้ดที่รองรับในแต่ละ browser ของผู้ใช้ด้วย ซึ่งการพัฒนาด้วยโค้ดในส่วนนี้ จะทำให้การตอบโต้กับผู้ใช้งานเกิดขึ้นภายในเวลาอันสั้น เกิด overhead น้อย แต่ก็มีข้อเสียเกี่ยวกับการเลือกใช้ภาษาในการพัฒนาให้ครอบคลุมในความหลากหลายของ browser ที่ผู้ใช้ใช้งานในการเปิดเว็บไซต์ได้ Ajax (Asynchronous JavaScript and XML) เทคโนโลยีและแนวคิดแบบ Ajax ได้เข้ามามีบทบาทในการเปลี่ยนแปลงแนวคิดและหลักการทำงานโดยทั่วไปที่มีอยู่เดิมของ web application เล็กน้อย คือจะมีการส่งคำร้องขอจากฝั่ง Client ไปยังฝั่งเซิร์ฟเวอร์โดยตรงเพื่อตอบโต้กับ object ที่มีในฝั่งเซิร์ฟเวอร์ เช่น ฐานข้อมูล หรือไฟล์ เป็นต้น โดยปราศจากการ postback โดยแนวคิดของ Ajax จะเกี่ยวข้องกับเทคโนโลยีที่มีอยู่เดิม เช่น ข้อมูลในฝั่งเซิร์ฟเวอร์ เว็บเซอร์วิส และการเขียนสคริปต์ในฝั่ง client โดย client-side script จะใช้ในการเรียกใช้เว็บเซอร์วิสเพื่อประมวลผลกับฐานข้อมูลตามคำร้องขอ ซึ่งคำร้องขอดังกล่าวอาจเป็นการบันทึกหรืออ่านค่าข้อมูลจากฐานข้อมูล และการเรียกใช้แบบ Ajax นี้จะเป็นลักษณะ Asynchronous คือ เมื่อผู้ใช้มีการส่งคำร้องขอไปยังเว็บเซอร์วิส ในหน้าจอการทำงานจะไม่ถูกล็อคไว้ และสามารถทำงานในส่วนอื่นต่อได้โดยไม่จำเป็นต้องรอกระบวนการทำงานให้เสร็จทีละส่วน สามารถทำคู่ขนานกันไปได้ และหากส่วนใดเสร็จสิ้นการประมวลผลแล้วนั้นตัวเว็บเซอร์วิสก็จะส่งผลลัพธ์กลับมาให้แสดงยังฝั่งผู้ใช้เอง โดยเทคโนโลยีที่ถือว่ามีความสำคัญและจำเป็นสำหรับ client-side script นั่นก็คือ jQuery ที่เรารู้จักกันดี ซึ่งเป็นที่นิยม เนื่องจากประมวลผลได้เร็ว มีขนาดเล็ก และมีคุณสมบัติอีกหลายประการที่จะเข้ามาช่วยทำให้การพัฒนาโปรแกรมมีประสิทธิภาพมากยิ่ง จากข้อความข้างต้น แสดงให้เห็นว่าการพัฒนาเว็บไซต์โดยหลีกเลี่ยงการ postback เมื่อมีการเรียกใช้งานไปยังฝั่งเซิร์ฟเวอร์ ถือเป็นอีกทางเลือกของนักพัฒนาที่จะหยิบมาใช้ เพื่อลด over head ให้กับตัว web server และสามารถตอบสนองต่อผู้ใช้ได้รวดเร็วขึ้น ลดจำนวนในการโหลดเพจ และรอการตอบสนองทุกครั้งที่มีการส่งคำร้องขอ ผู้เขียนจึงขอแนะนำวิธีการเรียกใช้หรือส่งคำร้องขอไปยังฝั่งเซิร์ฟเวอร์แบบ Ajax ด้วย jQuery ดังนี้ การเรียกใช้เมธอดในฝั่งเซิร์ฟเวอร์ตามแนวคิดของ Ajax ด้วย jQueryหลักการเขียนเพื่อเรียกใช้เมธอดในฝั่งเซิร์ฟเวอร์/เว็บเซอร์วิส ที่มาของภาพ :http://www.aspsnippets.com/Articles/Call-ASPNet-Page-Method-using-jQuery-AJAX-Example.aspx ตัวอย่างที่ 1 : การเรียกใช้งานเมธอดแบบส่งค่ากลับเป็น

Convert Solution Visual Studio 2005 to 2013

January 14, 2016 11:17

ในบทความนี้ ผู้เขียนจะขอกล่าวถึงเครื่องมือในการพัฒนาตัวหนึ่งที่ชื่อว่า Visual Studio โดยจะนำเสนอวิธีการ Convert Solution ASP.NET จากเวอร์ชั่นเก่าไปยังเวอร์ชั่นใหม่โดยไม่ต้องสร้างโปรเจคขึ้นมาใหม่ ตัวอย่างในวันนี้จะแสดงการ Convert Project Solution ที่พัฒนาด้วย Visual Studio 2005 ไปพัฒนาบน Visual Studio 2013 ซึ่งแน่นอนครับว่าจะต้องมีการ config ค่าเพิ่มเติมต่างๆ ผู้เขียนจะกล่าวไว้ช่วงท้ายนะครับ เราเริ่มขั้นตอนการ Convert กันเลยดีกว่าครับ ขั้นตอนแรก : เตรียมข้อมูลให้พร้อม 1. เตรียม solution ตัวเก่าของเราให้พร้อม (ในที่นี้เราใช้ solution ของ Visual Studio 2005 ชื่อ GSMISII ) รูปที่ 1 Folder Project Solution Visual Studio 2005 รูปที่ 2 ไฟล์ Project Solution Visual Studio 2005 2. เตรียม Visual Studio 2013 ให้พร้อม รูปที่ 3 Visual Studio 2013 ขั้นตอนที่สอง : เริ่ม Convert 1. เราจะทำการ Convert Solution โดยคลิกขวาไฟล์ Solution ( xxx.sln ) ตามรูปที่ 2 เลือก Open with… ก็จะปรากฎดังรูป รูปที่ 4 Keep using Microsoft Visual Studio Version Selector 2. เลือก Keep using Microsoft Visual Studio Version Selector รูปที่ 5 Review Project And Solution Changes 3. Visual Studio จะตรวจสอบว่ามีโปรเจคหรือ Solution ใดบ้าง ตามตัวอย่างมีแค่ 1 Solution กด OK รูปที่ 6 Loading solution projects… กรณีมีการใช้ Crystal Report จะมีการให้ Backup ก่อนที่จะ Convert (ซึ่งหากต้องการใช้ Crystal Report จะต้องลง SAP Version ที่รองรับกับ Visual Studio 2013 ก่อน) รูปที่ 7 Loading solution projects… กรณีที่มีการใช้ Source Control จะมีให้เลือกว่าจะ remove ออกหรือไม่ รูปที่ 8 Source Control remove เสร็จเรียบร้อยแล้ว… จริงหรือ?? รูปที่ 9 Solution in Visual Studio 2013 เรามาลอง Build Solution กันดีกว่า… รูปที่ 10 Error Build Solution Oops! Error!!

การ Encrypt/Decrypt ข้อมูลในไฟล์ Web.config

January 13, 2016 13:46

การเข้ารหัส (Encrypt) ไฟล์ Web.config ถือเป็นวิธีการหนึ่งในการช่วยเพิ่มความปลอดภัยและช่วยป้องกันการถูกโจมตีจากผู้บุกรุกในการเชื่อมต่อกับฐานข้อมูล เนื่องจากไฟล์ web.config เป็นที่รวมการ config ค่าต่างๆ ของ web application ของเราไว้ เช่น ข้อมูลรหัสผ่านสำหรับการเชื่อมต่อฐานข้อมูล (ConnectionString), AppSetting, คีย์ API หรือข้อมูลสำคัญอื่นๆ ที่เกี่ยวกับการตั้งค่าต่างๆ โดยบทความนี้นำเสนอการเข้ารหัสและการถอดรหัส (Encrypt/Decrypt) ไฟล์ Web.config ด้วยคำสั่งผ่าน Command line โดยใช้ tools ที่มากับ .NET Framework ดังนั้นเครื่องคอมพิวเตอร์ของเราจะต้องมีการติดตั้ง .NET Framework ไว้อยู่ก่อนแล้ว สำหรับข้อมูลในไฟล์ Web.config จะถูกแบ่งออกเป็น section หลายๆ section ด้วยกัน โดยผู้เขียนจะขอยกตัวอย่างการ Encrypt/Decrypt ข้อมูลในส่วนของ section<connectionString>ดังนี้ ก่อนทำการ Encrypt Web.config ที่ section <connectionStrings> ซึ่งเก็บข้อมูล config ค่าต่างๆ ของ Database sever ไว้ เช่น user/password เป็นต้น <configuration> <connectionStrings> <add name=”SqlServices” connectionString=”Data Source=localhost;PASSWORD=1234;Integrated Security=SSPI;Initial Catalog=Northwind;” /> </connectionStrings> </configuration> Encrypt Web.config 1.เปิด Command Prompt ขึ้นมา (อย่าลืมเปิดแบบ Run as administrator ด้วยนะคะ) 2.พิมพ์คำสั่ง ดังนี้(Version ของ.NET Framework ขึ้นอยู่กับที่ลงไว้ที่เครื่อง) : cd C:\Windows\Microsoft.NET\Framework\v4.0.30319 3.เข้าไปที่ directory path ที่เก็บไฟล์ web.config แล้วพิมพ์คำสั่ง ดังนี้ aspnet_regiis.exe -pef connectionStrings C:\inetpub\wwwroot หมายเหตุ: “connectionString” เป็น case sensitive ตัวพิมพ์เล็ก พิมพ์ใหญ่ ต้องพิมพ์ให้ถูกต้อง หลังทำการ Encrypt Web.config หลังจากทำการ Encrypt แล้วจะเห็นว่า ที่ section connectionString จะเป็นรหัสที่ไม่สามารถอ่านเข้าใจได้ <connectionStrings configProtectionProvider=”RsaProtectedConfigurationProvider”> <EncryptedData Type=”http://www.w3.org/2001/04/xmlenc#Element” xmlns=”http://www.w3.org/2001/04/xmlenc#”> <EncryptionMethod Algorithm=”http://www.w3.org/2001/04/xmlenc#tripledes-cbc” /> <KeyInfo xmlns=”http://www.w3.org/2000/09/xmldsig#”> <EncryptedKey xmlns=”http://www.w3.org/2001/04/xmlenc#”> <EncryptionMethod Algorithm=”http://www.w3.org/2001/04/xmlenc#rsa-1_5″ /> <KeyInfo xmlns=”http://www.w3.org/2000/09/xmldsig#”> <KeyName>Rsa Key</KeyName> </KeyInfo> <CipherData> <CipherValue>SryXAF+wpnIpZ8P3HMP8ffMDBorz9j08/oX2vXDA+9LkMHY1i50qeCqYmOYnQXK4C6iNhyIZx9R+AcE7yY7AQeHzzPhZ/bZ04NPuOpd7wD+NL82CWeec/fToTIBbHvE6zNBgenUSE+8zTv9II357tsqpjH1xaII+zmZbgo5+fnhjAD8nVffqd+NQ0x+IXDwyBraeT50TlEXx4lJlAph7jqdglg1Xf/yjSTfwrOB2NcVIHVaVWN3CrelWgQKASftGXdDVingbRn2RXphyooTuVsZgJdzbFMpd7H6fJHggORSPwOud1ZU5vE4aNAMHDa4fb6FOA3I8R0urWD4sT34YRg==</CipherValue> </CipherData> </EncryptedKey> </KeyInfo> <CipherData> <CipherValue>iKttnP9CEMRfq+mhcHqN8f5GiwsySBLw0CWeiAxSQVIfoEQMNutubrRFruoNIb+m0XJnPL5FIypqqQ72dqZ4DSeQdUJwAVyO4HSlM5F3b+Jnogz9aMAuwdoww5QKdI94yH9fx8RwxhAzq1a9eApjLglAwTmKY84Wg/Lqpcn9wfvKyIZJyQaJCaLCEteGhB9bopjT9z+nmMZVQ2LrDEtKMEe1oltPoR8EvTel2/2jJ/gwvJK+vTw9sL2GMPJIoA/NZQWjR2CWaCGlEFIjmgqT8BjTwiSS6hEp90CEQVN14U9A71vXquH73X6ZAyIFScf2XJS1Y+iCaEFo6r8qIIiGdrAGUTgfa8r9EwHzb5emCzlQzEDWgzno5IUDxuMBNzJinFudgwPFkA/xhdAHcHnB+quFOGGKVZJw72o5Ix7IeWI1Frs2n8+JZMrpPNW5r4SHHLrMD/iPR5FSfDz/sQqR5f+3/N3i3aq0LX8NfthfYtS9N4oCdPBPbIReP1w05we1Q+PJMO4KVG4w3x8k9O7aT0zoi+5CuPgKR30IgbE0sL8fOeki5OKYfsscNMzV/6T23axh9Ky+axI9fAMarjjL5aeYfa8n6jeevpA4f2SmlkbvW6P72292Ihk3bD1HMghn7ibjZ2q6hLwTb9QWyQvSDjHPsqeoiuKBTNJZgsCqBA4QK8j6/9exufTsOe/SgTclHPfiXpSI7CgbaGd6JQ2P5QSDVwQNQPuaf4qFKsZdPWfdEGcCgxLVZtcU0Cd12AnpaWIpiVUjCz6pWl4YygEXsvntLQfLSQ7XX2Q8lA1DjqBOcDQXY9mMo6PvZi3IsqcdF/DEn931nwBPO09T2AqWJWuAaK/Vh4+olkVYFWuj/Eerp2UkG2ItJduUaRNWzXV9s1hQ/q/36S0RTxN0DgXPII6CowQWIV2d5ZYwSUKVgsiDM43GBPF4SFFJOUec37yzYv6XT3/BmDmNpq32a+VAUB/OP23k4mnTvm/Nay1Iy6E8sUOYSpCY1up6XAcFL1XsacpNKLpMTmH6LsROX9BhmdTNaWgCQaDNVNeAISoJ8HZ5lw/EX1f6Rtz4uWyvBfSOPPAWPkNQawexjVKl0FtR6fRSnAGMkgflURH5QNX5xm+y0sfZsNz9sAFZofoJLQ3rdV7ToFJE+JlEvPKRHFDVbxDCURQ5CynXFnqlLj+2LhBbyX0n6oHQwMgTTTIf/+PNcjOx3zBn6/V3T0PdD6fnjVtTDnbJzN7ct7SOuifW0OfCfyeKSs0IOzPm8BucZ4CODaTwjY1bz2kgGRTjuenCp1N1GIRhMJBIBJhWOs3nee6Y9DgtlpWc3SZRZeYkmOffT5xNwQeTLrIXvTZCByHZcN3+g8OG0HqlodUCbPgf8jK45dMeT8piyFwZem8Dotjz7mXOaJxF7C66SQKvFVfuJjXDmTbmdzqwt33z+w39TV8ueXGyB/5S1kpV/ul+c7LwTwked7bMJtFJpVwdFKFiUxMebDuu3vINlVSZJfo43SSmTD3rM2UXV8ol65KzlmacBhgCwXtLFg7/8uGQrrUVq9gqHsoPyEgt</CipherValue> </CipherData> </EncryptedData> </connectionStrings> Decrypt Web.config การถอดรหัส (Decrypt) ไฟล์ Web.config สามารถใช้คำสั่งเช่นเดียวกันกับการ Encrypt แต่เปลี่ยนจาก -pef เป็น -pdf ดังคำสั่งต่อไปนี้ : aspnet_regiis.exe -pdf connectionStrings C:\inetpub\wwwroot หมายเหตุ: “connectionString” เป็น case sensitive ตัวพิมพ์เล็ก พิมพ์ใหญ่ ต้องพิมพ์ให้ถูกต้อง การ Decrypt จะทำได้เฉพาะที่เครื่องที่ทำการ encrypt เท่านั้น จะไม่สามารถ decrypt ไฟล์ web.config นี้จากเครื่องอื่นได้ หากเรานำไฟล์ไป Decrypt จากเครื่องอื่นก็จะพบ message Failed ดังรูป โดยการ Encrypt/Decrypt ด้วยการใช้คำสั่งผ่าน command line สามารถทำได้กับทุก section (ไม่เฉพาะ connectionString)ในไฟล์ Web.confog เพียงแต่เปลี่ยนคำสั่งในส่วนของ section ตามที่ต้องการ แหล่งข้อมูลอ้างอิง : https://msdn.microsoft.com/en-us/library/ff647398.aspx

สร้างกราฟด้วย Chart.js ร่วมกับ ASP.NET

January 7, 2016 14:24

การแสดงผลในรูปแบบกราฟสำหรับเว็บแอพลิเคชัน ในปัจจุบันนั้น มีเครื่องมือ หรือเฟรมเวิร์ค มากมายให้เลือกใช้งาน ซึ่งสำหรับการเลือกใช้งานก็แล้วแต่ความเหมาะสมกับเครื่องมือ เทคโนโลยี ของเว็บนั้นๆ หรืออาจจะแล้วแต่ความถนัดของผู้พัฒนาเอง สำหรับ Chart.js นั้นเป็นเฟรมเวิร์คที่สร้างด้วยภาษา JavaScript ดังนั้นคุณสมบัติที่พ่วงมาด้วยคือการทำงานแบบ AJAX อย่างเต็มรูปแบบ ซึ่งในบทความนี้จะเป็นการนำเอามาใช้ร่วมกับเว็บแอพลิเคชัน ที่พัฒนาด้วย ASP.NET โดยวิธีการส่งข้อมูลในรูปแบบ JSON ผ่าน Web Services และทำการแปลงข้อมูล JSON ให้อยู่ในรูปแบบของ Object ที่มีโครงสร้างตรงตามที่ Chart.js ต้องการ เพื่อนำไปใช้แสดงผลในรูปแบบกราฟแท่ง กราฟเส้น กราฟวงกลม ผ่าน HTML Tag ที่มีชื่อว่า Canvas ซึ่งมีการเพิ่มส่วนแสดงความหมายของสีต่างๆในกราฟ ที่ได้พัฒนาเพิ่มเติมขึ้นมาอีกด้วย ในบทความนี้จะยกตัวอย่างการสร้างกราฟใน 3 รูปแบบ และมีการกำหนดค่า Option ในการแสดงผลเท่าที่จำเป็นเท่านั้น สามารถอ่านวิธีการใช้งานเต็มรูปแบบได้ที่ http://www.chartjs.org/docs ทำการ Include ไฟล์ Javascript ของ chart.js ไว้ใน header (ในตัวอย่างเป็นการเรียกใช้งานจาก CDN หากต้องการใช้งานจากไฟล์ที่เก็บไว้ที่เว็บเซิฟเวอร์ให้ปรับแก้ src path) <script src=”https://code.jquery.com/jquery-1.11.3.min.js” type=”text/javascript”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js” type=”text/javascript”></script> เพิ่ม canvas ในส่วนของ body <canvas id=”report” width=”600″ height=”300″></canvas> เขียน JavaScript เพื่อสร้างข้อมูล ตามโครงสร้างของกราฟแต่ละประเภท ในตัวอย่างจะเป็นโครงสร้างข้อมูลของกราฟแท่ง var dataDemo = { labels: [“Apple”, “Sumsung”, “ASUS”, “OPPO”], datasets: [{ label: “2557”, fillColor: “#5B90BF”, data: [20, 10, 9, 8] }] }; ทำการสร้าง Context จาก canvas เพื่อนำไปสร้าง Chart Object โดยใช้คำสั่ง ดังนี้ var ctx = $(“#report”).get(0).getContext(“2d”); var chart = new Chart(ctx).Bar(dataDemo, { bezierCurve: false }); จาก 4 ขั้นตอนดังกล่าวเราจะได้โค้ดที่เมื่อทำการเพิ่มโครงสร้างของหน้าเว็บ และบันทึกเป็นไฟล์ html แบบนี้ chart.html ลองเปิดดูจะพบว่าสามารถแสดงกราฟแท่งได้แล้ว แต่ในงานจริงนั้น รู้กันดีนะครับ ว่ามันไม่ง่ายอย่างนั้น โจทย์ของเราคือ สามารถนำข้อมูลจาก Database ซึ่งได้เขียน Query จนได้ข้อมูลแบบที่เราเรียกกันติดปากว่า Crosstab นั้นคือมีชื่อฟิลด์ข้อมูลที่มีความสัมพันธ์กันในแกน x และแกน y ซึ่งเป็นรูปแบบข้อมูลที่นำมาสร้างเป็นกราฟนั้นเอง ส่วนวิธีการนั้น ผมไม่ขอลงรายละเอียดในบทความนี้ แต่สำหรับท่านใดที่ใช้งานฐานข้อมูล Oracle ตั้งแต่ 11g ขึ้นไปลองศึกษาคำสั่งชื่อ Pivot ดูครับ น่าจะช่วยลดความยุ่งยากในขั้นตอนนี้ได้มาก ตัวอย่างข้อมูล แบบ Crosstab ที่เราจะส่งจากฝั่ง Server มาสร้างเป็น Object สำหรับสร้างกราฟอีกทีครับ อีกจุดที่มีความยุ่งยาก คือการแปลงจากรูปแบบข้อมูล Crosstab Datatable เป็น JSON ตัวช่วยของผมในเรื่องนี้คือ Library ที่ชื่อ Newtonsoft.Json สามารถดาวส์โหลดมาใช้งานผ่าน NuGet ได้เลยครับ จากนั้นก็เรียกใช้งาน ดังตัวอย่าง โดยตัวแปล data คือ Datatable ของเรา เมื่อได้ข้อมูล JSON แล้วให้ทำการสร้าง Web Service เพื่อให้สามารถดึงข้อมูลดังกล่าวจาก Javascript ได้ JsonConvert.SerializeObject(data) ถัดจากนั้น