อัษฏายุทธ์ แซ่ลิ่ม

เทคนิคการเลื่อนสลับแถว (Drag & Drop) ใน Table ด้วย JavaScript

May 5, 2023 16:33

บล็อกนี้น่าจะเป็น EP สุดท้ายของซีรี่ส์ Drag & Drop row ใน HTML Table แล้ว จากบล็อกที่ผ่านๆ มา ผู้เขียนได้ใช้เทคนิคต่างๆ โดยพึ่งพา framework ที่ใช้ในการพัฒนาโปรแกรม เช่น ASP.NET, Blazor หรือ jQuery แต่สำหรับบล็อกนี้เราจะเขียนโดยใช้ JavaScript ล้วนๆ บวกกับ CSS จาก Bootstrap อีกนิดหน่อยเพื่อความสวยงามของ Table และเพื่อไม่ให้เป็นการเสียเวลา เรามาลุยกันเลยครับ 1. เริ่มต้นด้วยการเตรียมไฟล์ HTML ดังโค้ดด้านล่าง 2. เพิ่ม code JavaScript สำหรับเพิ่มข้อมูลลงใน Table ใน event window.onload โดยเราจะเพิ่มแท็ก <tr> ใน element tbody ที่มี id=”provinceList” และระบุ class=”prv-item” สำหรับใช้ในการอ้างถึงจากโค้ด JavaScript ซึ่งจะได้ผลลัพธ์หน้าจอดังรูป และเป้าหมายของเราก็คือสามารถคลิกเลือกจังหวัด จากนั้นลากและวางไปยังตำแหน่งที่ต้องการได้ 3. และเพิ่มโค้ด JavaScript สำหรับผูก event ต่างๆ เข้ากับแต่ละ <tr> ที่เพิ่มเข้าไป ใน event window.onload เพื่อให้สามารถลากและวางได้ 4. เพิ่มโค้ด JavaScript ส่วนควบคุม event ต่างๆ คือ เมื่อเริ่มกดลาก เมื่อกดวาง และฟังก์ชันสำหรับหาตำแหน่งของแถว (<tr>) ที่เริ่มกดลาก ดังนี้ 4. เมื่อทดสอบการทำงาน รายชื่อจังหวัดในตารางจะสามารถคลิก ลาก และวางไปยังตำแหน่งที่ต้องการได้ 5. และเมื่อ drop ลงไปยังตำแหน่งที่ต้องการ จังหวัดที่ลากมาก็จะแทรกเข้าไปยังตำแหน่งที่ drop จากซีรี่ส์ Drag & Drop Row ใน Table อันยาวนานนี้ ผู้เขียนหวังเป็นอย่างยิ่งว่าจะมีประโยชน์กับผู้อ่านไม่มากก็น้อยที่จะนำไปประยุกต์ใช้กับงานของตัวเอง แล้วเจอกันใหม่โอกาสหน้า เมื่อผู้เขียนจะมีเหตุให้ต้องเข้ามาอีก สวัสดีครับ แหล่งข้อมูลอ้างอิง

ฟังก์ชัน array_agg และ array_to_string ใน PostgreSQL

February 13, 2023 08:54

