สุขกมล สุขพิศิษฐ์

สร้างเอกสาร PDF ด้วย iTextSharp

January 14, 2016 22:36

ที่มา บ่อยครั้งที่ในชีวิตของโปรแกรมเมอร์จะต้องพบกับความต้องการของลูกค้าที่อยากได้รายงานหรือเอกสารที่สามารถสร้างได้จากระบบ แน่นอนว่าประเภทเอกสารที่ต้องการย่อมมี PDF บรรจุไว้แน่นอนเพราะเป็นเอกสารที่นิยมใช้กันอย่างแพร่หลาย ทั้งนี้ เครื่องมือสำหรับการสร้างเอกสารประเภทดังกล่าวมีอยู่มากมาย แต่จุดสำคัญนั้นอยู่ที่การเลือกใช้งานซึ่งย่อมแตกต่างกันไปตามปัจจัยต่าง ๆ เช่นในบทความนี้ ลูกค้าต้องการเอกสารเพื่อพิมพ์เป็น hard copy ไว้ที่หน่วยงาน ยังไม่ถึงขั้นรายงานนะครับ แค่เอกสารบันทึกข้อความ ดังนั้นผู้เขียนจึงไม่เลือกใช้เครื่องมือที่เก่งกาจเช่น Crystal report หรือ Reporting service และทำการค้นหาเครื่องมือที่มีน้ำหนักเบา (เวลาใช้ไม่กินทรัพยากรเยอะ) แต่ตอบสนองความต้องการได้ในขณะนั้น รวมไปถึงการมี documentation ที่ดี เข้าใจง่าย ปฏิบัติตามได้ไม่ยาก ซึ่งสุดท้ายก็มาเจอกับเครื่องมือที่ชื่อ iTextSharp คุณสมบัติของเครื่องมือ iTextSharp เป็นผลงานของ iText ซึ่งทำมาเพื่อการสร้างเอกสาร PDF บน C# platform โดยเฉพาะ ในขณะเดียวกันก็มีเครื่องมือแบบเดียวกันสำหรับ platform อื่น ๆ ด้วย เราจึงจะได้เห็นตัวอย่างใน documentation ของเขาเป็นภาษา Java ความสามารถของ iTextSharp คือการสร้างเอกสาร PDF รวมไปถึงการตัดต่อเอกสารด้วย เช่น การนำเอกสารมารวมกัน การแยกเอกสารออกจากกัน นับว่าเป็นเครื่องมือที่ครบเครื่องทีเดียวสำหรับจุดประสงค์หลัก ๆ ของเรา แต่ความสามารถอื่น ๆ ก็ยังมีครับแต่ผู้เขียนยังไม่ได้ต้องการใช้งานความสามารถนั้นจริง ๆ จึงยังไม่ได้นำเสนอในบทความนี้ การใช้งานเครื่องมือนี้จะต้องใช้การเขียนโปรแกรม 100% ครับหรือเรียกเป็นภาษาอังกฤษว่า Programmatically ซึ่งยุ่งยากพอควรทีเดียวโดยเฉพาะการจัดวางตำแหน่งของแต่ละส่วน พูดได้ว่าจะต้องจินตนาการหรือร่างแบบลงบนกระดาษเลยทีเดียว ทั้งนี้ทั้งนั้นนี่ก็เป็นข้อดีข้อหนึ่งสำหรับคนชอบเขียนโปรแกรมเพราะเห็นกระบวนการชัดเจน (ไม่ค่อยสะดวกแต่สนุกดี) ทดลองใช้ ติดตั้งโปรแกรม ก่อนอื่นเลยก็ต้อง download library มาก่อนครับ (Link)การติดตั้งนั้นไม่ยาก แค่ reference ไปหา dll ที่เค้าให้มาก็พอ ไฟล์ที่ได้มามีทั้งหมด 3 ชุดครับคือ itextsharp-dll-core itextsharp-dll-pdfa itextsharp-dll-xtra ทั้งหมดนี้ทำหน้าที่แตกต่างกันครับ สำหรับการสร้าง PDF เราใช้แค่ตัว itextsharp-dll-core ก็พอ องค์ประกอบพื้นฐาน องค์ประกอบพื้นฐานของ itextsharp นั้นมีหลายตัว แต่ตัวที่เพียงพอสำหรับความต้องการของผู้เขียนในตอนนี้มีดังนี้ครับ Chunk เป็นองค์ประกอบสำหรับ “คำ” Phrase คือ “ประโยค” ซึ่งประกอบด้วยหลาย Chunk Paragraph คือ “ย่อหน้า” ซึ่งประกอบด้วยหลาย phrase และ chunk PdfPCell คือ cell ในตาราง PdfPTable คือ ตารางประกอบด้วยหลาย PdfPCell iTextSharp.text.Image คือรูปภาพ การกำหนด font และการเพิ่ม font iTextSharp นั้นสามารถเพิ่ม font ได้ครับ โดยการทำตามขั้นตอนดังนี้: BaseFont bf_bold = BaseFont.CreateFont(HttpContext.Current.Server.MapPath(“~/Regist/Theme/fonts/THSarabunNewBold.ttf”), BaseFont.IDENTITY_H, BaseFont.EMBEDDED); เท่านี้เราก็จะมี font แบบที่เราอยากได้ไว้ใช้งานในเอกสารครับ หลังจากนั้น เราก็สร้างตัวอักษรเพื่อใช้งาน ตามตัวอย่างนี้ครับ // Bold BaseFont bf_bold = BaseFont.CreateFont(HttpContext.Current.Server.MapPath(“~/Regist/Theme/fonts/THSarabunNewBold.ttf”), BaseFont.IDENTITY_H, BaseFont.EMBEDDED); h1 = new Font(bf_bold, 18); bold = new Font(bf_bold, 16); smallBold = new Font(bf_bold, 14); // Normal BaseFont bf_normal = BaseFont.CreateFont(HttpContext.Current.Server.MapPath(“~/Regist/Theme/fonts/THSarabunNew.ttf”), BaseFont.IDENTITY_H, BaseFont.EMBEDDED); normal = new Font(bf_normal, 16); smallNormal = new Font(bf_normal, 14); เริ่มต้นสร้างเอกสาร PDF เมื่อเรากำหนด font ไว้ใช้งานเสร็จแล้ว เราก็สามารถสร้างเอกสารได้เลยครับ การสร้างเอกสารจะเริ่มจากการกำหนดขนาดเอกสารครับ ตามตัวอย่างนี้ Document

