CoP PSU IT Blog – Page 18 – แหล่งรวมบทความเกี่ยวกับ IT โดยชาว PSU IT

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

วิธีใช้ Power Query ดึงข้อมูลจาก PSU Web API

February 6, 2023 15:58

PSU Web API เป็นเว็บที่ให้บริการข้อมูลในรูปแบบ JSON ทุกท่านที่มี PSU Passport สามารถสมัครเพื่อขอใช้บริการได้ที่เว็บไซต์ api.psu.ac.th โดยปัจจุบันข้อมูลที่เปิดให้บริการแล้วคือ ข้อมูลส่วนกลาง ข้อมูลระบบสารสนเทศนักศึกษา และข้อมูลระบบสารสนเทศบุคลากร สำหรับทุกท่านที่สนใจใช้บริการข้อมูลสามารถศึกษาวิธีการได้จากคู่มือของระบบค่ะ วันนี้จะขอนำเสนอวิธีการดึงข้อมูลจาก PSU Web API ที่ให้บริการออกมาเป็นรูปแบบตารางด้วย Power Query ใน Microsoft Excel 365 กันค่ะ ซึ่งการดึงข้อมูลด้วย Power Query นี้น่าจะเหมาะสำหรับคนที่ไม่ถนัดในการเขียนโปรแกรมเพื่อดึงข้อมูลมาใช้งานกันค่ะ STEP 1 : เชื่อมต่อกับแหล่งข้อมูล PSU Web API STEP 2 : ตั้งค่า Power Query Editor STEP 3 : ทำการ Transpose และแตก List ข้อมูล STEP 4 : Power Query ดึงข้อมูลจาก PSU Web API มาแสดงเป็นตารางเรียบร้อยแล้วค่ะ ^_^ หวังว่าโพสนี้จะเป็นประโยชน์ต่อผู้อ่านไม่มากก็น้อยนะคะ แล้วพบกันใหม่ค่ะ

วิธีรวมข้อมูล Excel จากหลายชีทเข้าด้วยกันเป็นตารางเดียวด้วย Power Query

February 6, 2023 15:42

Power Query เครื่องมือสำคัญของ Power BI และ Microsoft Excel 2016 | 2019 | 365 ที่จะช่วยจัดการข้อมูลให้ได้ตามต้องการ ไม่ว่าเป็นการรวบรวมข้อมูลจากหลายแหล่งเข้าด้วยกัน การเปลี่ยนประเภทข้อมูล การจัดตารางหรือคิวรี การจัดคอลัมน์ การจัดการข้อมูลที่บกพร่อง การรวมข้อมูล การแยกข้อมูล การปรับแต่งข้อมูล และการสร้างรูปแบบข้อมูล จุดเด่นของ Power Query ในการใช้งาน Microsoft Excel เราอาจจะมีความจำเป็นที่จะรวมรวมข้อมูลจากหลาย ๆ ซีทเป็นตารางเดียว เพื่อให้สามารถนำไปวิเคราะห์ต่อ วันนี้จึงจะขอนำเสนอความสามารถของ Power Query เพื่อรวมข้อมูล Excel แต่ละชีทรวมเป็นตารางเดียวโดยเริ่มจาก STEP 1 : ทำการแปลงข้อมูลในแต่ละชีทให้เป็นตาราง STEP 2 : รวมข้อมูลเป็นตารางเดียวด้วย Power Query STEP 3 : กำหนดรายละเอียดของ Query STEP 4 : กำหนดรายละเอียดของคอลัมน์ STEP 4 : Power Query รวมข้อมูล Excel จากหลายชีทเข้าด้วยกันเป็นตารางเดียวเรียบร้อยแล้วค่ะ ^_^ หวังว่าโพสนี้จะเป็นประโยชน์ต่อผู้อ่านไม่มากก็น้อยนะคะ แล้วพบกันใหม่ค่ะ

วิธีการแยกคำนำหน้าชื่อ ชื่อและนามสกุล ที่รวมอยู่ในช่องเดียวกันใน Microsoft Excel

February 6, 2023 15:35