ผู้เขียนได้มีโอกาสพัฒนาโปรเจ็คใหม่ที่จะต้องไปใช้งานฐานข้อมูล PostgreSQL ซึ่งไม่เคยใช้งานมาก่อน โดยคำสั่งพื้นฐานทั่วไปก็จะเหมือนๆ กัน ตามมาตรฐานคำสั่ง SQL แต่ก็มีบางฟังก์ชันที่มีเฉพาะเจาะจงแตกต่างกันไปในแต่ละฐานข้อมูล อย่างเช่นที่จะกล่าวถึงในบล็อกนี้ โดยโจทย์ก็คือ ต้องการรวมข้อมูลในฟิลด์เดียวกันที่อยู่กันคนละเรคคอร์ด ให้มาเชื่อมต่อกัน เช่น มีตารางข้อมูลจังหวัด และอำเภอ ความต้องการก็คือ นำชื่ออำเภอทั้งหมดภายในจังหวัดเดียวกันมาแสดงเรียงต่อ ดังตัวอย่าง “ปัตตานี” “หนองจิก, โคกโพธิ์” “ยะลา” “เบตง, ธารโต, รามัน” “สงขลา” “กระแสสินธุ์, หาดใหญ่, คลองหอยโข่ง” ซึ่งภายใน PostgreSQL เราจะใช้งานฟังก์ชัน array_agg และ array_to_string โดย expression จะเป็นฟิลด์ หรือกลุ่มฟิลด์ที่จะดึงมารวมเข้าไว้ด้วยกัน sort_expression ฟิลด์ที่จะใช้ในการเรียง โดย anyarray ข้อมูลในรูปแบบ array delimeter ตัวอักษรหรือสัญลักษณ์ที่ใช้คั่นระหว่างข้อมูลที่มาเชื่อมต่อกัน null_string ตัวอักษรหรือสัญลักณ์ที่จะใช้แสดงเมื่อ element ใน array มีค่าเป็น null ตัวอย่างคำสั่ง ซึ่งจะได้ผลลัพธ์ดังรูป เนื่องจากจะเป็นการรวมข้อมูลในแต่ละจังหวัด เราก็เลยจะต้องใช้ฟังก์ชัน group by ร่วมด้วย จากผลลัพธ์จะเห็นว่าเราจะได้ข้อมูลที่ใกล้เคียงกับที่เราต้องการแล้ว เพียงแต่ข้อมูลอำเภอจะยังอยู่ในรูปแบบ array เพราะฉะนั้น เราจะต้องใช้ฟังก์ชัน array_to_string มาช่วยแปลงข้อมูล array มาอยู่ในรูปแบบ string ตามที่เราต้องการ ดังตัวอย่าง จะได้ผลลัพธ์ดังภาพ ซึ่งบทความนี้เป็นเพียงหนึ่งตัวอย่างของฟังก์ชันของ PostgreSQL ที่แตกต่างจากฐานข้อมูลอื่นๆ ซึ่งเราก็จะต้องศึกษาเรียนรู้กันต่อไป ถ้าผู้เขียนมีโอกาสได้ใช้งานฟังก์ชันหรือฟีเจอร์อะไรแปลกใหม่ ก็จะพยามนำมาบันทึกไว้ ในโอกาสต่อๆ ไป ขอบคุณครับ ข้อมูลอ้างอิง

เทคนิคการขยับแถวขึ้นลงใน Table ด้วยวิธี Drag & Drop ใน Blazor

February 9, 2023 07:24

สำหรับ 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. จากนั้นเพิ่มโค้ดส่วนที่ควบคุมการ Drag และ Drop ทั้งใน HTML และ C# 4. เมื่อทดสอบการทำงาน รายชื่อจังหวัดในตารางจะสามารถคลิก ลาก และวางไปยังตำแหน่งที่ต้องการได้ 5. และเมื่อ drop ลงไปยังตำแหน่งที่ต้องการ จังหวัดที่ลากมาก็จะแทรกเข้าไปยังตำแหน่งที่ drop ขั้นตอนถัดไป ท่านผู้อ่านก็แค่ทำการบันทึกตำแหน่งใหม่ของจังหวัดลงในฐานข้อมูลหรือทำอย่างอื่นได้ต่อไป ซึ่งวิธีการนี้เราสามารถนำไปประยุกต์ใช้กับคอมโพเน้นอื่นๆ ได้ เช่น li, div หรืออย่างอื่นที่ผู้ใช้ในการนำเสนอข้อมูลในรูปแบบรายการ ผู้เขียนหวังเป็นอย่างยิ่งว่าบทความนี้น่าจะมีประโยชน์ต่อผู้อ่านไม่มากก็น้อย แล้วเจอกันใหม่โอกาสหน้า สวัสดีครับ แหล่งข้อมูลอ้างอิง

เทคนิคการดึงข้อมูล Youtube Video ผ่าน Youtube API

February 5, 2023 21:06

