การพัฒนา Web Application

จับตา Bootstrap 4 Beta

by

เมื่อช่วงเดือนสิงหาคม 2015 ผู้พัฒนา Bootstrap ได้เปิดตัว Bootstrap 4 Beta ออกมาให้ผู้พัฒนาเว็บไซต์ได้ทดลองใช้งานกัน โดยได้มีการแก้ไข bug ที่เจอในเวอร์ชั่น 3 และเพิ่มเติมความสามารถต่างๆ เข้าไป ทำให้การพัฒนาเว็บไซต์สามารถทำได้ง่าย และเป็นที่น่าสนใจได้มากขึ้น โดยในเวอร์ชั่นนี้มีการปรับปรุงจากเวอร์ชั่น 3 ค่อนข้างเยอะ แต่ที่เด่นๆ ได้แก่   ใช้ Sass แทน Less ทำให้ compile ได้เร็วขึ้น ข้อดีของการใช้ Sass คือการมี community ขนาดใหญ่เป็นตัวช่วยสำหรับนักพัฒนาในการค้นคว้าหาความรู้เพิ่มเติม หรือขอความช่วยเหลือต่างๆ จาก community ได้ ปรับปรุง Grid System ให้รองรับกับขนาดหน้าจอของอุปกรณ์ต่างๆ ให้มากยิ่งขึ้น สนับสนุนการใช้งาน flexbox grid system และ component ใช้ Card component แทนการใช้ wells, … Read more

การใช้ LINQ ในการจัดการข้อมูลอย่างง่าย สำหรับมือใหม่(Ep.1)

by

          ก่อนที่จะไปถึงในส่วนของวิธีการจัดการข้อมูลด้วย LINQ เรามาพูดถึงที่มาที่ไปอย่างคร่าวๆ ของ LINQ กันสักเล็กน้อยนะคะ LINQ มีชื่อเต็มว่า “Language-Intergrated Query” ถือเป็นภาษาใหม่ที่ขยายความสามารถในการเขียนโปรแกรมโดยเลียนแบบภาษา SQL จึงทำให้มีการใช้งาน keyword ที่คุ้นเคยกันดีในคำสั่ง SQL เช่น select from where เป็นต้น ซึ่งมีความนิยมกับการทำงานด้านฐานข้อมูลมากขึ้นในปัจจุบัน และได้ถูกนำมารวมกับภาษาพัฒนาโปรแกรมทำให้การพัฒนาโปรแกรมควบคุมข้อมูลให้อยู่ในแนวการเขียนโปรแกรมเดียวกัน และช่วยอำนวยความสะดวกรวมถึงเพิ่มความคล่องตัวให้กับผู้พัฒนาในการจัดการข้อมูลมากยิ่งขึ้น โดย LINQ นี้ถูกนำมาใช้ตั้งแต่ .NET Framework 3.5 ที่มากับ Visual studio 2008 ซึ่งจะมีการติดต่ออยู่ด้วยกัน 3 ประเภท คือ ข้อมูลประเภท Object ข้อมูลประเภทฐานข้อมูลเชิงสัมพันธ์ ซึ่งมีรูปแบบการใช้งานแตกต่างกันไป จึงแยกออกเป็น LINQ to Dataset LINQ to SQL LINQ to Entity ข้อมูล XML           โดยในบทความนี้ผู้เขียนจะขอแยกวิธีการจัดการข้อมูลออกเป็นเรื่องๆ ที่ถือเป็นพื้นฐานที่มือใหม่ควรรู้ … Read more

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

by

             จากบทความที่แล้ว ผู้เขียนได้เขียนไว้เกี่ยวกับเรื่องวิธีการกำหนดจุดพิกัดบนแผนที่กันไปบ้างแล้ว ในหัวข้อ “ทำอย่างไรให้สามารถกำหนดจุดพิกัดบนแผนที่ 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 … Read more

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

by

    การแสดงผลในรูปแบบกราฟสำหรับเว็บแอพลิเคชัน ในปัจจุบันนั้น มีเครื่องมือ หรือเฟรมเวิร์ค มากมายให้เลือกใช้งาน ซึ่งสำหรับการเลือกใช้งานก็แล้วแต่ความเหมาะสมกับเครื่องมือ เทคโนโลยี ของเว็บนั้นๆ หรืออาจจะแล้วแต่ความถนัดของผู้พัฒนาเอง     สำหรับ Chart.js นั้นเป็นเฟรมเวิร์คที่สร้างด้วยภาษา JavaScript ดังนั้นคุณสมบัติที่พ่วงมาด้วยคือการทำงานแบบ AJAX อย่างเต็มรูปแบบ ซึ่งในบทความนี้จะเป็นการนำเอามาใช้ร่วมกับเว็บแอพลิเคชัน ที่พัฒนาด้วย ASP.NET โดยวิธีการส่งข้อมูลในรูปแบบ JSON ผ่าน Web Services และทำการแปลงข้อมูล JSON ให้อยู่ในรูปแบบของ Object ที่มีโครงสร้างตรงตามที่ Chart.js ต้องการ เพื่อนำไปใช้แสดงผลในรูปแบบกราฟแท่ง กราฟเส้น กราฟวงกลม  ผ่าน HTML Tag ที่มีชื่อว่า Canvas ซึ่งมีการเพิ่มส่วนแสดงความหมายของสีต่างๆในกราฟ ที่ได้พัฒนาเพิ่มเติมขึ้นมาอีกด้วย     ในบทความนี้จะยกตัวอย่างการสร้างกราฟใน 3 รูปแบบ และมีการกำหนดค่า Option ในการแสดงผลเท่าที่จำเป็นเท่านั้น สามารถอ่านวิธีการใช้งานเต็มรูปแบบได้ที่ http://www.chartjs.org/docs ทำการ Include ไฟล์ … Read more

วิธีการทดสอบเว็บไซต์ Responsive บน Smart phone ด้วย Chrome

by

“ปัจจุบันกระแสการออกแบบเว็บเชิงตอบสนอง (Responsive design) ถูกนำมาใช้ในการออกแบบเว็บสมัยใหม่ เนืองจากสามารถดูได้ทั้งแบบผ่านเครื่องคอม แท็บเล็ต และมือถือ ได้โดยทันที” แต่ในระว่างการออกแบบ ถ้าผู้ออกแบบจะต้องมีการทดสอบบนอุปกรณ์แท็บเล็ต หรือมือถือ ต่างๆ ซึ่งมีความละเอียดของหน้าจอแตกต่างกันออกไป ซึ่งในส่วนที่ Chrome มีเครื่องมือที่ช่วยในการแสดงผลเว็บไซต์บนอุปกรณ์ Smart phone ได้ โดยไม่ต้องโหลดเพิ่ม แต่ประการใด !!! แถมวิธีการก็ง่ายแสนง่าย  ขั้นตอนที่ 1 ให้ไปที่ More tools > Developer tools ดังภาพ ขั้นตอนที่ 2 เลือกที่รูปโทรศัพท์ ดังภาพ ขั้นตอนที่ 3 สังเกต ด้านซ้ายจะปรากฏหน้าจอมือถือขึ้นมา ให้ระบุ URL ที่เราต้องการดังภาพ จากภาพ จะเห็นว่าหากเป็นเว็บที่ออกแบบด้วยหลักการออกแบบเว็บเชิงตอบสนอง (Responsive design) จะมีการจัดหน้าจอให้เหมาะสมกับอุปกรณ์ ขั้นตอนที่ 4 สังเกต ด้านบน เราสามารถเลือกรุ่นของ Smart Phone … Read more