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

Blazor Server Application : วิธีการแปลงรูปภาพ เป็น base64 สำหรับเก็บข้อมูล

May 31, 2021 22:16

แนะนำวิธีการแปลงรูปภาพ เป็น base64 เพื่อเก็บข้อมูล มีขั้นตอนดังนี้ 1) สร้าง Project ผ่าน Visual Studio 2019 เลือก Blazor Server App 2) เลือก Framework เป็น .NET 5.0 3) ติดตั้ง Add-on ชื่อ System.Drawing.Common ผ่านทาง NuGet 4) เปิดไฟล์ Index.razor จากนั้นเขียน Code ดังนี้ 5) หน้าจอแสดงปุ่ม “การแปลง (ไฟล์รูปภาพ เป็น Base64)” 6) ผลลัพธ์จากการแปลงไฟล์รูปภาพ เป็น Base64 หมายเหตุ: นามสกุลไฟล์รูปภาพ (picture.png) ต้องตรงกับ data:image/png;base64 สำหรับแสดงผล

โหมดไม่ระบุตัวตน ?

May 31, 2021 19:35

สวัสดีท่านผู้อ่านทุกท่าน Blog ปิดท้ายของเดือนพฤษภาคม ปี 64 นี้ ผู้เขียนขอเล่าในเรื่องของความรู้เพิ่มเติมในการใช้ Browser ละกันเนอะ จากการใช้งานท่องเว็บของเราในแต่ละวัน คาดว่าผู้อ่านแต่ละท่าน คงจะคุ้นเคยกับคำว่า โหมดไม่ระบุตัวตนกันมาบ้างแล้ว จริงๆ ในแต่ละ Browser เนี่ย ชื่อเรียกมันก็จะต่างกันนะ เช่น Incognito , Private หรือ Inprivate เป็นต้น ซึ่งทั้งหมดทั้งมวลมันก็คือ โหมดไม่ระบุตัวตนนั่นแหละ โหมดไม่ระบุตัวตน คืออะไร ? เอาแบบภาษาบ้านๆ พูดง่ายๆ ก็คือ เป็น Feature นึงที่มีอยู่ในทุกๆ Browser โดยโหมดนี้ จะทำให้ Browser ของเราจะไม่จัดเก็บข้อมูลของเว็บที่เราเข้า ไม่มีที่อยู่ ไม่มี cookie ไม่มีข้อมูลที่เราป้อนก่อนหน้า ก็คือไม่มีอะไรเลย ! มันก็คงคล้ายๆ กับการทำให้ Browser ของเราความจำเสื่อมชั่วคราวนั่นแหละนะ คราวนี้มาขยายความแบบทางการกันหน่อย Browser จะไม่เก็บประวัติการเข้าใช้งานเว็บไซต์ Browser จะไม่เก็บ cookie ของเว็บไซต์ และ ข้อมูลที่กรอกในฟอร์มต่างๆ แต่ถ้ามีการ bookmarks หรือดาวน์โหลดไฟล์ระหว่างใช้งาน ข้อมูลเหล่านั้นก็จะยังคงอยู่ ถึงแม้จะเราจะปิดโหมดนี้ไปแล้ว ผู้ให้บริการอินเทอร์เน็ตยังคงเห็นการเข้าใช้งานของเราตามปกติ IP ที่เข้าใช้งานเว็บไซต์ ไม่ว่าจะโหมดปกติ หรือโหมดไม่ระบุตัวตน ยังเป็น IP เดียวกัน และโหมดไม่ระบุตัวตนมันไม่ได้ซ่อนที่อยู่ IP ของเราให้นะทุกคนนนน !! การใช้งานโหมดนี้ในเครื่องสาธารณะ หรือเครื่องที่มีความเสี่ยง โหมดนี้ไม่ได้ช่วยให้ความเสี่ยงเหล่านั้นลดน้อยลง พออ่านไปอ่านมาจนถึงตรงนี้ หลายๆ ท่านคงรู้สึก เอ๊ะ ! แล้วนี่มันเป็นการท่องเว็บแบบส่วนตัวจริงเหรอ ทำไมรู้สึกเหมือนๆ จะไม่ส่วนตัวยังไงยังงั้นกันใช่มั้ย … เอาจริงๆ ผู้เขียนมองว่า เราก็ต้องเข้าใจให้ถูกต้องกันก่อน ว่าโหมดไม่ระบุตัวตนตัวนี้เนี่ย เหมาะกับการใช้งานแบบไหน ขอบเขตการทำงานของมันเป็นยังไง แล้วมันเหมาะ หรือไม่เหมาะ กับการใช้งานแบบใดกันละ ? ถ้าตามความเข้าใจของผู้เขียน ผู้เขียนเข้าใจว่า เหมาะกับกรณีที่เราไปใช้งานตามร้าน Internet cafe หรือ เครื่องสาธารณะ ที่เราไม่ต้องการให้ Browser มีการเก็บประวัติการเข้าใช้งาน เหมาะกับกรณีที่เราต้องการเข้าใช้บริการต่างๆ พร้อมกันมากกว่า 1 account ข้อนี้ส่วนตัว แหะๆ ผู้เขียนคิดว่ามันเหมาะกับงานของผู้เขียน คือ ใช้สำหรับใช้ทดสอบระบบ หรือเว็บที่เราพัฒนา เนื่องจากจะไม่มีการจำ cache ใด ให้เราปวดหัว ^^ ไม่เหมาะกับกรณีที่เราไปใช้งานในทางที่ไม่ดี เพราะมันยังสามารถโดนติดตามได้อยู่ … อย่าลืมระวังข้อนี้ด้วยนะ !! หากสิ่งที่ท่านผู้อ่านต้องการ ที่ไม่ใช่แค่ไม่เก็บประวัติ ไม่เก็บ cookie เหล่านี้ ทางผู้เขียนขอแนะนำให้ไปศึกษาใช้การ VPN หรือ Proxy ควบคู่ไปกับการใช้โหมดไม่ระบุตัวตน สุดท้ายแล้ว เจ้าโหมดไม่ระบุตัวตนนี้ ก็ยังคงเป็นอีกตัวเลือกที่ง่าย และยังคงมีประสิทธิภาพในระดับหนึ่ง ทั้งนี้ก็ขึ้นอยู่กับลักษณะการใช้งาน และสภาพแวดล้อมของแต่ละคน ผู้เขียนหวังเป็นอย่างยิ่งว่า Blog นี้จะยังคงเพิ่มความเข้าใจ ให้ความกระจ่างกับผู้อ่านในเรื่องของ โหมดไม่ระบุตัวตน ได้ไม่มากก็น้อยแหละเนอะ ขอบคุณแหล่งข้อมูลข่าวสาร และความรู้ >>> https://www.techhub.in.th/