กลับมาพบกับท่านผู้อ่านอีกครั้งหนึ่ง หลังจากห่างหายกันไปนาน เนื่องจากผู้เขียนได้รับโจทย์ที่ทำให้ต้องทำการ research เล็กน้อย จึงขอนำมาบันทึกไว้กันลืมสำหรับตัวเอง และเผื่อท่านผู้อ่านแวะเข้ามาจะสามารถนำไปประยุกต์ใช้ได้ โจทย์ที่ว่าก็คือ จะต้องดึงข้อมูลรายละเอียดต่างๆ ของ Youtube จาก URL ที่ระบุ ไม่ว่าจะเป็น Thumbmail, Title, Description ซึ่งจากการไปศึกษา API ที่ Youtube ได้จัดเตรียมไว้ให้ ก็พบว่าสามารถใช้งานได้อย่างไม่ยุ่งยากแต่อย่างใด เพียงแต่เราจะต้องมี API Key ที่ต้องใช้ในการเข้าถึงข้อมูลต่างๆ ของ Youtube ดังนั้นเริ่มต้นเราจะไปดูวิธีการให้ได้มาซึ่ง API Key ก่อน 1. เข้าไปที่ https://console.cloud.google.com/cloud-resource-manager และ login ด้วย google account ให้เรียบร้อย จากนั้นทำการสร้าง Project ใหม่ 2. ป้อนชื่อโปรเจ็ค ในที่นี้สมมติเป็น Sample Project กด CREATE 3. จากนั้นให้ทำการ Enable API เพื่อให้โปรเจ็คที่เราสร้างสามารถใช้งานได้ โดยให้ไปที่เมนูแฮมเบอร์เกอร์ -> APIs & Services -> Enabled APIs & services 4. กด + ENABLE APIS AND SERVISES 5. ค้น Youtube Data API 6. เลือก YouTube Data API v3 และกด Enable 7. กด Enable 8. กลับไปที่ Enable APIS And Services และเลือก YouTube Data API v3 9. เลือก CREATE CREDENTIALS 10. เลือก Public data และกด NEXT 11. จะได้ API Key ที่จะนำไปใช้ในการเขียนโปรแกรมเพื่อดึงข้อมูลจาก Youtube API ให้สำเนาเก็บไว้ใช้งานในขั้นตอนต่อไป เมื่อเราได้ API Key มาแล้ว เราก็จะมาถึงขั้นตอนในการเขียนโปรแกรมกันต่อ เนื่องจากในตอนนี้ผู้เขียนพัฒนาโปรเจ็คต่างๆ ด้วย Blazor ซึ่งเป็นเฟรมเวิร์คปัจจุบันของ ASP.NET ตัวอย่างโค้ดผู้เขียนก็จะขอเขียนด้วย Blazor ซึ่งในส่วนของการติดต่อ API ก็น่าจะพอเป็นแนวทางให้กับการพัฒนาด้วยเฟรมเวิร์คอื่นหรือภาษาอื่นได้ และเพื่อไม่ให้บล็อกนี้ยาวเกินไป ผู้เขียนขอข้ามขั้นตอนการสร้างโปรเจ็คไปเลย 1. เริ่มต้นเพื่อให้โปรเจ็คของเราสามารถใช้งาน Youtube API ได้ เราจะต้องติดตั้ง Library ที่จำเป็นก่อน โดยเราจะติดตั้งผ่านเครื่องมือที่เรียกว่า Nuget โดยคลิกขวาที่โปรเจ็ค เลือก Manage Nuget Packages… 2. ค้น Youtube เลือก Google.Apis.Youtube.v3 และ Install 3. และเพื่อให้ page ที่เราจะเขียนโปรแกรมติดต่อกับ Youtube API สามารถใช้งาน Library ดังกล่าวได้ เราจะต้องเพิ่ม using Library นั้นๆ เข้ามาก่อน 4. สร้าง YoutubeService เพื่อใช้ในการติดต่อ API และเราจะกำหนด API Key ใน object นี้ ดังโค้ดตัวอย่าง 5. สร้าง object ListRequest และกำหนดข้อมูลที่ต้องการเป็น snippet ผ่านเมทธอด List ซึ่ง snippet จะเป็น object ที่บรรจุข้อมูลต่างๆ ของวิดีโอยูทูปนั้นๆ 6.

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

May 27, 2021 14:02

