Author: wachirawit.j

  • การสร้าง Visual Studio Project Template

    ความสามารถอย่างหนึ่งที่น่าสนใจของ Visual Studio คือ การนำ Project ที่เราสร้างขึ้นมาใช้เป็นตัวตั้งต้นหรือ Project Template เพื่อสร้าง Project ต่อๆ ไปได้ ทำให้ Project ใหม่ที่สร้างขึ้น มีฟังกชันพื้นฐานพร้อมใช้งานแล้ว ตามที่กำหนดไว้ใน Template เช่น มีระบบเมนู มีตัวอย่างหน้าจอพร้อมการเชื่อมต่อฐานข้อมูล มีระบบ Authentication เป็นต้น ฟังกชันพื้นฐานต่าง ๆ เหล่านี้ จะทำให้เราสามารถเริ่ม Project ใหม่ได้อย่างรวดเร็ว

    วิธีการสร้าง Project Template ด้วย Visual Studio 2022 หลังจากที่เราเตรียม Project ตั้งต้นไว้แล้ว ดังนี้

    1. ไปที่เมนู Project -> Export Template

    2. Export Template Wizard เลือก Project template จากนั้นคลิก Next

    3. ระบุ Template name, Template description, Icon Image จากนั้นคลิก Finish

    เท่านี้ก็จะทำให้ได้ไฟล์ Project Template ไปใช้งานแล้ว โดย Visual Studio จะทำการนำเข้า Project Template ที่สร้างขึ้นมาให้โดยอัตโนมัติ ทำให้เราสามารถใช้สร้าง Project ใหม่ได้เลย

    วิธีการสร้าง Project ใหม่ จาก DIISBlazorTemplate

    1. เปิด Visual Studio 2022 ขึ้นมา แล้วไปที่เมนู File -> New -> Project
    2. จะปรากฏหน้าจอ Create a new project ให้เราพิมพ์ชื่อ DIIS ในช่องค้นหา ก็จะเจอผลลัพธ์ดังรูป ให้เลือก DIISBlazorTemplate และคลิกปุ่ม Next

    3. หน้าจอ Configure your new project ให้ระบุ Project name, Location จากนั้นคลิก Create

    4. ผลลัพธ์ที่ได้จะเป็น Project ใหม่ ดังรูป

    5. ทดลองรัน Project จะพบว่า เราสามารถใช้ฟังกชันพื้นฐานต่าง ๆ ได้ตามที่กำหนดไว้ใน Project ตั้งต้น เช่น การ Authentication, หน้าจอแสดงข้อมูลที่ได้จากการ Query จากฐานข้อมูล เป็นต้น

    หน้าจอเข้าสู่ระบบ
    หน้าจอตัวอย่างการแสดงผลข้อมูลจากฐานข้อมูล

  • การสร้าง GenericList Component (Blazor) ตัวช่วยแสดงผลรายการข้อมูล

    การสร้าง User Interface สำหรับแสดงผลลัพธ์จากการ Query ข้อมูลในฐานข้อมูลนั้น โดยปกติ UI จะต้องสามารถกำหนดการแสดงผลเพื่อตอบสนองต่อเหตุการณ์ที่เกิดขึ้น 3 สถานะได้ คือ

    1. ระหว่างที่กำลังรอผลการ Query ข้อมูล UI ควรแสดงให้เห็นว่ากำลังประมวลผล โดยแสดงเป็นข้อความหรือรูปภาพ Loading ก็ได้
    2. กรณี Query แล้วไม่พบข้อมูล ความแสดงผลให้ทราบว่าไม่พบข้อมูล
    3. กรณี Query แล้วพบข้อมูล จะนำข้อมูลมาแสดงผลด้วย Table หรือ List หรือ อื่นๆ ตามความเหมาะสม

    ตัวอย่างเช่น ต้องการสร้างหน้าจอแสดงผลรายการข้อมูลสินค้าโดย Query ข้อมูลเก็บไว้ในตัวแปรชื่อ ProductList จะมีค่าในสถานะต่าง ๆ ดังนี้

    1. ระหว่างที่กำลังรอผลการ Query จะมี ProductList == null
    2. กรณี Query แล้วไม่พบข้อมูล ค่า ProductList.Count == 0
    3. กรณี Query แล้วพบข้อมูล ค่า ProductList.Count > 0

    จะเป็นว่าเราสามารถสร้าง Component พื้นฐานไว้ใช้งาน (Reuse) เพื่อตอบสนองต่อสถานะทั้ง 3 ได้ ในที่นี่จะตั้งชื่อว่า GenericList Component (GenericList.razor) มีโค้ดดังนี้

    วิธีการใช้งาน GenericList Component ทำได้โดยการกำหนด Parameter ชื่อ List และ WholeListTemplate ก็จะสามารถแสดงผลข้อมูลได้ตามต้องการ

    รูปที่  1 ระหว่างที่กำลังรอผลการ Query
    รูปที่  2 กรณี Query แล้วไม่พบข้อมูล
    รูปที่  3 กรณี Query แล้วพบข้อมูล

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

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

  • Blazor : การเรียกใช้ JavaScript จาก C#

    ถ้าจะพูดว่า “Blazor เป็น SPA Framework ที่ใช้ C# แทน JavaScript” ก็ไม่ถูกต้องเสียทีเดียว เนื่องจากว่า JavaScript เป็นภาษาที่มีมานานแล้ว และใช้งานกันอย่างแพร่หลาย สามารถใช้ทำอะไรได้อย่าง แต่ Blazor นั้นถือได้ว่าเป็นน้องใหม่เพิ่งเข้าวงการ ที่บางครั้งก็ยังต้องพึ่งรุ่นพี่อย่าง JavaScript อยู่ดี ตัวอย่างเช่น การดึงข้อมูลพิกัดตำแหน่ง (Location) จาก Browser สามารถทำได้ด้วย JavaScript แต่ C# ทำไม่ได้ ดังนั้น Blazor ก็เลยจัดการกับปัญหานี้โดยการให้ C# ทำงานร่วมกับ JavaScript ซะเลย อะไรที่ C# ทำไม่ได้ ก็ให้ JavaScript ทำแทนไปเลย

    ตัวอย่างแอพต่อไปนี้จะเป็นการเรียกใช้ Bootstrap modal

    หลังจากที่สร้าง Blazor Server App Project ตามขั้นตอนใน Blog(เขียนเว็บแอพแบบ SPA ด้วย Blazor (C#)) แล้ว ทำตามขั้นตอนดังนี้

    1. เปิดไฟล์ _Host.cshtml
    2. เขียนโค้ดอ้างอิง jquery.min.js และ bootstrap.min.js
    3. เขียนโค้ดฟังก์ชั่น toggleModal เพื่อสั่งเปิดปิด Modal

    4. เปิดไฟล์ Index.razor
    5. Inject JSRuntime
    6. สร้างปุ่มสำหรับคลิกเพื่อเปิด Modal โดยใส่ onclick event ให้เรียกฟังก์ชั่น ShowModal
    7. สร้าง Bootstrap modal กำหนด id=”exampleModal”
    8. โค้ด C# ฟังก์ชั่น ShowModal สั่งเปิด Modal

    9. กด F5 เพื่อดูผลลัพธ์

    เพียงเท่านี้ก็จะสามารถเรียกใช้งาน JavaScript ผ่าน C# ได้แล้ว จะเห็นว่ามันไม่ได้ยากอย่างที่คิด

  • เขียนเว็บแอพแบบ SPA ด้วย Blazor (C#)

    หากคุณเป็นนักพัฒนาเว็บแอพที่ชอบฟังเพลงยุค 90 คุณก็คงจะคุ้นเคยกับ Multiple Page Applications (MPA) เป็นอย่างดี  MPA หรือเว็บแบบดั้งเดิมนั้นสามารถสังเกตุได้จากการที่เราคลิกดูข้อมูล หรือเปลี่ยน URL หน้าเว็บจะโหลดใหม่ทั้งหน้า เพื่อดึงข้อมูลมาแสดงผลใหม่ใน Browser ดังรูป

    ที่มา : https://subscription.packtpub.com/book/web_development/9781787284746/7/ch07lvl1sec38/application-routing

    ทุกวันนี้ก็ได้มีอีก Trend หนึ่งที่น่าสนใจ และมีการนำมาใช้สร้างเว็บแอพกันอย่างแพร่หลาย นั่นก็คือ Single Page Application หรือ SPA  โดยเว็บแบบนี้จะทำการโหลดหน้าเว็บจาก Request ครั้งแรกเท่านั้น หลังจากนั้นจะเป็นการรับส่งข้อมูลกันโดยใช้ JavaScript เข้ามาช่วย ทำให้ลดการ Reload หน้าเว็บโดยไม่จำเป็นลงไปได้ ข้อดีของเว็บแบบนี้คือ มี User Experience ที่ดีกว่า ตอบสนองได้อย่างรวดเร็ว และลดการทำงานของฝั่ง Server  ตัวอย่างเว็บไซต์แบบ SPA ที่เราใช้งานกันอยู่บ่อยๆ ได้แก่ Facebook, Instagram, Twitter, Google Mail เป็นต้น

    ที่มา : https://subscription.packtpub.com/book/web_development/9781787284746/7/ch07lvl1sec38/application-routing

    ตัวอย่างของ SPA Framework

    • Vue.js
    • React.js
    • AngularJS
    • Ember.js
    • Knockout.js
    • Meteor.js
    • Blazor

    จาก Framework ตัวอย่างทั้งหมดจะเป็น JavaScript ยกเว้น Blazor ที่ใช้ C# แทน และในฐานะที่คุ้นเคยกับการเขียนโค้ด C# อยู่แล้ว Blazor จึงเป็นตัวเลือกที่น่าสนใจ

    การสร้างแอพด้วย Blazor

    เปิด Visual Studio 2019 คลิก Create a new project ก็จะเจอหน้าจอดังรูป จากนั้นให้เลือก Project templates เป็น Blazor Server App

    หน้าจอ Configure your new project ให้ตั้งชื่อ Project name ว่า FirstApp.Web
    ระบุ Location เป็น C:\Source\

    หน้าจอ Additional information ให้เลือก Target Framework เป็น .NET 5.0

    ถึงขั้นตอนนี้แล้วทำให้ได้ Project ใหม่ที่มีไฟล์ตั้งต้นไว้ให้แล้ว  โดยการเขียนเว็บด้วย Blazor นั้นจะใช้ไฟล์ชนิด Razor ซึ่งเป็นเทคโนโลยีการสร้าง View ของ ASP.NET MVC

    กด F5 หรือคลิกปุ่มรัน เพื่อดูผลลัพธ์กันก่อน จะเห็นว่ามีตัวอย่างไว้ให้ศึกษา 2 เมนู คือ Counter และ Fetch data

    เมนู Counter เป็นตัวอย่างของการสร้าง Blazor Component เมื่อคลิกปุ่ม Click me ก็จะทำให้ Current count มีค่าเพิ่มขึ้นทีละ 1 โดยสังเกตได้ว่า ในการคลิกปุ่มทุกครั้งจะไม่มีการ Reload หน้าเว็บใหม่ทั้งหน้า แต่มีการเปลี่ยนแปลงเฉพาะส่วนของตัวเลข Current count เท่านั้น

    โค้ดตัวอย่าง Counter จะอยู่ในโฟลเดอร์ Pages ชื่อไฟล์ Counter.razor เมื่อเปิดดูจะพบว่าโค้ดมีส่วนสำคัญ 3 ส่วน คือ

    a. Route หรือ URL ที่ใช้ในการเข้าถึงหน้าเว็บ ในที่นี้คือ /counter เวลาเข้าใช้งานก็จะเป็น https://localhost:44381/counter

    b. View หรือส่วนของ HTML ใช้ในการจัดรูปแบบการแสดงผล

    c. C# Code เป็นส่วนที่ใช้เขียนโค้ดควบคุมการแสดงผลของ View

    มาถึงจุดนี้แล้ว ก็สามารถทดลองเขียนโปรแกรมเล่นๆ ได้ เช่น ถ้าต้องการให้คลิกปุ่ม Click me แล้ว ให้ตัวเลขเพิ่มครั้งละ 5 ก็สามารถทำได้ง่าย ๆ ดังรูป

    Component สามารถนำมา Reuse ได้ เช่น ถ้าต้องการนำ Counter ไปใช้งานในหน้า Home ก็ทำได้โดยการเพิ่ม Markup up เข้าไปใน View ดังรูป หากต้องการ Counter หลายตัว ก็สามารถใส่ tag เพิ่มเข้าไปได้อีกตามต้องการ

    จากตัวอย่างนี้จะเห็นได้ว่าหากผู้พัฒนามีความคุ้นเคยกับภาษา C# อยู่แล้ว ก็สามารถเขียนเว็บแอพแบบ SPA ด้วย Blazor ได้โดยใช้เวลาในการศึกษาเพิ่มเติมเพียงเล็กน้อยเท่านั้น ดังนั้น Blazor จึงเป็นตัวเลือกที่น่าสนใจ

  • สร้างไฟล์ PDF จาก HTML + CSS ด้วย iText7.pdfhtml (C#)

    การพัฒนา Web Application หลายครั้งที่จะมีความต้องการจาก User ให้พัฒนาระบบที่สามารถนำข้อมูลจากฐานข้อมูลมาออกรายงาน หรือบันทึกในรูปแบบ PDF ได้ ระบบที่กำลังพัฒนาอยู่ขณะนี้ก็เช่นเดียวกัน มีความต้องการให้สร้าง E-Form บันทึกข้อมูลในฐานข้อมูล และสร้างไฟล์ PDF ที่มีการจัดรูปแบบเป็นหนังสือราชการ ได้แก่ บันทึกข้อความ ประกาศ ระเบียบ คำสั่ง เป็นต้น จากนั้นจึงนำไฟล์ PDF ที่ได้ไปใช้ลงนามด้วย Digital Signature และดำเนินการอื่นๆ ต่อได้

    ความยากของโปรเจ็คนี้คือ การจัดรูปแบบเอกสารที่มีความเป๊ะมากๆ ไม่ว่าจะเป็น การจัดขอบบน ขอบล่าง ขนาดตัวอักษร ระยะห่างระหว่างย่อหน้า เป็นต้น และที่สำคัญคือ จะสร้าง PDF อย่างไรให้สามารถแสดงผลได้ยืดหยุ่นตามข้อมูลที่มี ถ้าข้อมูลเยอะก็ให้ขึ้นบรรทัดใหม่ได้ หรือถ้าล้นหน้ากระดาษก็ขึ้นหน้าใหม่อัตโนมัติ

    จากการศึกษาและลองผิดลองถูกก็ได้แนวทางในการพัฒนาดังนี้

    1. สร้างไฟล์ HTML และจัดรูปแบบแสดงผลข้อมูลด้วย CSS ให้เหมือนกระดาษ
    2. ใช้ Add-on ของ iText7 ชื่อ iText7.pdfhtml ช่วยแปลงจาก HTML เป็น PDF
    3. บันทึกไฟล์ PDF บนเซิร์ฟเวอร์ หรือแสดงผลผ่าน Browser

    ตัวอย่างการพัฒนาด้วย Blazor Server Application

    1. เปิด Visual Studio 2019 และสร้าง Project ใหม่ เลือก Blazor Server App คลิก Next ระบุโฟลเดอร์บันทึก Project จากนั้น ระบุ Target Framework เป็น .NET 5.0 คลิก Create
    1. ติดตั้ง Add-on ชื่อ itext7.pdfhtml จาก NuGet โดยไปที่เมนู Project -> Manage NuGet Packages
    2. คลิก Browse และค้นหา itext7.pdfhtml เลือกเวอร์ชั่นล่าสุด (3.0.4) และคลิก Install
    1. สร้างไฟล์ HTML จัดรูปแบบข้อมูลด้วย CSS เก็บไว้ในโฟลเดอร์ wwwroot ในที่นี้สร้างไฟล์ชื่อ doc1.html และระบุ style sheet ไว้ในโฟลเดอร์ css
    1. เปิดไฟล์ Pages/Index.razor เขียนโค้ดดังนี้
      5.1 @using iText.Html2pdf
      เพื่อให้สามารถเรียกใช้งาน Ad-on ได้
      5.2 @using System.IO
      เพื่อให้สามารถเขียนไฟล์ได้
      5.3 กำหนด onclick event ของปุ่ม ให้ทำฟังก์ชั่น CreatePDF
      5.4 public static string SRC = $”{BASEURI}doc1.html”;
      ระบุไฟล์ HTML ต้นทางที่ต้องการแปลงเป็น PDF
      5.5 public static string DEST = $”{TARGET}doc1.pdf”;
      ระบุไฟล์ pdf บันทึกผลลัพธ์ของการแปลงไฟล์
      5.6 HtmlConverter.ConvertToPdf(new FileInfo(SRC), new FileInfo(DEST), properties);
      แปลงไฟล์ HTML เป็น PDF
    1. คลิก รัน หรือกด F5 จะได้หน้าจอดังรูป
    1. คลิก Create PDF ระบบจะสร้างไฟล์ชื่อ doc1.pdf ดังรูป

    เพียงเท่านี้ก็จะได้ผลลัพธ์ไฟล์ PDF แล้ว แต่จากการใช้งานพบว่า ยังมีข้อจำกัดในส่วนของการจัดรูปแบบข้อความภาษาไทยแบบ Justify ยังไม่สวยงามเท่าที่ควร

  • การเรียกใช้งาน (Register) Bootbox.js ด้วย C#.NET

    ในการออกแบบเว็บฟอร์มบันทึกข้อมูลลงฐานข้อมูลนั้น นักพัฒนาเว็บแอ๊พปลิเคชั่นส่วนใหญ่จะออกแบบเป็นลำดับขั้นตอนการทำงานประมาณนี้

    1. ผู้ใช้เปิดเว็บฟอร์มขึ้นมาด้วยเว็บบราวเซอร์
    2. ผู้ใช้กรอกข้อมูลลงในเว็บฟอร์ม
    3. ผู้ใช้กดปุ่มบันทึกข้อมูล
    4. ระบบตรวจสอบ (Validate) ข้อมูลที่ผู้ใช้กรอกเข้ามา
      1. ถ้าผ่านก็บันทึกข้อมูลลงฐานข้อมูล
      2. ถ้าไม่ผ่านก็จะแจ้งข้อความแจ้งเตือนผู้ใช้งานให้ตรวจสอบข้อมูลใหม่อีกครั้ง
    5. ระบบจะแจ้งผลการบันทึกข้อมูลว่า
      1. “บันทึกข้อมูลสำเร็จ” กรณีที่บันทึกสำเร็จ หรือ
      2. “เกิดข้อผิดพลาดในการบันทึกข้อมูล” ในกรณีที่มีข้อผิดพลาด

    การพัฒนาเว็บด้วย ASP.NET นั้นในขั้นตอนที่ 4 จะถูกเขียนด้วยโค้ด C#.NET ซึ่งเป็น Server Side Script ส่วนขั้นตอนที่ 5 นั้นเราสามารถใช้ Dialog ของ Bootbox.js ซึ่งเป็น Client Side Script มาช่วยได้ ซึ่งในบทความนี้จะแสดงวิธีการเขียนโค้ด C#.NET ให้เรียกใช้ Bootbox Dialog ได้เลย  (อ่านบทความ การสร้าง JavaScript Dialog ด้วย Bootbox.js ได้ที่นี่) และสร้างเป็นฟังก์ชั่นสำเร็จรูปไว้เรียกใช้งานใหม่ได้ (Reuse)

     

    การรันคำสั่ง Bootbox.js ซึ่งเป็น JavaScript ผ่าน C#.NET นั้นจะต้องใช้ ScriptManager ช่วยลงทะเบียนสคริปต์ (Register Script) ดังนี้

    รูปที่ 1 การ Register Script ด้วย ScriptManager

    เพียงเท่านี้ก็สามารถนำส่วนของโค้ดดังรูปที่ 1 ไปใช้ในการแสดงข้อความแจ้งผู้ใช้หลังการบันทึกข้อมูลลงฐานข้อมูลได้แล้ว โดยมีตัวอย่างดังรูปที่ 2

    รูปที่ 2 การแสดงข้อความแจ้งผู้ใช้หลังการบันทึกข้อมูล

    ผลลัพธ์ที่ได้จากโค้ดข้างต้นจะเป็นดังรูปที่ 3

    รูปที่ 3 ผลลัพธ์ของข้อความแจ้งเตือนจากการบันทึกข้อมูล

    แน่นอนว่าในการพัฒนาเว็บแอ๊พปลิเคชัน 1 ครั้ง จะประกอบด้วยฟอร์มบันทึกข้อมูลมากมาย ทำให้ต้องเขียนโค้ดซ้ำๆ กันหลายครั้ง จากโค้ดข้างต้นเราสามารถ Optimize โค้ดได้อีกโดยให้สามารถเรียกใช้งานและแก้ไขโค้ดในภายหลังได้ง่ายขึ้น โดยการย้ายส่วนลงทะเบียนสคริปต์ไปไว้ในฟังก์ชั่นกลางสร้างเป็น Library (ในที่นี้จะตั้งชื่อว่า CoreBLL) สำเร็จรูปไว้ใช้ต่อไปดังนี้

    รูปที่ 4 CoreBLL

    หลังจากที่สร้าง CoreBLL เสร็จแล้วให้แก้ไขโค้ดบันทึกข้อมูลดังรูปที่ 5

    รูปที่ 5 โค้ดบันทึกข้อมูลลงฐานข้อมูล

    จะเห็นว่า CoreBLL ทำให้โค้ดในการบันทึกข้อมูลฟอร์มสั้นลง ง่ายขึ้น และช่วยลดความผิดพลาดในการเขียนโค้ดลง ในขณะที่หน้าจอผลลัพธ์ (รูปที่ 3) ยังคงเหมือนเดิม

     

  • การสร้าง JavaScript Dialog ด้วย Bootbox.js

    เชื่อว่านักพัฒนาเว็บแอปพลิเคชันทุกคนต้องเคยได้ใช้งาน JavaScript กันเพื่อทำให้เว็บแอปพลิเคชันสามารถทำงานได้ตามความต้องการ  ตัวอย่างตัวที่ใช้กันบ่อยๆ น่าจะเป็น JavaScript Confirm ใช้ในการยืนยันก่อนการดำเนินการต่าง ๆ เช่นการลบข้อมูล เพื่อป้องกันการคลิกปุ่มลบโดยไม่ได้ตั้งใจ ดังรูป

    JavaScript Confirm บน Google Chrome

     

    JavaScript Confirm บน Mozilla Firefox

    ตัวอย่างโค้ดเรียกใช้งาน JavaScript Confirm

    จากรูปจะเห็นว่า JavaScript Confirm บน Google Chrome และ Mozilla Firefox หน้าตาไม่เหมือนกัน ทั้งๆที่ใช้โค้ดเดียวกัน และปัญหาอีกอย่างหนึ่งที่พบคือ หากเราต้องการให้ข้อความ “คุณต้องการลบข้อมูลรายการนี้ใช่หรือไม่?” มีการขึ้นบรรทัดใหม่ ใส่สี เพิ่มขนาดฟอนต์ จัดตัวหนา ตัวเอียงก็ไม่สามารถทำได้เลย แต่ถ้าต้องการให้แก้ปัญหาเหล่านี้ได้ก็ต้องใช้ตัวช่วย นั่นคือ Bootbox.js ซึ่งเป็น JavaScript library ที่ใช้งานร่วมกับ Bootstrap โดยใช้ Bootstrap modal มาทำหน้าที่แทน JavaScript Dialog ต่างๆ ทั้ง Alert, Confirm, Prompt และรวมถึง Custom Dialog ด้วย ทำให้หน้าตาของ Dialog จะเหมือนกันทุก Browser และสามารถจัดรูปแบบการแสดงผลได้ตามต้องการโดยใช้ CSS

    วิธีการติดตั้ง

    1. เข้าไปที่เว็บไซต์ http://bootboxjs.com และเลือกดาวน์โหลดไฟล์ชื่อ bootbox.min.js หรือถ้าไม่ต้องการดาวน์โหลดก็สามารถใช้ CDN (https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js) ได้เช่นกัน
    2. ใส่โค้ดอ้างอิงไปยัง bootbox.min.js ใน header tag ดังนี้
      <script src=”path/to/script/bootbox.min.js”></script>
      หรือ
      <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js“></script>

    ตัวอย่างการใช้งาน Confirm Dialog

    1. กำหนดชื่อ CSS class ให้กับปุ่มลบ ในที่ตั้งชื่อว่า “confirm”

      กำหนดชื่อ CSS Class ให้กับปุ่มลบ
    2. แทรกโค้ด JavaScript ใน HTML ดังนี้

      JavaScript สำหรับ Confirm Dialog
    3. ลองเปิดเว็บด้วย Google Chrome และ Mozilla Firefox ก็จะได้ผลลัพธ์เหมือนกันดังรูป

      Confirm Dialog ที่สร้างขึ้นด้วย Bootbox.js

    นอกจาก Confirm Dialog แล้ว ท่านสามารถดูตัวอย่าง Dialog แบบอื่นๆ ได้จากที่นี่ เพียงเท่านี้ก็จะสามารถสร้าง Dialog สวยๆ และมีความยืดหยุ่นไว้ใช้งานได้แล้ว

     

  • มัลแวร์สวมรอยการใช้งาน Facebook

    มีรายงานจากศูนย์ประสานการรักษาความมั่นคงปลอดภัยระบบคอมพิวเตอร์ประเทศไทย (ไทยเซิร์ต) เมื่อวันที่ 10 พ.ค. 2559 พบว่ามีการแพร่กระจายมัลแวร์ประเภท Malicious Code ผ่าน Facebook โดยอาศัยช่องทางการแจ้งเตือนของ Facebook

    การทำงานของมัลแวร์

    เมื่อผู้ใช้ได้รับการแจ้งเตือนจาก Facebook ว่าถูกพาดพิงโดยบุคคลที่สาม หากผู้ใช้คลิกเข้าไปดูข้อความแจ้งเตือนดังกล่าวก็จะถูกนำไปยังไซต์อื่นทันที และเว็บไซต์ปลายทางที่ถูกนำพาไปจะปรากฏข้อความว่าเป็นส่วนขยายของ Browser สำหรับใช้เปลี่ยนสีของเว็บไซต์ Facebook และให้ดาวน์โหลดไฟล์ Instalador_Cores.scr มาติดตั้ง ซึ่งเป็นส่วนขยายของ Google Chrome

    รูปที่ 1 หน้าเว็บไซต์ปลายทางมีให้ดาวน์โหลดไฟล์ Instalador_Cores.scr

    หากผู้ใช้หลงเชื่อดาวน์โหลดและติดตั้งจะพบว่ามีการสร้างไฟล์ไว้ที่ไดเรกทอรี่ C:\User\[ชื่อผู้ใช้]\AppData\Local\Google\Update จากนั้นจะสร้าง Shortcut สำหรับเรียกใช้งาน Google Chrome ไว้ที่ Desktop โดยตัว Shortcut ดังกล่าวจะเป็นการเปิดใช้งาน Google Chrome โดยโหลดส่วนเสริมที่ถูกติดตั้งใหม่ขึ้นมาทำงานด้วย

    หากเปิดใช้งาน Google Chrome จาก Shortcut ดังกล่าว และเข้าใช้งานเว็บไซต์ Facebook ก็จะพบว่าสีของ Facebook เปลี่ยนเป็นสีเขียวดังรูปที่ 2 และยังสามารถปรับแต่งเป็นสีอื่นได้ตามต้องการ

    รูปที่ 2 ตัวอย่างส่วนขยายของ Google Chrome ที่สามารถเปลี่ยนสีเว็บไซต์ Facebook ได้

    นอกจากการทำงานดังกล่าวแล้วมัลแวร์ตัวนี้ยังได้แฝงการทำงานเบื้องหลังไว้โดยจะตรวจสอบว่ามีการล็อคอิน Facebook ไว้หรือไม่ หากใช่ก็จะสวมรอยไปโพสต์คอมเมนต์ในเว็บไซต์ pinandwin8.co.nz ทันที โดยในคอมเมนต์ก็จะมีการอ้างถึงผู้อื่นที่อยู่ในรายชื่อเพื่อนของผู้ใช้อีกด้วย

    การแก้ไขหากตกเป็นเหยื่อ

    1. ไปที่ไดเรกทอรี C:\User\[ชื่อผู้ใช้]\AppData\Local\Google\Update แล้วลบไดเรกทอรี่และไฟล์ที่มัลแวร์สร้าง ดังนี้ ไดเรกทอรี่ css, img, js ไฟล์ manifest.json, popup.html และ background.html
    2. ลบไอคอน Google Chrome ที่ถูกสร้างขึ้นใหม่ออกจาก Desktop

    การป้องกันการโจมตี

    1. ผู้ใช้ Facebook ควรอ่านข้อความแจ้งเตือนที่ปรากฏบนหน้าจอ โดยเฉพาะเมื่อ Facebook แจ้งว่าการคลิกลิงก์จะเป็นการเปลี่ยนเส้นทางไปยังเว็บไซต์อื่น
    2. หากคลิกลิงก์จาก Facebook แล้วพบหน้าจอขอให้ใส่รหัสผ่าน ไม่ควรใส่ข้อมูลเพราะอาจเป็นหน้าเว็บไซต์หลอกลวง (Phishing)
    3. หากคลิกลิงก์จาก Facebook แล้วพบหน้าจอขอให้ดาวน์โหลดโปรแกรม ควรพิจารณาก่อนดาวน์โหลดโปรแกรมนั้นเพราะอาจเป็นอันตรายได้
    4. ผู้ดูแลระบบอาจพิจารณาบล็อคเว็บไซต์ pinandwinco.nz เนื่องจากเป็นเว็บไซต์ที่เผยแพร่มัลแวร์

    แหล่งข้อมูลอ้างอิง