วิธี Install Windows Service (ที่เขียนด้วย VS.Net) ตัวเดียวกันมากกว่า 1 ครั้ง

May 31, 2021 12:38

ปกติวิธี Install Windows Service ที่เขียนด้วย VS.Net เป็นดังนี้ InstallUtil.exe MyService.exe และคำสั่ง Uninstall Windows Service ที่เขียนด้วย VS.Net เป็นดังนี้ InstallUtil.exe /u MyService.exe อย่างเช่นมีไฟล์ Windows Service ชื่อ KillLoginSession โดยจะมีทั้ง file exe และ file config ไว้ใน folder C:\service1 ดังรูป เมื่อ run คำสั่งดังนี้ %WINDIR%\Microsoft.NET\Framework\v2.0.50727\InstallUtil.exe c:\service1\KillLoginSession.exe แล้วเปิด Services ของ Windows ขึ้นมา จะมี Service KillLoginSession ปรากฎดังรูป ซึ่ง Service ตัวนี้จะมี Properties ดังนี้ คือมี Service name = KillLoginSessionService และมี Display name = ALIST Kill Login Session Service ถ้าต้องการติดตั้ง Service KillLoginSession เพิ่ม เพราะบางครั้งต้องการใช้ Service เดิมแต่ปรับแก้ค่าที่ config file ก็ทำการ copy Service KillLoginSession ไปไว้เพิ่มใน folder C:\service2 ดังรูป แล้ว run คำสั่ง %WINDIR%\Microsoft.NET\Framework\v2.0.50727\InstallUtil.exe c:\service2\KillLoginSession.exe จะปรากฎ error ดังรูป คือมี service นี้ติดตั้งอยู่แล้ว วิธีแก้คือ ให้ใส่ code ดังนี้ sc create <servicename> binpath= “<pathtobinaryexecutable>” [option1] [option2] [optionN] <servicename> คือ ชื่อ service ที่กำหนดขึ้นมาโดยต้องไม่ตรงกับ service ที่ทำงานอยู่ <pathtobinaryexecutable> คือ ตำแหน่งที่ตั้งของ file service ที่จะทำการ Install [option] ไว้สำหรับใส่คำสั่งอย่างอื่นเพิ่ม เช่น Display Name จะมีหรือไม่มีก็ได้ ใส่ code ตามข้างบนได้ดังนี้ sc create KillLoginSessionTest binpath=”C:\service2\KillLoginSession.exe” DisplayName=”ALIST Kill Login Session Test” จะได้ผลดังรูป มี Properties ดังนี้ คือมี Service name กับ Display name ตามที่ได้กำหนดไว้ คำสั่งสำหรับ Uninstall ก็คือ sc delete <servicename> ถ้าต้องการ Uninstall Service ที่สร้างขึ้นก็ใส่ code ดังนี้ sc delete KillLoginSessionTest

