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

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

Read More »
Capturing website with screenshotr.app

📸 How to Capture screen website แบบเก๋ๆ

         🙏สวัสดีครับ การเขียน Blog หรือการทำคู่มือที่เกี่ยวข้องกับระบบสารสนเทศ เพื่อให้ง่ายต่อการอ่านหรือใช้งานระบบ ปกติแล้วเราก็จะใช้ปุ่ม print screen เพื่อ capture หน้าจอแล้วก็ save as image ออกมาเลย หรือเอารูปที่ capture มา ไปใช้กับโปรแกรมอื่นก็ได้ เช่น Photoshop, Illustrator หรือ Mockup Generator เพื่อที่จะได้รูปประกอบที่สวยงามและเหมาะแก่การนำเสนอให้น่าสนใจมากขึ้น            เอาหละ จากที่เกริ่นมา เรามีเครื่องมือมานำเสนอทุกคน เครื่องมือที่จะไปช่วยเรา Capture หน้าจอออกมาแล้วนำมาใส่ในกรอบ Browser เก๋ๆให้เราเลย เราก็แค่ใส่ URL และกด Download ออกมาใช้งานได้เลย เครื่องมือที่ว่ามีชื่อว่า 🎊 “Screenshotr” 🎊 (คำว่า Screenshot + ตัวอักษร r)             Screenshotr เป็นเครื่องมือจัดการ Capture screen และ Mockup ออนไลน์ เปิด Browser ขึ้นไป พิมพ์ที่แถบ URL ไปว่า ฉันจะไปที่  screenshotr.app  เข้าผ่านเว็บแบบนี้แสดงว่าาาาา น้องเป็น Online tool ไม่ต้องโหลดโปรแกรมใดๆ ใช้งานได้ทันที สะดวกมากมาย ที่สำคัญ ฟรี จ้าาา มาถึงตรงนี้แล้วคงสงสัยว่าหน้าตามาจะออกมาเป็นยังไง ไปดูกันเลยยย            หน้าตาดู Professional ขึ้นมาเลยทันที 😎 อันนี้คือเลือกสีพื้นหลังมา ใส่เงาแล้ว Download รูปออกมาแล้ว ใช้เวลาประมาณ 45-60 วินาที ซึ่งจริงๆแล้วเราสามารถ Customize ส่วนต่างๆได้เช่น ขนาดของ Canvas, การแสดง URL, ประเภทของไฟล์, Scale ของภาพ หน้าตาของเจ้า Screenshotr จะประกอบด้วย 3 ส่วนหลักๆคือ ส่วนของ Preview รูป, แถบด้านซ้ายสำหรับการปรับค่าต่างๆ, แถบข้างบนสำหรับการใส่ URL และ Upload รูปภาพ 🌈 วิธีการใช้งาน            จบไปแล้วสำหรับวิธีใช้งาน มีแค่ 3 ขั้นตอนง่ายๆ ก็ได้ภาพออกมาแบบสวยงาม ยังมีเครื่องมือที่ช่วยอำนวยความสะดวกอีกมากมาย ไว้มีโอกาสนะมา(แนะนำ)ขายของให้ใหม่อีก แล้วพบกันใหม่ สวัสดี 😘🥳🥳

Read More »

การแยก/รวมไฟล์ PDF และลบข้อความใน VDO ด้วย123apps

