ASP.NET Core Part I

asp.net core คือ cross-platform framework สำหรับการพัฒนา web application ที่ทำงานบน .net core หรือ  full .net framework เดิม ( .net core สามารถใช้งานได้ทั้ง Windows , Linux และ MacOS โดยที่ส่วนประกอบต่างๆของ .net core ไม่ว่าจะเป็น runtime, libraries, compiler, language และเครื่องมือต่างๆ เป็น open source ทั้งหมด )  ซึ่ง asp.net core ได้รับการออกแบบใหม่ให้มีประสิทธิภาพดีกว่า asp.net เดิมโดยแบ่งส่วนต่างๆออกเป็น module ย่อยเพื่อลด overhead ในการเริ่มต้นทำงาน ซึ่ง asp.net core ประกอบไปด้วยกลุ่มของ NuGet package แทนที่การใช้งาน System.Web.dll ใน asp.net เดิม ซึ่งผู้พัฒนาสามารถเลือกเฉพาะ package ที่ต้องใช้งานเท่านั้น ทำให้ application มีขนาดเล็กลง มีประสิทธิภาพเพิ่มขึ้น,การพัฒนา Web UI และ Web API จะใช้ libraries เดียวกัน, สนับสนุนการใช้งาน dependency injection, web application สามารถใช้งานบน IIS หรือ self-host ภายใต้ process ของตัวเอง ในการพัฒนา asp.net core เราสามารถใช้เครื่องมือที่เป็น text editor ธรรมดาหรือจะใช้เครื่องมือช่วยในการพัฒนาอย่างเช่น Visual Studio ก็ได้ ในส่วนของโครงสร้างของ project asp.net core จะเปลี่ยนไปจากเดิม โดยการกำหนดค่า config ของ project สามารถกำหนดได้ที่ project.json { “title”: “asp.net.core”, “version”: “1.0.0”, “dependencies”: { “NETStandard.Library”: “1.6.0”, “Newtonsoft.Json”: “9.0.1” }, “frameworks”: { “netstandard1.6”: { “imports”: “dnxcore50″ } } } การ reference ไปยัง NuGet package ที่ต้องการใช้งานใน project สามารถกำหนดได้ใน project.json โดยพิมพ์ชื่อ NuGet package ที่ต้องการพร้อมทั้งระบุ vesrion ในส่วน “dependencies” ซึ่งเมื่อทำการบันทึก project.json เครื่องมืออย่างเช่น visual studio จะทำการ restroe NuGet package ให้กับ project โดยอัตโนมัติ asp.net core ได้รับการออกแบบให้รองรับ client-side framework ต่างๆเช่น AngularJS หรือ bootstrap โดยใช้เครื่องมือที่เป็น package manager ในติดตั้ง client-side package ที่ต้องการใช้งาน อย่างเช่น Bower ที่จะกำหนด package ที่ต้องการใช้งานใน bower.json { “name”: “asp.net”, “private”: true, “dependencies”: { “bootstrap”: “3.3.6”, “jquery”: “2.2.0”, “jquery-validation”: “1.14.0”, “jquery-validation-unobtrusive”: “3.2.6” } } หรือ npm ที่จะกำหนด package ที่ต้องการใช้งานใน package.json { “name”:

Read More »

การสร้างแผนที่ออนไลน์ (Web Map) ด้วยลิงค์ KML/KMZ

นักพัฒนาเว็บหลายคนคงจะคุ้นเคยกับการสร้าง web map ด้วย google map api กันนะคับ (เป็นที่นิยมเลยล่ะ) แต่ในยุคปัจจุบันที่มีการเผยแพร่ข้อมูลที่เป็น near real time กันมากยิ่งขึ้น จะเห็นได้จากหลายหน่วยงานมีการเผยแพร่ Web Map Services กันเยอะมากยิ่งขึ้น และแย่งชิงความเป็นผู้นำในการนำเสนอข้อมูลที่เป็นปัจจุบันทันด่วนที่สุด แต่ด้วยปัจจัยในการต้องติดตั้งโปรแกรมบน Web Map Server เพื่อให้สามารถใช้งาน web map ผ่าน server ได้ (เสียงบประมาณเพิ่ม) ***ใครมี ArcGIS Server จะลองทำ การสร้างเว็บแผนที่จุดความร้อน(Hotspot) โดยใช้ WMS บน ArcGIS Server ดูได้นะคับ   วันนี้เลยจะขอนำเสนอโค้ดง่ายๆ ในการนำลิงค์ KML/KMZ จากเว็บที่ให้บริการฟรี! มาสร้างเป็นหน้าเว็บเพจของเราโดยที่ไม่ต้องติดตั้ง map server กันคับ ^^ ที่สำคัญ ต้นทางข้อมูลอัพเดทข้อมูล หน้าเว็บเราก็อัพเดทไปด้วย อิอิ ขั้นตอนการสร้าง 1. เปิดหน้าเว็บที่ให้บริการลิงค์ ***ตัวอย่างเว็บ http://slb-gis.envi.psu.ac.th 2. เลือกชั้นข้อมูลที่ต้องการ แล้วคลิกขวา > copy link address 3. สร้างไฟล์ gmap.html แล้วเปิด edit ด้วยโปรแกรม notepad หรือ text editor 4. copy โค้ดนี้ไปวาง <!DOCTYPE html> <html> <head> <meta name=”viewport” content=”initial-scale=1.0″> <meta charset=”utf-8″> <title>การสร้างแผนที่ออนไลน์ (Web Map) ด้วยลิงค์ KML/KMZ</title> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } </style> </head> <body> <div id=”map”></div> <script> function initMap() { var map = new google.maps.Map(document.getElementById(‘map’), { zoom: 11, center: {lat: 100.756297, lng: 14.790059} }); var ctaLayer = new google.maps.KmlLayer({ url: ‘ที่อยู่ kml/kmz ลิงค์‘, map: map }); } </script> <script async defer src=”https://maps.googleapis.com/maps/api/js?key=google map api key“> </script> </body> </html> 4. วางลิงค์ที่ copy มาจากเว็บตรงurl: ‘http://slb-gis.envi.psu.ac.th/home1/images/download/kmz/gcs_slbforu.kmz‘, และใส่ google map api key ***ถ้าไม่มีให้ไปที่ https://developers.google.com/maps/documentation/javascript/get-api-key 5. ลองเปิดผ่าน http://localhost/gmap.html จะได้ตามรูป 6. หากคลิกที่ข้อมูล จะมี pop-up แสดงข้อมูลขึ้นมา 7. เว็บไซต์ของท่านก็จะมีหน้าเว็บแมพไว้ใช้งานได้แบบง่ายๆ โดยไม่ต้องติดตั้ง web map server ^^   ****บริการฟรี! ชั้นข้อมูลลุ่มน้ำทะเลสาบสงขลาเพิ่มเติมได้ที่ โครงการการพัฒนาฐานข้อมูลสารสนเทศภูมิศาสตร์ลุ่มน้ำทะเลสาบสงขลา โดย สถานวิจัยสารสนเทศภูมิศาสตร์ทรัพยากรธรรมชาติและสิ่งแวดล้อม คณะการจัดการสิ่งแวดล้อม มหาวิทยาลัยสงขลานครินทร์

Read More »

ตอนที่ 2 : จัดการรายงานด้วย Report Manager

การใช้งาน Report Manager มีขั้นตอนดังต่อไปนี้ เปิด Browser และพิมพ์ URL ของ Report Server ในช่อง Address โดย URL มีรูปแบบดังนี้ http://<report_server_name>/Reports  จะปรากฏ หน้าต่าง Windows Security ขึ้นมา เพื่อให้กรอก User name และ Password ในการยืนยันตัวตนเข้าสู่ระบบ หากการยืนยันตัวตนเข้าสู่ระบบถูกต้องแล้ว ก็จะสามารถเข้าสู่หน้า Home ของ Report Manager (ดูภาพประกอบที่ 1) แสดง Contents ที่ประกอบด้วย ภาพประกอบที่ 1 Home ของ Report Manager       3.1 เมนูด้านบนขวาที่ใช้ตั้งค่าคุณสมบัติต่างๆ ของ Report Server ดังนี้             » Home เป็นลิงค์ที่เชื่อมโยงไปยังหน้าหลักของ Report Server ซึ่งก็คือหน้า Home นั่นเอง ประกอบด้วยเมนู ดังนี้ − New Folder เพื่อสร้างโฟลเดอร์ไว้สำหรับเก็บรวบรวมรายงาน, Data Source, Data Model และอื่นๆ ที่มีอยู่ก่อนแล้วไว้ภายใน Folder ที่สร้างขึ้นใหม่ − New Data Source เป็นการสร้าง Data Source ขึ้นมาใหม่เพื่อใช้สำหรับเป็นแหล่งข้อมูลของการสร้างรายงาน − Report Builder เป็นการใช้โปรแกรม Report Builder แบบ Click Launch โดย User สร้าง Ad hoc Report (โดยการอาศัย Data Model ที่ได้สร้างไว้บน Report Server นำมาใช้เป็นแหล่งข้อมูลในการสร้างรายงาน) − Folder Settings เพื่อกำหนดบทบาทในการเข้าถึงโฟลเดอร์ − Upload File เพื่อ Upload ไฟล์ต่างๆ เช่น Report (.rdl), Model (.smdl), Shared Dataset (.rsd), Report Part (.rsc) หรือ Resource อื่นๆ มายัง Home ของ Report Server − Layout  อยู่ด้านขวาสุดของเมนู เป็นมุมมองในการแสดงข้อมูล ซึ่งมี 2 โหมด คือ  Details View และ  Tile View           เมื่อคลิก Dropdown ที่โฟลเดอร์จะมีเมนู เช่น Move, Delete, Security, Manage และเมื่อคลิก Dropdown ที่รายงานจะมีเมนู เช่น Move, Delete, Subscribe…, Create Linked Report, View Report History, Security, Manage, Download และ Edit in Report Builder (ดูภาพประกอบที่ 3) ซึ่งหากคลิกที่ชื่อรายงานจะไปยังหน้าจอสำหรับเรียกดูรายงาน โดยผู้ใช้สามารถ Export ไฟล์ในรูปแบบต่างๆที่ SSRS Support ดังที่ได้กล่าวเอาไว้ในตอนที่ 1 และกด  เพื่อพิมพ์รายงาน (ดูภาพประกอบที่ 4) ภาพประกอบที่ 3 เมนูของรายงาน ภาพประกอบที่ 4 View Report            

Read More »

ตอนที่ 1 : มารู้จัก SSRS กันเถอะ…

          SQL Server Reporting Services (SSRS) เป็น Technology หนึ่งของ Microsoft SQL Server Services ที่ใช้ในการสร้างและบริหารจัดการรายงาน เริ่มมีใน SQL Server 2005 และในปัจจุบันเป็น SQL Server 2016 ซึ่งข้อดีของการใช้ SSRS อาทิเช่น ไฟล์รายงานเป็นภาษา Rdl ที่เป็น Text File ธรรมดาสามารถเปิดด้วย Text Editor อะไรก็ได้ (ดูภาพประกอบที่ 1) อีกทั้ง SSRS แถมฟรีมากับ SQL Server ดังนั้นหากมี License การใช้งาน SQL Server ก็จะสามารถใช้ SSRS ทำรายงานได้โดยไม่มีค่าใช้จ่ายอื่นเพิ่มเติม และเมื่อมีการ Deployed รายงานไปแล้ว รายงานจะอยู่ใน Web Server ซึ่งผู้ใช้สามารถเรียกดูรายงานผ่าน Web Browser ได้ (ดูภาพประกอบที่ 2) โดยจะต้องกำหนดสิทธิการเช้าถึง Site และสิทธิการเข้าถึงรายงาน นอกจากนั้นยังสามารถนำรายงานไปฝังตัวไว้เป็นส่วนหนึ่งของ Application ก็ได้ เป็นต้น ภาพประกอบที่ 1 เปิดไฟล์ *.rdl ด้วย Notepad ภาพประกอบที่ 2 เรียกดูรายงานผ่าน Web Browser           SSRS มีสถาปัตยกรรมแบบ Multi-Tier สนับสนุนการใช้งานทั้ง Native Mode และ SharePoint mode ในที่นี้จะขอกล่าวถึงสถาปัตยกรรมของSSRSที่เป็น Native Mode ซึ่งประกอบด้วย Components ต่างๆ ดังนี้ (ดูภาพประกอบที่ 3) Report Processor เป็นตัวที่ควบคุมการทำงานทั้งหมดที่อยู่ใน Report Server ตั้งแต่ Data Processing จนถึง Authentication โดยการทำงานบางอย่างจะแสดงผลผ่าน Programmatic Interfaces Programmatic Interfaces เป็นโปรแกรมที่ทำหน้าที่รับการติดต่อการทำงานจากผู้ใช้ แสดงผลการทำงานของรายงาน และ Report Server ให้ผู้ใช้เห็น โดยจะมีการทำงานรวมทั้งนำรายงานจาก Report Server Database มาแสดงผลให้เห็นด้วย Data Processing เป็นการประมวลผลข้อมูลที่มาจาก Data Source เพื่อนำมาสร้างรายงาน โดยถูกควบคุมการประมวลผลโดย Report processor Rendering เป็นการแสดงผลรายงาน ก่อนที่จะทำการส่งไปให้ผู้ใช้หรือสั่งพิมพ์นำไปใช้งาน Report Processing เป็นการประมวลผลรายงาน โดยจะรับข้อมูลที่ถูกส่งต่อมาจาก Data Processing มาประมวลผล Authentication (Security) เป็นการยืนยันตัวตนของผู้ใช้ที่ต้องการใช้งาน Report Server โดยแสดงหน้าจอในการ Log on เข้าใช้งาน ผ่าน Programmatic interfaces หาก Log on สำเร็จผู้ใช้ก็จะสามารถเข้าใช้งานได้ Scheduling and Delivery Processor เป็นตัวประมวลผลการตั้งเวลาและการส่งรายงาน ทำหน้าที่ควบคุม การส่งรายงาน จะมีการให้ผู้ใช้ที่มีสิทธิ์ได้ตั้งเวลาและทำการกำหนดการส่งรายงานให้กับเป้าหมายโดยผ่าน Programmatic interfaces Delivery เป็นการส่งรายงานให้กับผู้ใช้ที่เป็นเป้าหมาย   ภาพประกอบที่ 3 SSRS components ที่มา : https://msdn.microsoft.com/en-us/library/ms157231.aspx   ความสามารถในการ Authoring SSRS  สร้างรายงานได้จากหลายแหล่งข้อมูล (Data Sources) ที่มีอยู่ เช่น SQL Server, Oracle, OLE DB, OLEDB-MD, ODBC, XML, SAP BI NetWeaver, Hyperion

Read More »

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

จากบทความก่อนหน้า ซึ่งอาจจะนานมากพอสมควรที่ได้แนะนำ 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

Read More »