ทำอย่างไรให้สามารถกำหนดจุดพิกัดบนแผนที่ Google map แบบจุดเดียวและหลายจุดจากฐานข้อมูลได้ด้วย ASP.NET C# (ภาคต่อ)

             จากบทความที่แล้ว ผู้เขียนได้เขียนไว้เกี่ยวกับเรื่องวิธีการกำหนดจุดพิกัดบนแผนที่กันไปบ้างแล้ว ในหัวข้อ “ทำอย่างไรให้สามารถกำหนดจุดพิกัดบนแผนที่ Google map แบบจุดเดียวและหลายจุดจากฐานข้อมูลได้ด้วย ASP.NET C#” สำหรับในบทความนี้ผู้เขียนจึงขอพูดถึงในส่วนของการดึงค่าละติจูด ลองจิจูดของสถานที่ ซึ่งนับว่าเป็นส่วนประกอบสำคัญในการแสดงผลพิกัดบนแผนที่ ซึ่งเดิมทีแล้วนั้น ผู้ใช้อาจต้องค้นหาข้อมูลพิกัดดังกล่าวจาก Google map เองและนำพิกัดดังกล่าวมากรอกลงฐานข้อมูลหรือมาระบุเพื่อการแสดงพิกัดนั้นๆในการเขียนโปรแกรม คงเป็นการดี หากการแสดงผลพิกัดจากฐานข้อมูลนั้น จะมีตัวช่วยอำนวยความสะดวกให้กับผู้ใช้ในการดึงค่าละติจูด และลองจิจูดโดยการกรอกข้อมูลชื่อสถานที่ลงไปเพื่อใช้ในการค้นหา ซึ่งน่าจะเป็นประโยชน์และทำให้ผู้ใช้สามารถใช้งานได้ง่ายขึ้นในการนำพิกัดเหล่านั้นไประบุบนแผนที่นั่นเอง              โดยการดึงค่าพิกัดละติจูด-ลองจิจูดของสถานที่ สามารถทำได้หลายวิธี ขึ้นอยู่กับการนำไปประยุกต์ใช้ ซึ่งในบทความนี้ผู้เขียนขอแนะนำ 2 วิธี ดังนี้ การเรียกใช้เซอร์วิสของ Google Geocoding API  โดยการส่งพารามิเตอร์เป็นที่อยู่ของสถานที่ดังกล่าว ฝั่ง C# private void getLatAndLong() { try { ////เป็นการกำหนด url ที่จะใช้ในการเรียกเซอร์วิสของ Google Geocoding API โดยมีการส่งค่าพารามิเตอร์เป็นข้อมูลที่อยู่ string url = “http://maps.google.com/maps/api/geocode/xml?address=” + txtLocation.Text + “&sensor=false”; WebRequest request = WebRequest.Create(url); using (WebResponse response = (HttpWebResponse)request.GetResponse()) { ////ผลลัพธ์จะอยู่ในรูปแบบของ XML หรือ JSON และจะถูกอ่านให้อยู่ในรูปแบบ Dataset โดยใช้ StreamReader using (StreamReader reader = new StreamReader(response.GetResponseStream(), Encoding.UTF8)) { DataSet dsResult = new DataSet(); dsResult.ReadXml(reader); ////จัดทำโครงสร้างตาราง(datatable) ที่จะใช้ในการแสดงผลใน Gridview DataTable dtCoordinates = new DataTable(); dtCoordinates.Columns.AddRange(new DataColumn[4] { new DataColumn(“Id”, typeof(int)), new DataColumn(“Address”, typeof(string)), new DataColumn(“Latitude”,typeof(string)), new DataColumn(“Longitude”,typeof(string)) }); ////ดึงค่าผลลัพธ์จากตารางต่างๆ เพื่อนำค่าที่จำเป็นมาแสดงผลตามต้องการ foreach (DataRow row in dsResult.Tables[“result”].Rows) { string geometry_id = dsResult.Tables[“geometry”].Select(“result_id = ” + row[“result_id”].ToString())[0][“geometry_id”].ToString(); DataRow location = dsResult.Tables[“location”].Select(“geometry_id = ” + geometry_id)[0]; dtCoordinates.Rows.Add(row[“result_id”], row[“formatted_address”], location[“lat”], location[“lng”]); } ////แสดงผลข้อมูลของค่าที่ดึงมาได้ใน Gridview (ถ้ามี) if (dtCoordinates.Rows.Count > 0) { gvLatLong.DataSource = dtCoordinates; gvLatLong.DataBind(); } else { gvLatLong.DataSource = null; gvLatLong.DataBind(); ScriptManager.RegisterStartupScript(Page, Page.GetType(), “alert”, “alert(‘Can not find Latitude and Longitude!’); “, true); } } } } catch (Exception ex) { ScriptManager.RegisterStartupScript(Page, Page.GetType(), “alert”, “alert(‘Can not find Latitude and Longitude!’); “, true); gvLatLong.DataSource = null; gvLatLong.DataBind(); } } protected void btnSearch_Click(object sender, EventArgs

Read More »

Powershell : นับหน้าเอกสาร PDF

Download โปรแกรม PDFtk [ https://www.pdflabs.com/tools/pdftk-the-pdf-toolkit/ ] Install PDFtk ใช้ editor ซักตัวเขียน Code Powershell ที่ผมใช้คือใช้ Visual Studio 2013 และ Download PowerShell Tools for Visual Studio 2013 [ https://visualstudiogallery.msdn.microsoft.com/f65f845b-9430-4f72-a182-ae2a7b8999d7 ] ที่ใช้งานตัวนี้เพราะ Tools จะมี InteliSense ให้ไม่ต้องจำคำสั่ง PowerShell ทั้งหมด ก็ทำให้สะดวกดี  Code ก็ไม่มาก #กำหนดที่เก็บผลการ$File Path = ‘E:\tmp\result.txt’ -f $env:Path; #เป้าหมาย diretory ที่เก็บ file PDF วนคำนาณแต่ละ file dir e:\ *.pdf | foreach-object{ $pdf = pdftk.exe $_.FullName dump_data $NumberOfPages = 0 $NumberOfPages = [regex]::match($pdf,’NumberOfPages: (\d+)’).Groups[1].Value $infoObj = New-Object PSObject -Property @{ Name = $_.Name FullName = $_.FullName NumberOfPages = $NumberOfPages } #บันทึกข้อมูลลง file $infoObj.”FullName”,$infoObj.”NumberOfPages” -join ‘,’ | Out-File -FilePath $FilePath -Append -Width 200; } 5. Save แล้วก็ Execute เพื่อทดสอบได้เลยครับ

Read More »

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

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

Read More »