ในการใช้งาน Microsoft Excel เราคงจะเคยเจอปัญหาที่ข้อมูลมีทั้งคำนำหน้าชื่อ ชื่อและนามสกุล รวมอยู่ในช่องเดียวกัน แต่การนำไปใช้งานของเราต้องการที่จะแยกคำนำหน้าชื่อ ชื่อและนามสกุลออกจากกันเป็นคนละช่อง วันนี้จะขอนำเสนอสูตรเพื่อแก้ปัญหาดังกล่าวข้างต้น มาดูกันเลยคะว่าทำยังไง ในการแก้ปัญหานี้จะต้องใช้ฟังก์ชันหลายฟังก์ชัน รวมทั้งเทคนิคการคำนวณแบบ Array ของ Excel ผสมผสานกันโดยเริ่มจาก STEP 1 : สร้างคอลัมน์สำหรับการแสดงผล และสร้าง List รายการคำนำหน้าชื่อที่คอลัมน์ I STEP 2 : ทำการแปลง TITLE_LIST เป็นตาราง เพื่อความสะดวกในการจัดการข้อมูลคำนำหน้าชื่อและการอ้างอิงข้อมูล STEP 3 : ทำการแยกเฉพาะคำนำหน้าชื่อมาแสดงที่คอลัมน์ D ด้วยฟังก์ชัน SEARCH , MATCH และ INDEX =INDEX(TITLE[TITLE_LIST],MATCH(1,SEARCH(TITLE[TITLE_LIST],B2),0)) ฟังก์ชัน SEARCH : ค้นหาสตริงข้อความหนึ่งภายในสตริงข้อความที่สอง และส่งกลับตัวเลขที่เป็นตำแหน่งเริ่มต้นของสตริงข้อความแรกจากอักขระแรกของสตริงข้อความที่สอง ไวยากรณ์ : SEARCH(find_text,within_text,[start_num]) กรณี ฟังก์ชัน MATCH : ค้นหารายการที่ระบุช่วงในเซลล์ แล้วส่งกลับตําแหน่งสัมพันธ์ของรายการนั้นในช่วง ตัวอย่างเช่น ถ้าช่วง A1:A3 มีค่า 5, 25 และ 38 สูตร =MATCH(25,A1:A3,0) จะส่งกลับตัวเลข 2 เนื่องจาก 25 เป็นรายการที่สองในช่วง ไวยากรณ์ : MATCH(lookup_value, lookup_array, [match_type]) ฟังก์ชัน INDEX : ส่งกลับค่าจากภายในตารางหรือช่วงข้อมูล ไวยากรณ์ : INDEX(array, row_num, [column_num]) STEP 4 : ทำการแยกชื่อและนามสกุลออกจากคำนำหน้าชื่อมาแสดงที่คอลัมน์ C ด้วยฟังก์ชัน SUBSTITUTE =SUBSTITUTE(B2,D2,””) ฟังก์ชัน SUBSTITUTE : ใช้แทนที่ข้อความเดิม old text ด้วยข้อความใหม่ new text ส่วน instance_num ใช้เพื่อระบุตำแหน่งการแทนที่ ซึ่งถ้าไม่ระบุ old text จะถูกเปลี่ยนด้วย new text ทั้งหมด ไวยากรณ์ : SUBSTITUTE(text, old_text, new_text, [instance_num]) STEP 5 : ทำการแยกชื่อมาแสดงที่คอลัมน์ E ด้วยฟังก์ชัน LEFT และ SEARCH =LEFT(C2,SEARCH(” “,C2,1)-1) ฟังก์ชัน LEFT : ส่งกลับอักขระจำนวนหนึ่งที่อยู่ในลำดับแรกๆ ในสตริงข้อความ ตามจำนวนอักขระที่ระบุ ไวยากรณ์ : LEFT(text, [num_chars]) STEP 6 : ทำการแยกนามสกุลมาแสดงที่คอลัมน์ F ด้วยฟังก์ชัน RIGHT , LEN และ SEARCH =RIGHT(C2,LEN(C2)-SEARCH(” “,C2,1)) ฟังก์ชัน RIGHT : ส่งกลับอักขระสุดท้ายจำนวนหนึ่งในสตริงข้อความ ตามจำนวนอักขระที่ระบุ ไวยากรณ์ : RIGHT(text,[num_chars]) ฟังก์ชัน LEN : ส่งกลับเป็นจำนวนอักขระในสตริง ไวยากรณ์ : LEN(text) STEP 7 : แยกคำนำหน้าชื่อ ชื่อและนามสกุล ที่รวมอยู่ในช่องเดียวกันใน Microsoft Excel เรียบร้อยแล้วค่ะ ^_^ หวังว่าโพสนี้จะเป็นประโยชน์ต่อผู้อ่านไม่มากก็น้อยนะคะ แล้วพบกันใหม่ค่ะ

เทคนิคการดึงข้อมูล 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.