สร้างเงาให้กับวัตถุด้วย SmoothShadow

May 31, 2021 12:19

Layer of shadows คือจำนวนชั้นของเงา ปกติโดยทั่วไปเราจะใช้งานกันประมาณ 1-2 layer ซึ่งจำนวนของชั้นเงานี้จะสัมพันธ์กับตัวปรับแต่งด้านล่าง เช่นในรูปตั้งไว้ที่ 4 layers หรือเงา 4 ชั้น เราก็จะสามารถปรับกราฟการไล่เงาซึ่งจะแบ่งไว้ 4 ช่วงของแสงไล่ตั้งแต่ขาวไปดำ 4 ระดับ ถ้าปรับเป็น 7 layers ระบบก็จะซอยช่วงเทาเพิ่มมามากขึ้น ก็จะไล่จากขาวไปดำ 7 ระดับ Final transparency คือความเข้ม/ความโปร่งใสของเงา ค่ายิ่งน้อยเงาของเราจะยิ่งโปร่งแสง(จางขึ้น) ค่ายิ่งมากเงาของเราก็จะยิ่งทึบแสง(เข้มขึ้น) ส่วนของกราฟจะแสดงถึงการไล่แสงของเงา โดยเราจะสามารถดึงจุดวงกลมสีชมพูได้ เพื่อปรับความโค้งของกราฟ เงาก็จะมีการไล่แสงที่ต่างกันออกไป และส่วนของ Reverse alpha คือการกลับกันของเงา ไล่จากขาวไปดำ Final vertical distance คือการไล่แสงในแนวตั้ง ซึ่งจะสามารถไล่แสงได้แค่ทิศทางเดียวคือ แสงจากบนลงล่าง เงาด้านล่างของวัตถุ ยิ่งเพิ่มค่ามากเงาก็จะเพิ่มมาด้านล่างมากขึ้น ค่าลดลงเงาในแนวตั้งก็จะน้อยลง ส่วนกราฟจะแสดงปริมาณของเงาในแต่ละ layer สามารถดึงวงกลมสีชมพูเพื่อปรับแต่งได้ Final blur strength คือระดับความเบลอของเงา ยิ่งเพิ่มค่าเบลอ เงาของเราก็จะเบลอ ดูนวลตา กลมกลืนมากขึ้น ถ้าลดค่าความเบลอ เงาก็จะยิ่งชัดขึ้นจะเป็นสี่เหลี่ยม แสงแข็ง เห็นชัดเจน ส่วนกราฟจะความเบลอในแต่ละ layer สามารถดึงวงกลมสีชมพูเพื่อปรับแต่งได้เช่นกัน Reduce spread คือ ระดับการแผ่กระจายของเงา ยิ่งเพิ่มมาก เงาก็จะมีความใหญ่ มีการเกลี่ยแสงที่มาก ดูกลมกลืน ยิ่งลดค่า เงาก็จะยิ่งหดอยู่ใกล้วัตถุ ทำให้วัตถุมีความชัดเจนมากขึ้น อ้างอิง Smoother & sharper shadows with layered box-shadows | Tobias Ahlin , @brumm (@funkensturm) / Twitter

