งานพัฒนาระบบ, เขียนโปรแกรม
ปัจจุบันบระบบยืนยันตัวตนแบบ 2 ขั้นตอน (2FA) หรือ MFA ถูกผลักดันให้ใช้งานกันอย่างแพร่หลาย ทั้งนี้เพื่อยกระดับการรักษาความปลอดภัยของระบบสารสนเทศ คณะการแพทย์แผนไทย ม.อ. มีความมุ่งหมายที่จะเปลี่ยนแปลงระบบล๊อกอินของระบบสารสนเทศต่างๆ ทั้งหมดของคณะให้เป็น 2FA ตามนโยบายความปลอดภัยของมหาวิทยาลัยฯ ด้วย
ต่อไปนี้จะแสดงตัวอย่างการ implement ระบบเพื่อติดตั้งใช้งาน PSU Passport (Authentik) ด้วยภาษา PHP
(more…)เพื่อให้ Web Server ของเราปลอดภัยจากการถูกโจมตี บทความนี้จะเป็นการแนะนำการกำหนดค่าต่างๆของ web server ที่ให้บริการ ซึ่งทำงานด้วยบน Windows Server และ มีการติดตั้ง IIS, PHP, MySql, ASP.Net และ WordPress
ผ่าน NuGet Package Manager โดยใช้คำสั่ง
Install-Package Sentry.AspNet -Version 3.20.1
เลือก Server เป็น ASP.NET และตั้งชื่อ aspnet-e-admission จากนั้น ก็กดปุ่ม Create Project
เมื่อกดสร้างเรียบร้อยแล้ว จะเห็น Project ชื่อ aspnet-e-admission ตามรูป
เมื่อคลิกดูรายละเอียด จะแสดงดังภาพ
นำค่า DSN ที่อยู่ในส่วน Client Keys ไปใช้งานต่อในส่วนของตั้งค่า Web.config
เพิ่ม key “SentryDsn” และค่า value ได้มาจาก Project Settings>Client Keys
เมื่อทดสอบรันเวบ ระบบรับสมัครนักศึกษาออนไลน์ (PSU Admission) จะเห็น Latest Releases ถ้าเลขเวอร์ชันตรงกับที่รัน แสดงว่าติดตั้งสำเร็จ
หวังว่า km จะมีประโยชน์ไม่มากก็น้อยนะคะ
ที่มา https://docs.sentry.io/platforms/dotnet/guides/aspnet/
ช่วงนี้เป็นช่วงที่ต้อง Mail ขอนัดประชุมเพื่อขอข้อมูลเพื่อจัดทำ Data Lake จากหลายๆหน่วยงานเป็นจำนวนมาก เลยลองตั้งคำถามว่า “mail ขอนัดประชุมควรจะประกอบด้วยหัวข้ออะไรบ้าง” ถึงจะครบถ้วน เหมาะสม สือสารตรงจุด ผู้รับ Mail อยากจะตอบรับ อยากประชุมกับเรา ผลการค้นหาและประมาณผลด้วยตัวเองออกมาประมาณนี้ครับ
ทั้งหมดนี้คือหัวข้อที่น่าจะต้องมีใน Mail ขอนัดประชุมครับ สำหรับผมคิดว่าหัวข้อที่ว่า ถ้าการประชุมครั้งนี้เกิดหรือสำเร็จ ทางผู้เข้าประชุมจะได้รับประโยชน์อะไรบ้างเป็นหัวข้อที่สำคัญที่สุดและน่าจะทำให้ผู้รับ Mail ให้ความสนใจ ยิ่งเป็นประโยชน์ที่ช่วยงานให้ดีขึ้น สะดวกขึ้นก็จะยิ่งเพิ่มความน่าเข้าร่วมประชุมมากขึ้นไปอีกระดับ
ขอบคุณทุกท่านที่แวะมาอ่านนะครับ
บล็อกนี้น่าจะเป็น EP สุดท้ายของซีรี่ส์ Drag & Drop row ใน HTML Table แล้ว จากบล็อกที่ผ่านๆ มา ผู้เขียนได้ใช้เทคนิคต่างๆ โดยพึ่งพา framework ที่ใช้ในการพัฒนาโปรแกรม เช่น ASP.NET, Blazor หรือ jQuery แต่สำหรับบล็อกนี้เราจะเขียนโดยใช้ JavaScript ล้วนๆ บวกกับ CSS จาก Bootstrap อีกนิดหน่อยเพื่อความสวยงามของ Table และเพื่อไม่ให้เป็นการเสียเวลา เรามาลุยกันเลยครับ
1. เริ่มต้นด้วยการเตรียมไฟล์ HTML ดังโค้ดด้านล่าง
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Drag & Drop Table Row</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"> </head> <body style="padding:10px"> <table style="width:90%;" class="table table-striped"> <thead> <tr > <th>ลำดับ</th> <th>จังหวัด</th> </tr> </thead> <tbody id="provinceList"> </tbody> </table> </body> </html>
2. เพิ่ม code JavaScript สำหรับเพิ่มข้อมูลลงใน Table ใน event window.onload โดยเราจะเพิ่มแท็ก <tr> ใน element tbody ที่มี id=”provinceList” และระบุ class=”prv-item” สำหรับใช้ในการอ้างถึงจากโค้ด JavaScript
<script>
window.onload = async () => {
const provinces = ['สงขลา','ปัตตานี','ยะลา','นราธิวาส','สตูล'];
for (let i = 0; i < provinces.length; i++) {
provinceList.innerHTML += "<tr class='prv-item' data-value=" + i + "><td> " + (i + 1) + "</td><td>" + provinces[i] + "</td></tr>";
};
};
</script>
ซึ่งจะได้ผลลัพธ์หน้าจอดังรูป และเป้าหมายของเราก็คือสามารถคลิกเลือกจังหวัด จากนั้นลากและวางไปยังตำแหน่งที่ต้องการได้
3. และเพิ่มโค้ด JavaScript สำหรับผูก event ต่างๆ เข้ากับแต่ละ <tr> ที่เพิ่มเข้าไป ใน event window.onload เพื่อให้สามารถลากและวางได้
let listPrvItems = document.querySelectorAll(".prv-item");
listPrvItems.forEach((element) => {
element.draggable = true;
element.addEventListener("dragstart", dragStart, false);
element.addEventListener("dragover", dragOver, false);
element.addEventListener("drop", drop, false);
});
4. เพิ่มโค้ด JavaScript ส่วนควบคุม event ต่างๆ คือ เมื่อเริ่มกดลาก เมื่อกดวาง และฟังก์ชันสำหรับหาตำแหน่งของแถว (<tr>) ที่เริ่มกดลาก ดังนี้
//หาลำดับของ tr จาก value ที่ส่งมา ทำการวนลูปเทียบกับ data-value ใน tr ของตารางทั้งหมด
const getPosition = (value) => {
let elementIndex;
let listPrvItems = document.querySelectorAll(".prv-item");
listPrvItems.forEach((element, index) => {
let elementValue = element.getAttribute("data-value");
if (value == elementValue) {
elementIndex = index;
}
});
return elementIndex;
};
//เก็บตำแหน่ง x,y และ element ที่เริ่มคลิกลาก
function dragStart(e) {
initialX = e.clientX;
initialY = e.clientY;
//Set current Element
currentElement = e.target;
}
function dragOver(e) {
e.preventDefault();
}
//เหตุการณ์วาง
const drop = (e) => {
e.preventDefault();
// เก็บตำแหน่ง x, y ที่วาง
let newX = e.clientX;
let newY = e.clientY;
//Set targetElement(where we drop the picked element).It is based on mouse position
// เก็บ element ที่จะถูกวางแทนที่
let targetElement = document.elementFromPoint(newX, newY);
// ตรวจสอบว่า element ที่ถูกวาง เป็น TD หรือไม่ ถ้าใช่ จะเปลี่ยนให้เป็น TR ที่เป็น parent ของ TD นั้น
// เนื่องจากการลากวาง จะเป็นการลากวางและแทนที่ทั้งแถว ซึ่งก็คือ TR
if(targetElement.nodeName == "TD")
{
targetElement = targetElement.parentNode;
}
// เก็บ value จาก element ต้นทางและปลายทาง
let currentValue = currentElement.getAttribute("data-value");
let targetValue = targetElement.getAttribute("data-value");
//หาตำแหน่ง TR จาก value
let [currentPosition, targetPosition] = [
getPosition(currentValue),
getPosition(targetValue),
];
initialX = newX;
initialY = newY;
try {
if (currentPosition < targetPosition) {
// ถ้าแถวที่เริ่มลาก น้อยกว่าแถวที่จะวาง จะทำการแทรกในตำแหน่งด้านล่างของแถวที่จะวาง
targetElement.insertAdjacentElement("afterend", currentElement);
} else {
// ถ้าแถวที่เริ่มลาก มากกว่าแถวที่จะวาง จะทำการแทรกในตำแหน่งด้านบนของแถวที่จะวาง
targetElement.insertAdjacentElement("beforebegin", currentElement);
}
} catch (err) {}
};
4. เมื่อทดสอบการทำงาน รายชื่อจังหวัดในตารางจะสามารถคลิก ลาก และวางไปยังตำแหน่งที่ต้องการได้
5. และเมื่อ drop ลงไปยังตำแหน่งที่ต้องการ จังหวัดที่ลากมาก็จะแทรกเข้าไปยังตำแหน่งที่ drop
จากซีรี่ส์ Drag & Drop Row ใน Table อันยาวนานนี้ ผู้เขียนหวังเป็นอย่างยิ่งว่าจะมีประโยชน์กับผู้อ่านไม่มากก็น้อยที่จะนำไปประยุกต์ใช้กับงานของตัวเอง แล้วเจอกันใหม่โอกาสหน้า เมื่อผู้เขียนจะมีเหตุให้ต้องเข้ามาอีก สวัสดีครับ
แหล่งข้อมูลอ้างอิง
เขียน JavaScript กับข้อมูลที่ sensitive โดยใช้ RegExp เพื่อแสดงบางส่วน เนื่องจากทางผู้เขียนได้รับ requirement ให้ปรับปรุงข้อมูลที่อ่อนไหว ให้แสดงบางส่วน อย่างเช่น เลขบัตรประชาชน
โดยก่อนอื่นจะอธิบายความหมายสัญลักษณ์ RegExp ตัวอย่างเช่น
| สัญลักษณ์ | ความหมาย |
|---|---|
| . | หาตัวอักษรเดียวและยกเว้น newline หรือ line terminator เช่น คำว่า “Thailand Finland” หากใช้ pattern /./ จะได้ผลลัพธ์ “T” |
| n{X} | นับจำนวนอักษรทั้งหมดตามจำนวน X ตัวอักษร เช่น คำว่า “Thailand Finland” หากใช้ pattern /.{4}/ จะได้ผลลัพธ์ “Thai” |
| ?=n | หาตัวอักษรทั้งหมดทีมี n เช่น คำว่า “Thailand Finland” หากใช้ pattern /.(?=land)/ จะได้ผลลัพธ์ “i” |
| g | หาตัวอักษรที่ตรงทั้งหมดและจะหยุดเมื่อเจอผลลัพธ์แรก เช่น คำว่า “Thailand Finland” หากใช้ pattern /.(?=land)/g จะได้ผลลัพธ์ “i,n” |
จากนั้นใช้ function replace()
Note: To replace all matches, use a regular expression with a /g flag (global match)
หวังว่า km จะมีประโยชน์ไม่มากก็น้อยนะคะ
สำหรับ 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
@if (provinces != null)
{
<table class="table table-striped" >
<thead>
<tr >
<th>ลำดับ</th>
<th>จังหวัด</th>
</tr>
</thead>
<tbody>
@foreach (var pr in provinces)
{
<tr role="button" class="cursor-pointer" >
<td>@pr.ID</td>
<td>@pr.Name</td>
</tr>
}
</tbody>
</table>
}
2. เพิ่มโค้ด C# ในส่วนที่ควบคุมการทำงานและจำลองข้อมูล
private List<Province> provinces = new List<Province>();
protected override void OnInitialized()
{
provinces.AddRange(new List<Province> {
new Province(1,"สงขลา"),
new Province(2,"ปัตตานี"),
new Province(3,"ยะลา"),
new Province(4,"นราธิวาส"),
new Province(5,"สตูล")
});
}
public class Province
{
public Int32 ID;
public string Name;
public Province(int id, string name)
{
ID = id;
Name = name;
}
}
ซึ่งจะได้ผลลัพธ์หน้าจอดังรูป และเป้าหมายของเราก็คือสามารถคลิกเลือกจังหวัด จากนั้นลากและวางไปยังตำแหน่งที่ต้องการได้
3. จากนั้นเพิ่มโค้ดส่วนที่ควบคุมการ Drag และ Drop ทั้งใน HTML และ C#
@if (provinces != null)
{
<table class="table table-striped" ondragover="event.preventDefault();">
<thead>
<tr >
<th>ลำดับ</th>
<th>จังหวัด</th>
</tr>
</thead>
<tbody>
@foreach (var pr in provinces)
{
<tr role="button" class="cursor-pointer" draggable="true"
@ondrop="@(()=> Drop(pr))" @ondrag="@(e => StartDrag(pr))" >
<td>@pr.ID</td>
<td>@pr.Name</td>
</tr>
}
</tbody>
</table>
}
/// <summary>
/// เก็บตำแหน่งของจังหวัดที่คลิกเลือก เมื่อเริ่ม drag
/// </summary>
/// <param name="province"></param>
private void StartDrag(Province province)
{
currentIndex = GetIndex(province);
}
/// <summary>
/// หาตำแหน่งของจังหวัดที่อยู่จาก list
/// </summary>
/// <param name="province"></param>
/// <returns></returns>
int GetIndex(Province province)
{
return provinces.FindIndex(p => p.ID == province.ID);
}
/// <summary>
/// เมื่อ Drop จังหวัดที่ drag มาลงในตำแหน่งที่ต้องการ
/// </summary>
/// <param name="province"></param>
void Drop(Province province)
{
if (province != null)
{
// หาตำแหน่งของจังหวัดที่ถูก drop
var index = GetIndex(province);
// หาจังหวัดที่ถูก drag มา จาก index ที่เก็บไว้ตั้งแต่เริ่ม drag
var current = provinces[currentIndex];
// ลบจังหวัดที่ถูก drag มา ออกจาก list
provinces.RemoveAt(currentIndex);
// แทรกจังหวัดที่ถูก drag มา ลงในตำแหน่งที่ drop
provinces.Insert(index, current);
StateHasChanged();
}
}
4. เมื่อทดสอบการทำงาน รายชื่อจังหวัดในตารางจะสามารถคลิก ลาก และวางไปยังตำแหน่งที่ต้องการได้
5. และเมื่อ drop ลงไปยังตำแหน่งที่ต้องการ จังหวัดที่ลากมาก็จะแทรกเข้าไปยังตำแหน่งที่ drop
ขั้นตอนถัดไป ท่านผู้อ่านก็แค่ทำการบันทึกตำแหน่งใหม่ของจังหวัดลงในฐานข้อมูลหรือทำอย่างอื่นได้ต่อไป ซึ่งวิธีการนี้เราสามารถนำไปประยุกต์ใช้กับคอมโพเน้นอื่นๆ ได้ เช่น li, div หรืออย่างอื่นที่ผู้ใช้ในการนำเสนอข้อมูลในรูปแบบรายการ
ผู้เขียนหวังเป็นอย่างยิ่งว่าบทความนี้น่าจะมีประโยชน์ต่อผู้อ่านไม่มากก็น้อย แล้วเจอกันใหม่โอกาสหน้า สวัสดีครับ
แหล่งข้อมูลอ้างอิง
กลับมาพบกับท่านผู้อ่านอีกครั้งหนึ่ง หลังจากห่างหายกันไปนาน เนื่องจากผู้เขียนได้รับโจทย์ที่ทำให้ต้องทำการ 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 นั้นๆ เข้ามาก่อน
@using Google.Apis.Services @using Google.Apis.YouTube.v3 @using Google.Apis.YouTube.v3.Data
4. สร้าง YoutubeService เพื่อใช้ในการติดต่อ API และเราจะกำหนด API Key ใน object นี้ ดังโค้ดตัวอย่าง
var youtubeService = new YouTubeService(new BaseClientService.Initializer()
{
ApiKey = "XXxxXxXxXXX0xxxxXXxxxXxXXxxxxXXxX0XX0x0",
ApplicationName = this.GetType().ToString()
});
5. สร้าง object ListRequest และกำหนดข้อมูลที่ต้องการเป็น snippet ผ่านเมทธอด List ซึ่ง snippet จะเป็น object ที่บรรจุข้อมูลต่างๆ ของวิดีโอยูทูปนั้นๆ
VideosResource.ListRequest req = youtubeService.Videos.List("snippet");
6. กำหนดค่าแปรวิดีโอที่เราต้องการดึงข้อมูล ซึ่งจะเป็น parameter ที่อยู่หลังตัวแปร v เช่น https://www.youtube.com/watch?v=4VTx7oIzv_8 ค่าที่เราต้องการคือ 4VTx7oIzv_8
req.Id = "4VTx7oIzv_8";
7. จากนั้นทำการดึงข้อมูลจาก Youtube โดยเรียกเมทธอด Execute และดึงข้อมูลที่ต้องการจาก property ต่างๆ ที่อยู่ใน object Snippet
VideoListResponse resp = req.Execute();
if (resp.Items.Count > 0)
{
title = resp.Items.ElementAt(0).Snippet.Title;
description = resp.Items.ElementAt(0).Snippet.Description;
ThumbnailDetails tmb = resp.Items.ElementAt(0).Snippet.Thumbnails;
thumbnail = tmb.Default__.Url;
}
8. และโด้ด HTML ส่วนแสดงผล
<p><b>URL : </b> @url</p> <p><b>Title : </b> @title</p> <p><b>Description : </b> @title</p> <p><b>Thumbnail : </b> </p> <img src="@thumbnail" />
9. จะได้ผลลัพธ์ดังตัวอย่าง
10. นอกจากนี้ผู้อ่านสามารถดึงข้อมูลอื่นๆ ที่เกี่ยวข้องกับ video นั้นๆ ได้ผ่าน object Snippet รวมทั้งมี object ย่อยๆ อีกมากมายอย่างเช่น Thumbnails เป็นต้น หรือผู้อ่านจะทดสอบการทำงานได้ง่ายๆ ผ่าน query string โดยให้แทนที่ API Key ด้วยคีย์ของท่านเอง และ Video ID ด้วย ID ของ Video ที่ต้องการได้เลย ดังตัวอย่าง
https://www.googleapis.com/youtube/v3/videos?part=snippet&id={video IDs}&key={API key}
สุดท้ายนี้ผู้เขียนหวังเป็นอย่างยิ่งว่าบทความนี้จะมีประโยชน์กับท่านผู้อ่านได้ไม่มากก็น้อย ขอบคุณสำหรับการแวะเข้ามาอ่าน และสวัสดีครับ
แหล่งข้อมูลอ้างอิง
ในบทความนี้เราก็ยังคงอยู่กับเรื่องการทำภาพลายน้ำอย่างต่อเนื่องจาก EP. ที่แล้วที่พูดถึงการทำข้อความลายน้ำบนภาพที่เราทำการอัพโหลด ถ้าใครยังไม่ได้อ่านสามารถตามไปอ่านกันได้ ที่นี่ นะคะแต่สำหรับ EP. นี้เราจะขอเปลี่ยนบรรยากาศไปทำ ลายน้ำบนไฟล์ PDF โดยใช้เครื่องมือ iTextSharp กันบ้าง เผื่อว่าผู้อ่านบางท่านที่อาจจะกำลังใช้งาน iTextSharp ในการจัดทำไฟล์ PDF อยู่พอดี และอยากจะลองใส่ลายน้ำให้กับงานเอกสารของท่านดูบ้าง จะได้สามารถนำวิธีการนี้ไปประยุกต์ใช้กับงานของตนได้ไม่ทางใดก็ทางหนึ่งนะคะ โดยตัวอย่างที่จะนำมาแนะนำกันจะมีทั้งแบบลายน้ำที่เป็นข้อความ และลายน้ำที่เป็นภาพค่ะ นอกจากนี้ก็ยังมีทั้งแบบที่เป็นการทำภาพลายน้ำทับไฟล์เดิมที่มีอยู่ และแบบที่ทำภาพลายน้ำและบันทึกเป็นไฟล์ใหม่ค่ะ ผู้อ่านจะได้ลองในหลายๆวิธี และสามารถเลือกไปปรับใช้ให้เหมาะกับงานของแต่ละท่านได้เพื่อไม่ให้เป็นการเสียเวลา งั้นเรามาเริ่มทำภาพลายน้ำบนงานเอกสาร PDF ของเรากันเลยดีกว่าค่ะ
แบบที่ 1 : การสร้างลายน้ำแบบข้อความ ซึ่งวิธีการนี้ จะมีการทำ Template ต้นฉบับของลายน้ำแบบข้อความไว้ก่อน และเมื่อต้องการทำไฟล์ลายน้ำ จะต้องทำการอ่านไฟล์ลายน้ำจากต้นแบบมาจัดทำลายน้ำบนไฟล์ที่ต้องการได้ ดังนี้ค่ะ
1.1 ระบุ Library เพิ่มเติม
using iTextSharp.text;
using iTextSharp.text.pdf;
using System.IO;1.2 สร้างเมธอดในการสร้าง Template ลายน้ำต้นฉบับ เพื่อใช้ในการทำลายน้ำให้กับไฟล์ PDF ที่ต้องการ
////กรณียังไม่เคยสร้างหรือมี Template มาก่อน ให้เรียกใช้งาน CreateTemplate("ข้อความที่ต้องการให้แสดงในเทมเพลต",พาธที่จะสร้างไฟล์เทมเพลตดังกล่าว)
public void CreateTemplate(string watermarkText, string targetFileName)
{
var document = new Document();
////ระบุพาธที่ต้องการสร้างไฟล์เทมเพลต
var pdfWriter = PdfWriter.GetInstance(document, new FileStream(targetFileName, FileMode.Create));
///ระบุค่าต่างๆเกี่ยวกับตัวอักษรที่จะแสดงผลในเทมเพลตลายน้ำที่สร้างขึ้น
var font = new Font(Font.FontFamily.HELVETICA, 60, Font.NORMAL, BaseColor.LIGHT_GRAY);
document.Open();
////ระบุค่าข้อความ และค่าต่างๆให้กับลายน้ำที่ต้องการ
ColumnText.ShowTextAligned(pdfWriter.DirectContent, Element.ALIGN_CENTER, new Phrase(watermarkText, font), 300, 400, 45);
document.Close();
}ตัวอย่าง ไฟล์ PDF ของ Template ลายน้ำที่ได้จากการเรียกใช้งานเมธอด CreateTemplate ข้างต้น
1.3 สร้างเมธอดในการจัดทำลายน้ำข้อความให้กับไฟล์ PDF จาก template ลายน้ำต้นฉบับ
public void AddTextWatermark(string sourceFilePath, string watermarkTemplatePath, string targetFilePath)
{
///ระบุพาธไฟล์ต้นทางที่ต้องการทำข้อความลายน้ำ
var pdfReaderSource = new PdfReader(sourceFilePath);
///ระบุพาธไฟล์ปลายทางที่ต้องการบันทึกไฟล์แบบมีลายน้ำ
var pdfStamper = new PdfStamper(pdfReaderSource, new FileStream(targetFilePath, FileMode.Create));
///ระบุพาธของไฟล์ต้นแบบลายน้ำที่จัดทำไว้
var pdfReaderTemplate = new PdfReader(watermarkTemplatePath);
var page = pdfStamper.GetImportedPage(pdfReaderTemplate, 1);
///ทำการวนลูปเพื่อทำลายน้ำให้กับไฟล์ PDF ทีละหน้า
for (var i = 0; i < pdfReaderSource.NumberOfPages; i++)
{
///ระบุตำแหน่งในการแสดงผลลายน้ำกับเนื้อหาในไฟล์ PDF กรณีนี้คือวางไว้ใต้เนื้อหา แต่หากต้องการให้อยู่บนเนื้อหาให้เปลี่ยนเป็น GetOverContent แทน
var content = pdfStamper.GetUnderContent(i + 1);
content.AddTemplate(page, 0, 0);
}
pdfStamper.Close();
pdfReaderTemplate.Close();
}1.4 เรียกใช้งานเมธอดเพื่อทำลายน้ำให้กับไฟล์ PDF ที่ต้องการ(กรณีนี้สมมุติให้เป็นการกดปุ่มเพื่อเรียกใช้งานเมธอดดังกล่าว)
protected void btnGenWatermark_Click(object sender, EventArgs e)
{
////กำหนด Path ของไฟล์ PDF ต้นทางที่ต้องการทำลายน้ำ กรณีที่ gen จาก iTextSharp สามารถนำมาประยุกต์ใช้โดยเอาพาธดังกล่าวมาใช้เป็น strSourcePath ได้เลย
string strSourcePath = HttpContext.Current.Server.MapPath("~/PDF/File/PDFDocument.pdf");
////สร้างตัวแปรชื่อไฟล์ PDF ที่จะบันทึกใหม่ในชื่อตัวแปร genName
string genName = Guid.NewGuid().ToString() + ".pdf";
////กรณียังไม่เคยสร้างหรือมี Template มาก่อนให้เรียกใช้งาน CreateTemplate("ข้อความที่ต้องการให้แสดงในเทมเพลต",templatePath) ทั้งชื่อไฟล์เทมเพลตใหม่ที่จะบันทึก
string templatePath = HttpContext.Current.Server.MapPath("~/PDF/TemplateWatermarkPDF/" + genName);
////ระบุพาธปลายทางที่ต้องการบันทึกไฟล์แบบมีลายน้ำพร้อมทั้งชื่อไฟล์ใหม่ที่จะบันทึก
string targetPath = HttpContext.Current.Server.MapPath("~/PDF/WatermarkPDF/" + genName);
////ตรวจสอบว่ามีไฟล์ดังกล่าวอยู่จริงตามที่อยู่ที่ระบุไว้หรือไม่
if( File.Exists(strSourcePath))
{
////กรณียังไม่เคยสร้างหรือมี Template มาก่อน ให้เรียกใช้งาน CreateTemplate("ข้อความที่ต้องการให้แสดงในเทมเพลต",พาธที่จะสร้างไฟล์เทมเพลตดังกล่าว)
CreateTemplate("Copyrights (c) 2023", templatePath);
////เรียกใช้งานเมธอดในการสร้างข้อความลายน้ำตามเทมเพลตที่มี(ตามพาธที่ระบุ) โดยส่งค่าที่อยู่ของไฟล์ต้นทาง พาธเทมเพลตที่ต้องการทำลายน้ำ และพาธปลายทางที่ต้องการบันทึกไฟล์แบบมีลายน้ำ
AddTextWatermark(strSourcePath, templatePath, targetPath);
}
}ตัวอย่างผลลัพธ์
หมายเหตุ :
แต่สำหรับเนื้อหาในไฟล์ PDF โดยทั่วไปแล้ว สามารถใช้งาน GetUnderContent ได้ตามปกติ เพื่อไม่ให้ข้อความลายน้ำบดบังเนื้อหาในเอกสาร
แบบที่ 2 การสร้างลายน้ำแบบรูปภาพให้กับเอกสาร PDF โดยจะขอยกตัวอย่างให้ดู 2 แบบนะคะ คือแบบที่สร้างลายน้ำบนไฟล์ PDF ใหม่ และแบบที่สร้างลายน้ำบนไฟล์ต้นทางเดิมค่ะ
2.1 แบบสร้างลายน้ำบนไฟล์ใหม่ โดยการสร้างเมธอด AddImageWatermark
public void AddImageWatermark(string sourceFilePath, string watermarkImagePath, string targetFilePath)
{
///ระบุพาธไฟล์ต้นทางที่ต้องการทำภาพลายน้ำ
var pdfReader = new PdfReader(sourceFilePath);
///ระบุพาธไฟล์ปลายทางที่ต้องการบันทึกไฟล์แบบมีภาพลายน้ำ
var pdfStamper = new PdfStamper(pdfReader, new FileStream(targetFilePath, FileMode.Create));
///ระบุพาธของไฟล์ภาพที่ต้องการนำมาทำภาพลายน้ำ
var image = iTextSharp.text.Image.GetInstance(watermarkImagePath);
image.SetAbsolutePosition(200, 400);
///ทำการวนลูปเพื่อทำภาพลายน้ำให้กับไฟล์ PDF ทีละหน้า
for (var i = 0; i < pdfReader.NumberOfPages; i++)
{
var content = pdfStamper.GetUnderContent(i + 1);
content.AddImage(image);
}
pdfStamper.Close();
}วิธีเรียกใช้งาน (กรณีนี้สมมุติให้เป็นการกดปุ่มเพื่อเรียกใช้งานเมธอดดังกล่าว)
protected void btnGenWatermark_Click(object sender, EventArgs e)
{
////กำหนด Path ของไฟล์ภาพที่ต้องการทำลายน้ำ
string strWaterMark = HttpContext.Current.Server.MapPath("~/images/clientpreview.png");
////ระบุ Path ของไฟล์ PDF ต้นทางที่ต้องการทำลายน้ำ
string strSourcePath = HttpContext.Current.Server.MapPath("~/PDF/File/job_apply_form.pdf");
////สร้างตัวแปรชื่อไฟล์ PDF ที่จะบันทึกใหม่ในชื่อตัวแปร genName
string genName = Guid.NewGuid().ToString() + ".pdf";
////ระบุพาธปลายทางที่ต้องการบันทึกไฟล์แบบมีลายน้ำพร้อมทั้งชื่อไฟล์ใหม่ที่จะบันทึก
string targetPath = HttpContext.Current.Server.MapPath("~/PDF/WatermarkPDF/" + genName);
////ตรวจสอบว่ามีไฟล์ภาพลายน้ำ และไฟล์ PDF ต้นทางดังกล่าวอยู่จริงตามที่อยู่ที่ระบุไว้หรือไม่
if (File.Exists(strWaterMark) && File.Exists(strSourcePath))
{
AddImageWatermark(strSourcePath, strWaterMark, targetPath);
}
}2.2 แบบสร้างลายน้ำบนไฟล์เดิม โดยการสร้างเมธอด AddImageWatermarkInExistingFile
private void AddImageWatermarkInExistingFile(string sourceFilePath,string watermarkImagePath )
{
///อ่านค่าจากพาธไฟล์ต้นทางที่ต้องการทำภาพลายน้ำ
byte[] bytes = File.ReadAllBytes(sourceFilePath);
///ระบุพาธของไฟล์ภาพที่ต้องการนำมาทำภาพลายน้ำ
var img = iTextSharp.text.Image.GetInstance(watermarkImagePath);
img.SetAbsolutePosition(200, 400);
PdfContentByte waterMark;
using (MemoryStream stream = new MemoryStream())
{
///ทำภาพลายน้ำในไฟล์ต้นทางที่ต้องการทำภาพลายน้ำ
PdfReader reader = new PdfReader(bytes);
using (PdfStamper stamper = new PdfStamper(reader, stream))
{
///ทำการวนลูปเพื่อทำภาพลายน้ำให้กับไฟล์ PDF ทีละหน้า
int pages = reader.NumberOfPages;
for (int i = 1; i <= pages; i++)
{
waterMark = stamper.GetUnderContent(i);
waterMark.AddImage(img);
}
}
bytes = stream.ToArray();
}
File.WriteAllBytes(sourceFilePath, bytes);
}วิธีเรียกใช้งาน (กรณีนี้สมมุติให้เป็นการกดปุ่มเพื่อเรียกใช้งานเมธอดดังกล่าว)
protected void btnGenWatermark_Click(object sender, EventArgs e)
{
////กำหนด Path ของไฟล์ภาพที่ต้องการทำลายน้ำ
string strWaterMark = HttpContext.Current.Server.MapPath("~/images/clientpreview.png");
////ระบุ Path ของไฟล์ PDF ต้นทางที่ต้องการทำลายน้ำ
string strSourcePath = HttpContext.Current.Server.MapPath("~/PDF/File/job_apply_form.pdf");
////สร้างตัวแปรชื่อไฟล์ PDF ที่จะบันทึกใหม่ในชื่อตัวแปร genName
string genName = Guid.NewGuid().ToString() + ".pdf";
////ตรวจสอบว่ามีไฟล์ภาพลายน้ำ และไฟล์ PDF ต้นทางดังกล่าวอยู่จริงตามที่อยู่ที่ระบุไว้หรือไม่
if (File.Exists(strWaterMark) && File.Exists(strSourcePath))
{
AddImageWatermarkInExistingFile(strSourcePath,strWaterMark);
}
}
ตัวอย่างผลลัพธ์
หมายเหตุ :
1. ทั้งสองวิธีข้างต้นจะให้ผลลัพธ์ของภาพลายน้ำแบบเดียวกัน แต่ต่างกันตรงที่ไฟล์ที่บันทึกภาพลายน้ำ โดยแบบแรกจะสร้างเป็นไฟล์ใหม่ แต่แบบที่สองจะบันทึกลงบนไฟล์เดิม
2. ในการใช้ภาพทำภาพลายน้ำ อาจจะต้องระวังเกี่ยวกับขนาดภาพที่นำมาใช้ในการแสดงผล และอาจต้องทดสอบการจัดวางตำแหน่งของภาพ เพื่อให้ภาพลายน้ำดังกล่าวออกมาสวยงาม และตรงกับความต้องการในการใช้งาน เพราะหากใช้ภาพที่ใหญ่หรือเล็กเกินไป อาจทำให้ไม่เหมาะกับการนำมาใช้งานได้
ซึ่งทั้งหมดนี้ก็เป็นเพียงวิธีเบื้องต้นในการสร้างภาพลายน้ำด้วย iTextSharp เท่านั้น เราอาจจะต้องลองผิดลองถูก ประยุกต์วิธีการนำไปใช้ไปด้วยกัน และหวังว่าบทความนี้จะเป็นประโยชน์กับผู้อ่านเพื่อให้แต่ละท่านสามารถนำวิธีดังกล่าวไปประยุกต์ใช้เพิ่มเติมกับงานพัฒนาที่ท่านกำลังทำอยู่ หรือหากผู้อ่านท่านใดมีข้อเสนอแนะสามารถให้คำแนะนำมาได้นะคะ ทางเรายินดีรับฟังทุกข้อเสนอแนะ เพื่อเป็นการต่อยอดความรู้ร่วมกันนะคะ แล้วพบกันใหม่ในบทความหน้า และขอบคุณที่ติดตามกันนะคะ ^^
แหล่งอ้างอิง