Category: การพัฒนา Web Application

แก้ปัญหาการเรียกใช้ font ผ่าน css แล้วเกิด error Access to font at has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

เนื่องด้วยทางทีมงานต้องการใช้ font ผ่าน css ที่อยู่คนละที่ โดยต้องการให้ไปเรียกที่เดียวเพื่อการจัดการง่าย แต่ปัญหาก็เกิดขึ้น เพราะทางต้นทางมีการ block ไม่ให้เข้าถึง วันนี้จึงมีแนวทางการแก้ปัญหาดังนี้ ขั้นตอนที่ 1 ไปตั้งค่าไฟล์ font ที่ต้องการ โดยในที่นี้ เป็น folder fonts โดยไปที่ IIS เลือก folder ที่ต้องการ จากนั้นเลือกเมนู “HTTP Response Headers” จากนั้น กด “Add” ดังรูป ขั้นตอนที่ 2 เพิ่ม Name: Access-Control-Allow-Origin และ Value:…

สร้าง UI หน้าเว็บแบบ Timeline ด้วย HTML+CSS

เนื่องจากระบบที่กำลังพัฒนาอยู่ มีความต้องการแสดงผลข้อมูลในรูปแบบ Timeline ดังรูป เมื่อลองหาแนวทางดูพบว่ามี how to ที่เว็บไซต์ https://www.w3schools.com/howto/howto_css_timeline.asp ลองนำมาประยุกต์ใช้ โดยปรับสี เพิ่มเงา และส่วนแสดงผลรูป และไอคอนเข้าไป โดยใช้ https://getbootstrap.com/ เวอร์ชัน 5 เพื่อช่วยในการจัดตำแหน่งเนื้อหาด้านใน ก็จะได้ CSS และ HTML สำหรับนำไปใช้ในเว็บไซต์ดังนี้ HTML โดยในตัวอย่างได้นำโครงสร้าง html page และ ส่วนแสดงอีโมไอคอนออกเพื่อให้อ่านง่าย เห็นโครงสร้าง html ของ timeline ชัดเจน และต้องมีรูปอยู่ที่โฟลเดอร์ images (ภาพประกอบเนื้อหาของท่านเอง) ก็จะได้หน้าเว็บใกล้เคียงความต้องการ ดังรูปตัวอย่างนะครับ…

UX Design Processes

สวัสดีครับ วันนี้เราจะมาว่ากันด้วยเรื่องของ การออกแบบสินค้าและบริการที่ตอบโจทย์และดีต่อผู้ใช้ การสร้างสินค้าและบริการจะต้องประกอบไปด้วยการออกแบบทางด้านประสบการณ์ของผู้ใช้ หรือ UX เพราะทุกสิ่งที่ถูกคิดค้นหรือสร้างขึ้นล้วนต้องผ่านการคิด วิเคราะห์ สร้างเพื่ออะไร ทำไปทำไม ตอบโจทย์อะไรกับผู้ใช้ ซึ่งการออกแบบมีด้วยกัน 6 ขั้นตอนหลักๆดังนี้ Step 1 : Understanding Environment (Discovery phase) เป็น phase แห่งการทำความเข้าใจ การทำความเข้าใจในที่นี้หมายถึง การที่เราเข้าใจผู้ใช้, เข้าใจ brand, เข้าใจในเงื่อนไขต่างๆ เพื่อที่จะเอามาเป็นแนวทางในการทำ research ให้ phase ถัดไป User การทำความเข้าใจผู้ใช้งานระบบ -> Pain Point discovery…

UX, everything related!

เรามักได้ยินคำว่า UI เป็นประจำเมื่อเราพัฒนาระบบแต่ รู้หรือไม่ว่านอกจาก UI แล้วมันมีอีกหนึ่งอย่างที่ควรรู้และสำคัญยิ่งกว่าแต่ถูกมองข้ามไปคือ UX (ย่อมาจาก User experience) หลายๆคนมักจะสับสนว่า UI และ UX มันคือสิ่งเดียวกัน จริงๆแล้วมันคือคนละอย่างกันเลย วันนี้เราจะมาเล่าให้ฟัง UI :: User Interface User Interface คือหน้าตาของระบบที่ผู้ใช้ได้เห็น ได้ตอบสนอง ไม่ใช่ระบบในทางคอมพิวเตอร์อย่างเดียวที่มี UI ถ้าเทียบกับขวดซอสมะเขือเทศ ขวดก็คือหนึ่งใน UI เช่นกันหรืออาหาร 1 จาน หน้าตาของอาหารก็ถือว่าเป็น UI ด้วย “UI เป็นสิ่งที่สามารถมองเห็นได้หรือจับต้องได้“ UX ::…