การอัปโหลดไฟล์หลาย ๆ ไฟล์พร้อมกันด้วย Dojo

January 14, 2016 21:33

ที่มา การ upload แฟ้มข้อมูล (File) เป็นกิจกรรมที่อยู่คู่กับ Web application มาเนิ่นนาน ยิ่งเมื่อการพัฒนา Web application เข้าสู่ยุคสมัยของ Web 2.0 และเป็น Web 3.0 ในยุคปัจจุบันก็ยิ่งเกิดเครื่องมือต่าง ๆ เพื่ออำนวยความสะดวกในการ upload ไฟล์มากขึ้นรวมไปถึงความสามารถในการอัปโหลดหลาย ๆ ไฟล์พร้อมกัน (Multi-File Uploading) ณ เวลานี้มีเครื่องมือมากมายสำหรับนักพัฒนา Web application ผู้อ่านอาจมีโอกาสได้ใช้งานเครื่องมือจากบางค่ายบ้างแล้ว แต่ในบทความนี้ผู้เขียนจะแนะนำวิธีการใช้งานเครื่องมือในการทำให้ Web application ของเราสามารถรองรับความต้องการในการอัปโหลดไฟล์หลาย ๆ ไฟล์ได้พร้อมกันตัวหนึ่งชื่อ HTML5 Multi-File Uploader ของ Dojo Toolkit ซึ่งทำงานได้ตามความต้องการของผู้เขียนดังนี้ ความต้องการ สามารถ upload file ได้หลาย ๆ ไฟล์พร้อมกัน upload file ด้วย AJAX ต้องไม่มีการ Post Back หรือทำให้เกิดการ Load หน้า Web ใหม่ สามารถปรับแต่งได้ตามความต้องการ ที่จริงแล้วเครื่องมือของ Dojo Toolkit เป็นเครื่องมือที่ใช้ยากพอสมควรสำหรับคนที่ไม่ค่อยถนัดในการใช้งาน JavaScript แต่เนื่องจาก API ที่เปิดโอกาสให้ผู้ใช้ได้เข้าถึงทุกส่วนของ Widget ทำให้เราสามารถปรับแต่งการใช้งานเพื่อให้เหมาะกับความต้องการได้โดยอิสระ ศึกษาคุณสมบัติของเครื่องมือ HTML5 Multi-File Uploader เป็นส่วนหนึ่งใน package ชื่อ dojox (dojox/form/Uploader) ซึ่งในความเป็นจริงแล้ว เครื่องมือตัวนี้ไม่ได้เจาะจงเฉพาะการใช้งาน HTML5 เท่านั้นแต่ยังคงใช้งานกับ Flash หรือ iframe ได้ด้วยตามแต่ผู้ใช้จะปรับแต่งเนื่องจาก Web browser แต่ละยี่ห้อก็มีข้อจำกัดแตกต่างกันไปตาม Browser engine และ Rendering engine ตามชื่อของเครื่องมือ Uploader ใช้ input ของ HTML5 เป็นองค์ประกอบหลัก จึงต้องกำหนดใน Form ให้รองรับการอัปโหลดไฟล์ด้วยการกำหนด attribute ชื่อ method และ enctype ดังนี้ <form method=”post” enctype=”multipart/form-data”> การสร้าง Widget ของ Uploader ทำได้ 2 รูปแบบดังนี้ Programmatically require([ “dojox/form/Uploader” ], function (Uploader) { myUploader = new dojox.form.Uploader(); } Markup <input name=”uploadedFile” multiple=”true” type=”file” data-dojo-type=”dojox/form/Uploader” data-dojo-props=”label: ‘Select Some Files’,……..” /> <div id=”files” data-dojo-type=”dojox/form/uploader/FileList” data-dojo-props=”uploaderId: ‘uploader’”></div> ลองใช้งาน เนื่องจากผู้เขียนพัฒนา Web application ด้วย Visual C# จึงจะยกตัวอย่างการประยุกต์การใช้งาน Uploader ร่วมกับ ASP.NET ซึ่งมีขั้นตอนดังนี้ 1. นำ Widget มาวางในส่วนที่เราต้องการ <input name=”uploadedfile” type=”file” id=”uploader” data-dojo-id=”fileUploader” data-dojo-type=”dojox/form/Uploader” data-dojo-props=”label: ‘Select files’, url: ‘../Test/TestUpload.ashx’, multiple: true” /> <input type=”hidden” name=”hdnMasterId” id=”hdnMasterId” value=”test” /> <input type=”hidden” name=”hdnFileDesc” id=”hdnFileDesc” value=”test” /> <div id=”files”

รู้จักกับ Algebraic Specification

July 15, 2015 23:10

สวัสดีครับ หลังจากใช้เวลานานในการคิดว่าจะเขียนอะไรดี ก็คิดได้ว่านำเอาความรู้ที่ได้จากการไปเรียนทบทวนเรื่องวิศวกรรมซอฟต์แวร์มาเล่าสู่กันฟังดีกว่า เรื่องที่จะเล่านี้ก็คือ การเขียน Specification ในรูปแบบหนึ่งซึ่งอาจจะใหม่สำหรับบางคน เรียกว่า Algebraic Specification (ชื่อภาษาไทยว่าอะไร ไปหาเอาเองนะครับ) Algebraic Specification เป็นรูปแบบหนึ่งของ Formal Specification (อย่าเพิ่งงงนะครับ) ในการเขียน specification รูปแบบนี้จะใช้คณิตศาสตร์เข้ามาช่วยเพื่อให้เห็นการติดต่อระหว่าง module หรือ component ที่ชัดเจน แล้วมันต่างจากที่เขียนอยู่ยังไง? ถ้าคุณเขียน specification พรรณนาด้วยภาษามนุษย์ยาวเป็นหน้า ๆ อันนั้นเรียกว่า form-based specification ครับ เป็นวิธีการเขียนที่มนุษย์อ่านแล้วเข้าใจมากกว่า แต่ในการใช้ภาษาเขียนนั้น อาจจะเกิดความกำกวมได้ครับ ประเภทที่คนอ่าน อ่านแล้วงง อ่านแล้วรู้สึกว่ามีหลายความหมายหรือเข้าใจไม่ชัดเจนซึ่งอาจเป็นผลมาจาก Requirement definition และ Requirement specification ที่กำกวมเช่นเดียวกัน ดังนั้นจึงมีผู้ปราดเปรื่องบางท่านคิด Algebraic specification ขึ้นมาซึ่งหน้าตาเป็นดังนี้ ARRAY (Elem: [Undefined -> Elem]) sort ArrayImports INTEGER DescriptionArrays are collections of elements of generic type Elem. They have a lower and upper bound (discovered by the operations First and Last). Individual elements are accessed via their numeric index.Create takes the array bounds as parameters and creates the array, initializing its values to Undefined. Assign creates a new array which is the same as its input with the specified element assigned the given value. Eval reveals the value of a specified element. If an attempt is made to access a value outside the bounds of the array, the value is undefined. OperationsCreate (Integer, Integer) -> ArrayAssign (Array, Integer, Elem) -> Array First (Array) -> Integer Last (Array) -> Integer Eval (Array, Integer) -> Elem AxiomsFirst (Create (x, y)) = xFirst (Assign (a, n, v)) = First (a) Last (Create (x, y)) = y Last (Assign (a, n, v)) = Last