เช่นเคยครับ จากบล็อก ขยับแถว (row) ขึ้น/ลง ใน ASP.NET Gridview ด้วย jQuery เป็นการเพิ่มฟีเจอร์ให้กับ ASP.NET Gridview ด้วยการประยุกต์ใช้ jQuery บทความต่อมา ก็จะเป็นการเพิ่มฟีเจอร์เดียวกัน แต่จะเป็นการพัฒนาด้วยโค้ดฝั่ง code behind เนื่องจากการทำงานฝั่ง code behind จะไม่สามารถเคลื่อนย้ายเร็คคอร์ดของ gridview ได้โดยตรง ดังนั้นเราจะทำทางอ้อม ด้วยการใช้ฟิลด์ในตารางฟิลด์หนึ่งมาเป็นข้อมูลสำหรับเรียงใน Gridview เมื่อต้องการย้ายเร็คคอร์ด เราก็จะเปลี่ยนตัวเลขในฟิลด์นี้ แล้วทำการเรียงข้อมูลใหม่ และแสดงผลข้อมูลใน Gridview อีกครั้ง ไปดูขั้นตอนต่างๆ กันเลยครับ 1. ในส่วนของโค้ด HTML จะมีการปรับปรุงเพิ่มเล็กน้อยเฉพาะในส่วนของปุ่ม UP/DOWN ซึ่งเราจะเปลี่ยนไปใช้ปุ่มที่เป็นคอนโทรลของ ASP.NET เพื่อให้สามารถเขียนโปรแกรมควบคุมจากฝั่ง code behind ได้ โดย CommndName ใช้สำหรับตรวจสอบว่าเป็นการเลือก up หรือ down CommandArgument ใช้สำหรับระบุแถวที่คลิกเลือก 2. ในส่วนของโค้ดที่ใช้สร้างข้อมูลเพื่อแสดงใน Gridview เราจะเพิ่มฟิลด์ขึ้นมาอีก 1 ฟิลด์ เพื่อใช้กำหนดลำดับการแสดงผล จากตัวอย่างโค้ด ก็คือฟิลด์ SEQ 3. เพิ่มโค้ดในส่วนของ gvBib_RowCommand ซึ่งเป็น event ที่จะเกิดเมื่อมีการคลิกปุ่ม UP หรือ DOWN เมื่อทดลองรัน จะปรากฏผลลัพธ์ดังรูปด้านล่าง เมื่อทดลองคลิกปุ่ม UP หรือ DOWN ระบบก็สามารถย้ายแถวที่ต้องการไปยังตำแหน่งที่ก่อนหน้าหรือถัดไปได้อย่างถูกต้อง ยกเว้นการคลิก UP ที่แถวแรก และ DOWN ที่แถวสุดท้าย จะเกิด Error ดังภาพ โดยเราจะต้องตรวจสอบเพิ่มเติมก่อนว่า เมื่อคลิกปุ่ม UP จะต้องไม่ใช่แถวแรก และคลิกปุ่ม DOWN จะต้องไม่ใช่แถวสุดท้าย เมื่อทดสอบรันอีกครั้ง ก็พบว่าสามารถทำงานได้ปกติ เมื่อคลิกปุ่ม UP ที่แถวแรก หรือปุ่ม DOWN ที่แถวสุดท้าย ก็จะไม่เกิด Error ผู้เขียนหวังเป็นอย่างยิ่งว่าบทความนี้จะมีประโยชน์ไม่มากก็น้อย ที่ผู้อ่านน่าจะสามารถนำไปประยุกต์ใช้ในงานของตัวเอง จนกว่าจะพบกันใหม่ สวัสดีครับ แหล่งข้อมูลอ้างอิง https://stackoverflow.com/questions/44976025/move-rows-up-and-down-in-asp-net-gridview https://www.aspdotnet-suresh.com/2012/06/move-aspnet-gridview-rows-up-and-down.html https://stackoverflow.com/questions/7994371/how-to-move-the-rows-in-the-gridview-up-and-down https://stackoverflow.com/questions/11986507/move-asp-net-gridview-rows-up-and-down-with-button-click-with-sorting-enabled