สร้าง Modal dialog อย่างง่ายด้วย jquerymodal

เนื่องจากตอนนี้มีพรบ.คอมพิวเตอร์เข้ามาเกี่ยวข้อง จึงต้องมี pop up Modal dialog ถามผู้ใช้ วันนี้จะมาแนะนำการใช้งาน jQuery ที่เรียกใช้ไม่กี่บรรทัดเราก็ได้ Modal dialog โดยจะยกตัวอย่าง Modal dialog แบบไม่ให้ปิดได้ โดยต้องอ่านข้อความก่อน ถึงจะปิดได้ ขั้นตอนที่ 1 เพิ่ม jquery.min.js, jquery.modal.min.js, jquery.modal.min.css เพื่อเรียกใช้งาน ขั้นตอนที่ 2 เพิ่มการตั้งค่า Modal dialog ตามตัวอย่างไม่ให้แสดงปุ่ม “ปิด” ขั้นตอนที่ 3 เพิ่ม User interface Modal dialog โดยใช้…

การสร้าง Dashboard บน Azure DevOps

เวลานี้ไม่ว่าจะไปที่ไหน เรามักจะได้ยินคำว่า “Dashboard” บ่อยมาก แล้ว Dashboard มีประโยชน์และสร้างอย่างไร  วันนี้เรามีวิธีการสร้าง Dashboard ง่ายๆ เพื่อใช้ในการติดตามโครงการมานำเสนอค่ะ โดยจะใช้เครื่องมือที่เรียกว่า Azure DevOps โดยเราต้องสร้างโครงการบน Azure DevOps ก่อนนะคะ (ครั้งหน้าจะมาแนะนำการสร้างโครงการบน Azure DevOps รอติดตามกันนะคะ) หลังจากสร้างโครงการบน Azure DevOps แล้ว ในการบริหารโครงการจะมีการแบ่งงานออกเป็น Work Item ในแต่ละ Work Item ก็จะมีการมอบหมายงานหรือ Assigned ให้กับผู้ร่วมโครงการแต่ละคน จากนั้นจะมีการติดตามว่าได้ดังเนินการไปถึงไหน ใช้เวลาเท่าไหร่ ตัวอย่างการสร้าง Work Item…

