เขียน JavaScript กับข้อมูลที่ sensitive โดยใช้ RegExp เพื่อแสดงบางส่วน เนื่องจากทางผู้เขียนได้รับ requirement ให้ปรับปรุงข้อมูลที่อ่อนไหว ให้แสดงบางส่วน อย่างเช่น เลขบัตรประชาชน โดยก่อนอื่นจะอธิบายความหมายสัญลักษณ์ RegExp ตัวอย่างเช่น สัญลักษณ์ ความหมาย . หาตัวอักษรเดียวและยกเว้น newline หรือ line terminator เช่น คำว่า “Thailand Finland” หากใช้ pattern /./ จะได้ผลลัพธ์ “T” n{X} นับจำนวนอักษรทั้งหมดตามจำนวน X ตัวอักษร เช่น คำว่า “Thailand…
Category: Developer
งานพัฒนาระบบ, เขียนโปรแกรม
เทคนิคการขยับแถวขึ้นลงใน 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. จากนั้นเพิ่มโค้ดส่วนที่ควบคุมการ…
เทคนิคการดึงข้อมูล 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 ด้วย…
เรียนรู้เบื้องต้นกับการใส่ลายน้ำ(Watermark)ให้กับเอกสาร PDF ของเราด้วย iTextSharp
ในบทความนี้เราก็ยังคงอยู่กับเรื่องการทำภาพลายน้ำอย่างต่อเนื่องจาก EP. ที่แล้วที่พูดถึงการทำข้อความลายน้ำบนภาพที่เราทำการอัพโหลด ถ้าใครยังไม่ได้อ่านสามารถตามไปอ่านกันได้ ที่นี่ นะคะแต่สำหรับ EP. นี้เราจะขอเปลี่ยนบรรยากาศไปทำ ลายน้ำบนไฟล์ PDF โดยใช้เครื่องมือ iTextSharp กันบ้าง เผื่อว่าผู้อ่านบางท่านที่อาจจะกำลังใช้งาน iTextSharp ในการจัดทำไฟล์ PDF อยู่พอดี และอยากจะลองใส่ลายน้ำให้กับงานเอกสารของท่านดูบ้าง จะได้สามารถนำวิธีการนี้ไปประยุกต์ใช้กับงานของตนได้ไม่ทางใดก็ทางหนึ่งนะคะ โดยตัวอย่างที่จะนำมาแนะนำกันจะมีทั้งแบบลายน้ำที่เป็นข้อความ และลายน้ำที่เป็นภาพค่ะ นอกจากนี้ก็ยังมีทั้งแบบที่เป็นการทำภาพลายน้ำทับไฟล์เดิมที่มีอยู่ และแบบที่ทำภาพลายน้ำและบันทึกเป็นไฟล์ใหม่ค่ะ ผู้อ่านจะได้ลองในหลายๆวิธี และสามารถเลือกไปปรับใช้ให้เหมาะกับงานของแต่ละท่านได้เพื่อไม่ให้เป็นการเสียเวลา งั้นเรามาเริ่มทำภาพลายน้ำบนงานเอกสาร PDF ของเรากันเลยดีกว่าค่ะ แบบที่ 1 : การสร้างลายน้ำแบบข้อความ…
มาลองใส่ข้อความ/ภาพลายน้ำ(Watermark) บนรูปภาพที่เราอัพโหลดด้วย C# กันเถอะ
ในการทำงานของนักพัฒนาโปรแกรม อาจจะมีบางงานที่มีความเกี่ยวข้องกับการบันทึกข้อมูลรูปภาพต่างๆลงบนเซิร์ฟเวอร์ และอาจมีความต้องการที่จะใส่ลายน้ำให้กับรูปภาพเหล่านั้น ซึ่งจริงๆแล้วการทำลายน้ำนั้น ถือเป็นกระบวนการหนึ่งในการคุ้มครองลิขสิทธิ์ ป้องกัน หรือปกป้องลิขสิทธิ์ของเจ้าของภาพผู้อัพโหลดข้อมูลหรือเป็นการแจ้งที่มาของภาพนั้นๆ เพื่อไม่ให้ผู้อื่นนำไปใช้ในทางมิชอบ และทำให้มั่นใจได้ว่าจะไม่สามารถนำกลับมาใช้ซ้ำหรือเปลี่ยนแปลงได้โดยไม่ได้รับอนุญาต นอกจากนี้ยังอาจใช้เป็นกลยุทธ์ในการสร้างแบรนด์ให้กับงานของคุณได้ หรืออาจทำหน้าที่เป็นตราประทับเพื่อระบุสถานะของเอกสารโดยมีคำเช่น “สำเนา” “ฉบับร่าง” หรือ “ตัวอย่าง” ซึ่งช่วยให้มั่นใจได้ว่าจะไม่มีการจัดการเอกสารสำคัญอย่างไม่ถูกต้อง อีกทั้งยังช่วยให้คุณสามารถจัดระเบียบงานของคุณได้ในขณะที่คุณทำเอกสารฉบับร่างให้เป็นเอกสารฉบับจริง และสำหรับในบทความนี้ทางผู้เขียนจึงถือโอกาสมาแนะนำวิธีการทำภาพลายน้ำให้กับรูปภาพที่เราบันทึกข้อมูลจากการอัพโหลดไฟล์โดยระบบที่พัฒนาขึ้นกันค่ะ โดยวิธีการเพิ่มลายน้ำสามารถทำได้หลายทาง อาจจะเป็นการนำรูปภาพทั้งหมดที่มีการอัพโหลดมาตกแต่งด้วยโปรแกรมตกแต่งภาพ แต่ในกรณีนี้ ผู้เขียนจะขอแนะนำวิธีเบื้องต้นในการพัฒนาโปรแกรมในการใส่ลายน้ำให้กับภาพตอนอัพโหลดไฟล์ด้วย C# เพื่อเป็นแนวทางให้กับผู้อ่านได้นำไปต่อยอดงานพัฒนาของตนเองได้ ซึ่งในบทความนี้จะแบ่งวิธีที่มาแนะนำการใส่ลายน้ำให้กับรูปภาพที่อัพโหลดออกเป็น 2 แบบดังนี้ค่ะ 1.การใส่ลายน้ำแบบข้อความ โดยการทำลายน้ำด้วยวิธีนี้ เราจะต้องมีการระบุข้อความที่เราต้องการให้แสดงลายน้ำในภาพที่ทำการอัพโหลด ซึ่งขั้นตอนการทำลายน้ำ มีดังนี้ 1.1 เพิ่ม Library ที่เกี่ยวข้องเพิ่มเติมเข้ามา using System.IO;using System.Drawing; 1.2…
DevToys รวมเครื่องมือใช้บ่อยของโปรแกรมเมอร์
เคยมั้ยครับ ได้ข้อมูลรูปแบบ JSON มาอยากจัดรูปแบบให้อ่านได้ง่าย (ค้น google หาเว็บจัดรูปแบบ) อยาก Decode JWT ออกมาดูก่อนเริ่มเขียนโปรแกรมอ่านค่า (ค้น google หาเว็บ Decode) อยากทดสอบ Regex ที่เขียนว่าถูกต้องหรือไม่ (ค้น google หาเว็บทดสอบ) ฯลฯ https://devtoys.app/ DevToys คือ ซอฟแวร์ที่รวมเอา Utility ที่เหล่า Dev ใช้งานบ่อยๆเอาไว้ที่เดียวกัน ในรูปแบบ Windows App ทำให้สะดวกต่อการเรียกใช้งานมากครับ และที่สำคัญฟรี เพราะพัฒนาขึ้นโดย Community ของ Dev ที่ทำงานบนระบบปฏิบัติการ…
แก้ปัญหาการเรียกใช้ 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:…
upgrade crystal report version 10 ไปเป็น version 13
เนื่องด้วยตอนนี้ crystal report version 10 มันเก่ามากแล้วทางผู้เขียนเลยอยากจะ upgrade crystal report version 10 ไปเป็น version 13 ดังนั้นจึงสรุปขั้นตอนไว้เพื่อเป็นแนวทางการทำงานของคนที่มีปัญหาเดียวกัน ดังนี้ ขั้นตอนที่ 1 แก้ web.config ใน project web application โดยเปลี่ยนเลข version จาก 10.2.3600.0 เป็น 13.0.2000.0 ขั้นตอนที่ 2 copy folder crystalreportviewers13 ใส่ไว้ที่ project web application ขั้นตอนที่…
สร้าง 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 (ภาพประกอบเนื้อหาของท่านเอง) ก็จะได้หน้าเว็บใกล้เคียงความต้องการ ดังรูปตัวอย่างนะครับ…