ถ้าเราต้องการจะแยกไฟล์ PDF ออกเป็นแต่ละหน้าตามที่เราต้องการ หรือว่าเรามีไฟล์ PDF หลาย ๆ ไฟล์แยกกันอยู่ ให้รวมกันเป็นไฟล์เดียวเราจะมีวิธีการอย่างไรนะ? การแยกไฟล์ PDF เราจะเลือกไฟล์ไหน หน้าไหนก็ได้ เรามาที่ “เลือกไฟล์” แล้วเลือกไฟล์ที่เราต้องการ แบ่ง (Split) มันก็จะ Show ว่าตอนนี้มีกี่หน้า เลือกไฟล์ที่ต้องการจะแยก เช่นเลือกหน้า 2 5 7 9 ส่วนหน้าอื่นไม่เอา สามารถพิมพ์หน้าที่เลือกได้เอง จากนั้นคลิกปุ่ม “แบ่ง” จากนั้นคลิกปุ่ม “ดาวน์โหลด” เปิดไฟล์ที่ได้ จะเห็นว่าเหลือ 5 หน้าตามที่เลือก การรวมไฟล์ PDF เปิดไฟล์ที่ได้ จะเห็นว่ารวมได้ 85 page ลบข้อความใน VDO ท้ายนี้ขอแถมนิดนึง พอดีเรื่อง PDPA มาแรง เห็นว่ามีประโยชน์กับงานเลยเอามาแชร์ เนื่องจากว่าเราทำ VDO แล้วติดข้อมูลส่วนบุคคล แต่เราต้องการเบลอข้อมูลหรือเอาออก ขั้นตอนง่าย ๆ เลย ด้วย 123apps จากรูปจะเห็นได้ว่าใน VDO ที่วงกลมสีแดงชื่อข้อมูลส่วนบุคคล เราจะลบออกหรือเบลอข้อมูลส่วนนี้ใน VDO ทำตามขั้นตอนและบันทึก แล้วลองเปิดไฟล์ VDO ดู มันจะลบข้อมูลส่วนที่เราเลือกตลอดทั้งคลิปเลยหล่ะ อาจจะเป็นบทความที่ง่ายหรือหลาย ๆ ท่านทราบอยู่แล้ว ขอบคุณที่เข้ามาอ่าน มาให้กำลังใจคนเขียนนะคะ

Read More »

วิธีนำข้อมูลตารางในไฟล์ PDF มาวิเคราะห์ต่อใน Excel ด้วย Power Query

บ่อยครั้งที่เราต้องการนำข้อมูลจากตารางในไฟล์ PDF มาคำนวณหรือนำไปใช้วิเคราะห์ต่อใน Excel และมักจะพบปัญหาเวลา copy ข้อมูลมาใส่ใน Excel แล้ว Format ต่าง ๆ ของข้อมูลไม่ได้ดั่งใจ เมื่อทำการคลุมและ Ctrl + C เพื่อ Copy นำมาวางไว้ที่ไฟล์ Excel Ctrl+V  แล้วพบว่าข้อมูลที่วางลงไปมันไม่เป็นระเบียบเหมือนต้นฉบับ (เละเทะหนักมาก…) เราสามารถแก้ไขปัญหานี้ ได้ด้วยเครื่องมือที่ชื่อว่า Power Query ใน Excel โดยคำสั่งนี้จะมีใน Excel เวอร์ชัน (Excel 365, 2021) เป็นต้นไป วิธีการคือ……ไปที่แถบเมนู Data ซึ่ง Excel เวอร์ชันใหม่ๆ จะมี คำสั่ง From File >> From PDF ให้เลือกไฟล์ PDF ที่เราต้องการ Import เข้าสู่ Excel   เมื่อนำเข้ามาแล้ว… Excel จะให้เลือกว่าเราจะแสดงข้อมูลจากตารางในหน้าไหน หรือจะแสดงข้อมูลทั้งหมดในหน้าไหน หากข้อมูลที่ได้มาพร้อมใช้งาน เราสามารถเลือกที่ละหน้าหรือหลายๆหน้า โดยคลิกที่ Select multiple items มาแสดงใน Excel ได้ ตัวอย่างไฟล์ PDF ที่ใช้มี 1 หน้า เมื่อเลือก Page001 แล้วให้คลิกที่ Load >> Load เพื่อนำข้อมูลมาแสดงในรูปแบบตาราง Wow… เพียงเท่านี้ Excel ของเราก็จะแสดงข้อมูลจากไฟล์ PDF มาเป็นตารางงามตา…พร้อมปรับแก้เพื่อใช้งานต่อไปได้

Read More »

การตรวจสอบพื้นที่ใน One Drive

1. เข้า web OneDrive https://emailpsuac-my.sharepoint.com2. คลิกที่รูปฟันเฟืองด้านขวา เลือก การตั้งค่า OneDrive 3. เมนูด้านซ้ายคลิก การตั้งค่าเพิ่มเติม ด้านขวาคลิก เมตริกของที่เก็บข้อมูล 4. ระบบจะแสดงการใช้พื้นที่ใน OneDrive

Read More »