สร้างข้อความแจ้งเตือนด้วย Blazored Toast

May 31, 2021 11:09

ข้อความแจ้งเตือนการดำเนินการต่าง ๆ ไม่ว่าจะเป็นข้อความ Success, Error, Warning หรือ Information ภายในแอพ เป็นอีกหนึ่งฟังก์ชั่นที่มีการนำมาใช้งานบ่อยๆ เพื่อทำให้ระบบน่าใช้งานมากยิ่งขึ้น ในการเขียนแอพด้วย Blazor ก็มีของฟรีให้ติดตั้งและใช้งานได้เลย ชื่อว่า Blazored Toast ซึ่งเป็น JavaScript ที่ได้รับการ Implement ให้ใช้งานกับ Blazor ได้ ตัวอย่างการใช้ Blazored Toast ก่อนอื่นให้สร้าง Blazor Server App Project ตามขั้นตอนใน Blog(เขียนเว็บแอพแบบ SPA ด้วย Blazor (C#)) ก่อน จากนั้นทำตามขั้นตอนดังนี้ ติดตั้ง Blazored Toast ผ่าน NuGet package manager 1. คลิกเมนู Project 2. คลิก Manage NuGet Packages จะปรากฎหน้าจอ NuGet Package Manager ให้ทำดังนี้ 1. คลิก Browse 2. พิมพ์ Blazored Toast 3. คลิกเลือก Blazored.Toast 4. เลือกเวอร์ชั่นล่าสุด และคลิก Install การตั้งค่า 1. Register Services โดยการปรับปรุงไฟล์ Startup.cs ใส่โค้ด Using Blazored.Toast และเพิ่มโค้ด services.AddBlazoredToast(); ในฟังก์ชั่น ConfigureServices ดังรูป 2. เปิดไฟล์ _Import.razor เพิ่มโค้ดดังนี้ @using Blazored.Toast @using Blazored.Toast.Services 3. ตั้งค่าเริ่มต้นก่อนใช้งานใน MainLayout.razor โดยการเปิดไฟล์ MainLayout.razor และเพิ่มโค้ดดังรูป 4. อ้างอิง Style sheet ในไฟล์ _Host.cshtml <link href=”_content/Blazored.Toast/blazored-toast.min.css” rel=”stylesheet” /> การนำไปใช้งาน 1. สร้างไฟล์ใหม่ชื่อ ToastDemo.razor โดยคลิกขวาที่โฟลเดอร์ Pages เลือก Add -> Razor Components ดังรูป 2. เลือก Razor Component ตั้งชื่อไฟล์ ToastDemo.razor และคลิกปุ่ม Add 3. เขียนโค้ดใช้งาน โดยให้ inject IToastService ก่อน จากนั้นจึงเขียนโค้ดตัวอย่างโดยให้ Toast ทำงานเมื่อคลิกปุ่ม 4 ปุ่ม เพื่อแสดงข้อความแจ้งเตือน Information, Warning, Success และ Error 4. กด F5 และเปิด Url https://localhost:44381/ToastDemo จากนั้นลองคลิกแต่ละปุ่มจะได้ผลลัพธ์ดังรูป จะเห็นว่าเราไม่จำเป็นต้องเขียน JavaScript เองก็สามารถใช้งาน Toast ได้ ถือว่าเป็นการประหยัดเวลาในส่วนนี้ และทำให้เราสามารถโฟกัสการเขียนโค้ดในส่วนที่เป็น Core หลักของระบบได้อย่างเต็มที่