การย่อ-ยุบแถวข้อมูลบน GridView โดยประยุกต์ใช้ร่วมกับ jQuery และ Collapse ใน Bootstrap (C#)

           จากความเดิมตอนที่แล้ว เราได้พูดถึงวิธีการจัดการข้อมูลจำนวนมากด้วยการจัดกลุ่มหมวดหมู่ของข้อมูลใน GridView กันไปแล้ว ซึ่งหากผู้อ่านท่านใดต้องการทราบวิธีการจัดหมวดหมู่สามารถตามดูเนื้อหาในบทความได้จาก การจัดหมวดหมู่แถวของข้อมูลบน GridView ด้วย C# และในส่วนของบทความนี้จะเป็นเนื้อหาต่อยอดการทำงานจากการจัดหมวดหมู่ดังกล่าว โดยเพิ่มความสามารถให้หมวดหมู่หรือกลุ่มเหล่านั้นสามารถย่อ-ยุบได้ เพื่ออำนวยความสะดวกให้กับผู้ใช้ในการดูข้อมูลแยกส่วนกันชัดเจนมากยิ่งขึ้น หรือเพื่อตอบโจทย์ให้กับผู้ใช้บางท่านที่อาจมีความต้องการดูข้อมูลทีละส่วนได้ โดยจะนำ Component ที่ชื่อว่า Collapse ใน Bootstrap มาประยุกต์ใช้ในการแสดงผลร่วมกับ GridView และยังมี jQuery มาเป็นอีกหนึ่งตัวช่วยเพื่อให้สามารถแสดงผลตามที่ต้องการได้ โดยการอธิบายในบทความนี้ ทางผู้เขียนจะขอตัดตอนในส่วนของรายละเอียดขั้นตอนวิธีการจัดหมวดหมู่ไป และข้ามมาพูดถึงขั้นตอนที่ต้องจัดทำเพิ่มเติมในการทำย่อ-ยุบเลยละกันนะคะ            ก่อนจะไปเริ่มในส่วนของการเขียนโค้ด เรามาทำความรู้จักกับ ค่าที่จำเป็นต้องใช้ในการระบุให้กับแถวหลัก(parent)เพื่อให้สามารถย่อยุบได้ กันก่อนนะคะ data-toggle=”collapse” data-target=”.multi-collapse” เพื่อกำหนด target ที่เราต้องการให้ย่อยุบได้ โดยใช้สไตล์ชีทเป็นตัวช่วยเพื่อแยกแต่ละกลุ่มออกจากกัน ซึ่งในที่นี้จะตั้งชื่อสไตล์ชีท…

การจัดหมวดหมู่แถวของข้อมูลบน GridView ด้วย C#

          ในการดึงข้อมูลมาแสดงผลในรูปแบบตาราง GridView อาจเป็นหนึ่งในทางเลือกของนักพัฒนาที่จะหยิบไปใช้เป็นเครื่องมือในการแสดงผล แต่ในกรณีที่ข้อมูลมีจำนวนมากอาจทำให้ผู้ใช้รู้สึกตาลายและอ่านยากไปสักหน่อย ผู้พัฒนาจึงต้องพยายามหาวิธีจัดการข้อมูลในการแสดงผลให้สามารถอ่านง่ายและสบายตามากยิ่งขึ้น ดังนั้น ในกรณีที่ข้อมูลมีจำนวนมาก การจำแนกประเภท หรือแยกออกเป็นกลุ่มย่อยๆก็เป็นอีกหนึ่งในทางเลือกที่จะช่วยแก้ปัญหาดังกล่าวได้ ดังนั้น ในบทความนี้ผู้เขียนจะขอแนะนำวิธีการแสดงผลของข้อมูลบน GridView แบบจำแนกออกตามกลุ่ม เพื่ออำนวยความสะดวกให้กับผู้ใช้ในการดูข้อมูลแยกส่วนกัน เพื่อเพิ่มความสามารถให้กับ GridView ซึ่งเราเองใช้งานอยู่และน่าจะคุ้นเคยกันดีอยู่แล้ว ซึ่งจะมีขั้นตอนดังนี้ค่ะ ขั้นตอนในการพัฒนา เตรียมข้อมูลในการแสดงผล โดยจากตัวอย่างนี้ จะทำการสมมุติข้อมูลของดอกไม้ ผลไม้ และต้นไม้ และมีข้อมูลเพื่อใช้ในการแยกประเภทไว้ด้วย เพื่อให้เห็นภาพมากขึ้นค่ะ หมายเหตุ : การประกาศตัวแปร และการดึงข้อมูลเป็นเพียงการยกตัวอย่างง่ายๆ เพื่อให้ผู้ใช้เข้าใจเท่านั้น ในการทำงานจริงผู้อ่านสามารถใช้วิธีการประกาศตัวแปรและเรียกใช้แบบอื่น หรือดึงข้อมูลจากส่วนอื่นได้ ขึ้นอยู่กับความเหมาะสมและความถนัดค่ะ 2. เตรียม GridView ที่จะใช้ในการแสดงผล โดยจะขอยกตัวอย่างให้ดูการแสดงผล GridView…

ขยับแถว (row) ขึ้น/ลง ใน ASP.NET Gridview ด้วย Code Behind

เช่นเคยครับ จากบล็อก ขยับแถว (row) ขึ้น/ลง ใน ASP.NET Gridview ด้วย jQuery เป็นการเพิ่มฟีเจอร์ให้กับ ASP.NET Gridview ด้วยการประยุกต์ใช้ jQuery บทความต่อมา ก็จะเป็นการเพิ่มฟีเจอร์เดียวกัน แต่จะเป็นการพัฒนาด้วยโค้ดฝั่ง code behind เนื่องจากการทำงานฝั่ง code behind จะไม่สามารถเคลื่อนย้ายเร็คคอร์ดของ gridview ได้โดยตรง ดังนั้นเราจะทำทางอ้อม ด้วยการใช้ฟิลด์ในตารางฟิลด์หนึ่งมาเป็นข้อมูลสำหรับเรียงใน Gridview เมื่อต้องการย้ายเร็คคอร์ด เราก็จะเปลี่ยนตัวเลขในฟิลด์นี้ แล้วทำการเรียงข้อมูลใหม่ และแสดงผลข้อมูลใน Gridview อีกครั้ง ไปดูขั้นตอนต่างๆ กันเลยครับ 1. ในส่วนของโค้ด HTML…