สำหรับ blog นี้ของผู้เขียน ถือว่าเป็นซีรี่ส์ที่ต่อเนื่องมาจาก https://sysadmin.psu.ac.th/2021/05/25/ขยับแถว-row-ขึ้น-ลง-ใน-asp-net-gridview-ด้วย-j/ และ https://sysadmin.psu.ac.th/2021/05/27/ขยับแถว-row-ขึ้น-ลง-ใน-asp-net-gridview-ด้วย-c/ ก็คือผู้เขียนจะนำเสนอวิธีการขยับแถวอีกวิธีหนึ่ง ที่น่าจะเฟรนด์ลี่ต่อผู้ใช้มากกว่า นั่นก็การ Drag & Drop ก็คือผู้ใช้งานสามารถเลือกคลิก ลาก และวาง เพื่อจัดลำดับได้ตามความต้องการ ซึ่งเมื่อผู้เขียนมาทำงานบน Blazor พบว่าการ implement เรื่องนี้สามารถทำได้ง่ายมาก โดยไม่ต้องพี่งพา javascript แต่อย่างใด เรามาดูกันเลยครับ 1. เพิ่มโค้ด HTML ในส่วนของการแสดงผลข้อมูลในรูปแบบ Table 2. เพิ่มโค้ด C# ในส่วนที่ควบคุมการทำงานและจำลองข้อมูล ซึ่งจะได้ผลลัพธ์หน้าจอดังรูป และเป้าหมายของเราก็คือสามารถคลิกเลือกจังหวัด จากนั้นลากและวางไปยังตำแหน่งที่ต้องการได้ 3. จากนั้นเพิ่มโค้ดส่วนที่ควบคุมการ…
Category: การพัฒนา Web Application
เทคนิคการดึงข้อมูล Youtube Video ผ่าน Youtube API
กลับมาพบกับท่านผู้อ่านอีกครั้งหนึ่ง หลังจากห่างหายกันไปนาน เนื่องจากผู้เขียนได้รับโจทย์ที่ทำให้ต้องทำการ research เล็กน้อย จึงขอนำมาบันทึกไว้กันลืมสำหรับตัวเอง และเผื่อท่านผู้อ่านแวะเข้ามาจะสามารถนำไปประยุกต์ใช้ได้ โจทย์ที่ว่าก็คือ จะต้องดึงข้อมูลรายละเอียดต่างๆ ของ Youtube จาก URL ที่ระบุ ไม่ว่าจะเป็น Thumbmail, Title, Description ซึ่งจากการไปศึกษา API ที่ Youtube ได้จัดเตรียมไว้ให้ ก็พบว่าสามารถใช้งานได้อย่างไม่ยุ่งยากแต่อย่างใด เพียงแต่เราจะต้องมี API Key ที่ต้องใช้ในการเข้าถึงข้อมูลต่างๆ ของ Youtube ดังนั้นเริ่มต้นเราจะไปดูวิธีการให้ได้มาซึ่ง API Key ก่อน 1. เข้าไปที่ https://console.cloud.google.com/cloud-resource-manager และ login ด้วย…
แก้ปัญหาการเรียกใช้ 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 ที่เราต้องการให้ย่อยุบได้ โดยใช้สไตล์ชีทเป็นตัวช่วยเพื่อแยกแต่ละกลุ่มออกจากกัน ซึ่งในที่นี้จะตั้งชื่อสไตล์ชีท…