January 2017 – Page 2 – CoP PSU IT Blog

คู่มือเทคนิคการใช้งาน Function พื้นฐานใน Itextsharp สำหรับมือใหม่ ตอนที่ 1

January 14, 2017 16:46

หลังจากที่ผู้เขียนได้ทดลองใช้งาน Itextsharp มาเป็นระยะเวลานึง ในระหว่างที่ได้ทำการใช้งานนั้น ก็เกิดปัญหาต่างๆจากการใช้งานมากมาย ซึงมาจากความไม่รู้ของผู้เขียนเอง เลยได้ทำการรวบรวมข้อมูลวิธีใช้งานเบื้องต้น ให้กับผู้ที่สนใจใช้งาน Itextshap ได้สะดวกมากขึ้น ซึ่งจริงๆแล้วมีพี่ท่านนึงได้เขียนบทความเกี่ยวกับเรื่องนี้ไว้แล้วบ้างส่วน สำหรับผู้ที่สนใจสามารถอ่านได้จาก Link นี้ครับ สร้างเอกสาร PDF ด้วย iTextSharp ส่วนในบทความนี้จะทำการขยายรายละเอียดลงไปในแต่ละ Function ครับ โดย Function ที่จะพูดถึงในบทความนี้มีดังต่อไปนี้ 1. BaseFont และ Font คืออะไร ถ้าจะให้พูดถึง Function Basefont ให้เข้าใจง่ายๆแล้วละก็ หน้าที่ของมันคือเป็นการประกาศให้ตัว Itextsharp ทราบว่าเราต้องการใช้ Font อะไรในการทำงานบ้าง สามารถเทียบได้กับช่องเลือก Font ในโปรแกรม Office นั้นแหละครับ และ Function Font จะสร้างรูปแบบของ Font ได้ตามที่เราต้องการ ไม่ว่าจะเป็น ตัวหนา เอียง ขีดเส้นใต้ ขีดเส้นทับ เป็นค่าเริ่มต้นไว้ แล้วหลังจากนั้นเราก็สามารถนำไปใช้งานได้ตลอดการสร้างเอกสาร โดยอ้างอิง Font ที่ใช้งานมาจาก BaseFont อีกทีนึง ตอนนี้ก็มาดูรูปแบบการสร้าง BaseFont และทำ Font ต้นแบบเป็นตัวหนานะครับโดยสามารถทำได้ 2 วิธีคือ กรณีที่เรามีชุดของ Font มาแล้วนะครับ(คือแยกตัวหนา ตัวเอียง ขีดเส้น) BaseFont bf_bold = BaseFont.CreateFont(@”C:\WINDOWS\Fonts\THSarabunNewBold.TTF”, BaseFont.IDENTITY_H, BaseFont.NOT_EMBEDDED, true); Font fnt = new Font(bf, 12); กรณีที่เรามี Font แค่รูปแบบเดียว BaseFont bf = BaseFont.CreateFont(@”C:\WINDOWS\Fonts\THSarabun.TTF”, BaseFont.IDENTITY_H, BaseFont.NOT_EMBEDDED, true); Font fnt = new Font(bf, 12,Font.BOLD); จากตัวอย่างทั้ง 2 แบบ เราจะมี Font ที่มีรูปแบบของตัวหนาในชื่อของตัวแปร fnt ไว้ใช้งานได้เหมือนกันครับ โดยจะมีความแตกต่างกันคือ แบบที่ 1 นั้น จะเป็นการนำเอารูปแบบของ Font ที่ได้อ้างอิงเอาไว้มาแสดงผลบนเอกสารโดยตรง ต่างจากแบบที่ 2 จะเป็นการนำเอา Font ที่ได้ประกาศเอาไว้แบบตัวอักษรปกติมาแปลงผ่านตัว Itextsharp ให้กลายเป็นตัวหนา อีกทีโดยผ่านทาง property Font.BOLD ครับ แล้วหลายๆท่านคงสงสัยว่าทั้ง 2 แบบมีข้อดีข้อเสียอย่างไร ในแบบที่ 1 การแสดงผลของ font จะถูกต้อง สวยงามตามต้นฉบับ font ที่เราได้ทำการอ้างอิงไว้ครับ แต่ข้อเสียคือ ถ้าเราต้องการสร้าง Font ต้นแบบไว้ในหลายลักษณะ เราก็ต้องอ้างอิงตัวรูปแบบ Font ที่เราต้องการทั้งหมดไปด้วย ส่วนแบบที่ 2 นั้น เราสามารถใช้ Font อ้างอิงเพียงอันเดียว แล้วสร้างรูปแบบ Font ตามที่เราต้องการได้ไม่จำกัด แต่การแสดงผลอาจไม่สวยงามเท่ากับแบบที่ 1 แล้วถ้าเราต้องการที่จะใส่สีให้กับ font ของเราละ จะสามารถทำได้หรือไม่ คำตอบคือ ทำได้ครับ โดยใน Function Font นั้น ถูกออกแบบมาให้เราสามารถทำรูปแบบของ font ได้หลากหลายรูปแบบครับ มาดูตัวอย่างกัน BaseFont bf = BaseFont.CreateFont(@”C:\WINDOWS\Fonts\THSarabun.TTF”, BaseFont.IDENTITY_H, BaseFont.NOT_EMBEDDED, true); Font fnt = new Font(bf, 12,Font.BOLD,BaseColor.red); Font fnt = new Font(bf, 16,Font.Italic,BaseColor.green); Font fnt = new Font(bf, 12,Font.BOLD | Font.Italic); Font fnt

การกำหนดรูปแบบเอกสารด้วย reStructuredText

January 14, 2017 15:26

การสร้างเอกสารด้วย reStructuredText syntax ทำให้เอกสารที่พัฒนาง่ายในการอ่าน จัดรูปแบบได้ตามที่เห็น รูปแบบของ markup เป็น plaintext ซึ่งจะใช้ parser ในการแปลงให้อยู่ในรูปแบบเอกสารที่ต้องการเช่น html หรือ pdf เป็นต้น การกำหนดรูปแบบ (Text Formatting) 1. Paragraphs Paragraphs คือ block พื้นฐานของ reStructuredText ซึ่งแต่ละ paragraphs จะถูกแยกด้วย blank line 1 บรรทัด หรือมากกว่าหนึ่งก็ได้ ซึ่งย่อหน้ามีผลกับ reStructuredText ดังนั้นในการกำหนดบรรทัดใน paragraph เดียวกันจะต้องมี ย่อหน้าด้สนซ้ายเท่ากันในระดับเดียวกัน. 2. Inline markup และ special character เราสามารถใช้ตัวอักษรพิเศษในการกำหนดรูปแบบข้อความมีอยู่ด้วยกันหลายตัว ตัวอักษรพิเศษ * ถูกใช้ในการกำหนดรูปแบบตัวอักษรตัวหนา และ ตัวอักษรตัวเอียง ดังตัวอย่างด้านล่าง ตัวหนา **ภาษาไทย** จะแสดงผลคือ ภาษาไทย ตัวเอียง *ภาษาไทย* จะแสดงผลคือ ภาษาไทย ตัวอักษรพิเศษ backquote “ จะใช้ในการกำหนดตัวอย่าง code โดยการใช้งานดังนี้ “code sample“ แต่ถ้าต้องการใช้ * และ ` ในเอกสารด้วยซึ่งจะทำให้สับสนกับ inline markup ได้ ดังนั้นจึงใช้ backslash นำหน้าสำหรับ * และ ` ที่จะใช้แสดงผลของเอกสาร 3. Lists and Quote-like blocks การกำหนด list สามารถทำได้โดยการใช้ * นำหน้า * bulleted list * bulleted list * bulleted list สำหรับ numbered list ก็ให้ใช้ตัวเลขนำหน้า 1. numbered list 2. numbered list ถ้าต้องการ list ที่กำหนดเลขโดยอัตโนมัติให้ใช้ # นำหน้า #. numbered list #. numbered list การกำหนด list ซ้อนกันหลายๆชั้นสามารถทำได้ แต่ต้องแยกแต่ละ list ออกด้วย blank line *. bulleted list *. bulleted list *. bulleted list *. bulleted list *. bulleted list 4. Source code การกำหนด code block ทำได้โดยใช้ special marker :: ที่ตอนจบของ paragraph และจะต้องแยกจากส่วนอื่นด้วย blank line เช่นเดียวกับ paragraph ทั่วไป This is a normal text paragraph. The next paragraph is a code sample:: public class reStructuredTest { public reStructuredTest(){ } } 5. Table การสร้างตารางทำได้ในสองรูปแบบคือแบบ grid table และ simple table โดยการสร้างตารางแบบ grid table ทำได้ด้วยการวาดตารางด้วยตัวเอง +————————+————+———-+———-+ | Header row, column 1 | Header 2

ทดสอบเว็บบน Browser ทุกตัวง่ายนิดเดียว

January 13, 2017 15:14

ทดสอบเว็บผ่าน Browser หลังจากที่ได้มีการพัฒนาหรือสร้างเว็บขึ้นมาเรียบร้อยแล้วนั้น สิ่งแรกๆ ที่ต้องทำคือทดสอบเว็บของเราว่าสามารถที่จะแสดงผลผ่าน Browser ได้ดีหรือไม่ และแสดงผลได้ดีกับทุก Browser หรือไม่ เช่น Google Chrome , Firefox หรือจะเป็น Internet Explorer ซึ่ง Browser แต่ละตัวนั้นก็มีหลากหลายเวอร์ชันมาก และที่เราต้องพยายามทดสอบให้ได้มากที่สุดก็เพราะว่า เราไม่สามารถรู้ได้เลย ว่าลูกค้าหรือผู้ใช้เว็บของเรานั้นจะใช้เครื่องมือ หรือ Browser ตัวไหนเป็นหลัง ดังนั้นการทดสอบเว็บบน Browser ทุกตัวไม่ใช่เรื่องง่ายเลยจริงๆ ทำอย่างไรให้การทดสอบผ่าน Browser ทุกตัวเป็นเรื่องง่าย สำหรับครั้งนี้ผู้เขียนจะขอแนะนำเครื่องมือช่วยทดสอบการแสดงผลเว็บผ่าน Browser ทุกรุ่นทุกยี่ห้อ เพื่อให้เป็นเกร็ดความรู้เบื้องต้นเล็กๆ น้อยๆ เพื่อแก้ไขปัญหาการที่ต้องลงๆ ถอนๆ Browser ในเครื่องจนอาจจะปวดหัวเอาได้ หลักๆ จากที่ศึกษาค้นคว้าเบื้องต้นพบว่าปัจจุบันมี Cloud Browser เปิดให้บริการมากมาย เช่น Saucelab, BrowserStack, Browserling, Ghostlab หรือ CrossBrowserTesting เป็นต้น สำหรับวันนี้จะขอนำเสนอหน้าตาของ BrowserStack กันก่อนละกัน เราจะต้องสมัครสมาชิกกันก่อน โดยจะมีแบบ Free trial ให้เราทดลองใช้งาน สมัครเสร็จแล้วก็ Login เข้าไปทดลองใช้งานกันได้เลย หลังจากสมัครสมาชิกทดลองใช้ฟรีกันเรียบร้อยแล้ว ก็จะพบกับหน้าตาของเจ้า BrowserStack แบบนี้ เราสามารถเลือกได้เลยว่าจะทดสอบเว็บกับระบบปฏิบัติการไน และ Browser อะไร ตัวอย่างเช่นเลือก ระบบปฏิบัติการ Mac OS X Mavericks และ Browser Safari 7.1 ก็จะได้ตัวอย่างหน้าจอ แบบด้านล่าง ในหน้าจอที่เรากำลังทดสอบก็จะมี Tool เล็กๆ ให้เราสามารถจัดการหน้าจอได้ เช่นสามารถ Switch เพื่อเปลี่ยนเป็นระบบปฏิบัติการ หรือ Browser อื่นๆ สามารถปรับ Resolutions ของหน้าจอได้ สามารถ Create a bug สามารถสร้าง Issue Tracker สามารถตั้งค่าอื่นๆ หรือตรวจสอบ Features ของตัว BrowserStack ได้ เป็นต้น สุดท้ายแล้วสำหรับเพื่อนๆ หรือใครที่มีปัญหายุ่งยากในการทดสอบเว็บให้ครบทุก Browser ก็สามารถลองเอาเจ้าตัว BrowserStack ไปใช้งานกันดู เผื่อบางทีอาจจะช่วยระยะเวลา หรือปัญหาต่างๆ ได้บ้างไม่มากก็น้อย ^ ^ แหล่งความรู้อ้างอิง – http://soraya.in.th/2013/04/08/browserstack-ie/ – https://medium.com/tag/browserstack – https://chittakorn.com/do-you-know/browser-testing/ – http://www.designil.com/free-internet-explorer-mac.html

การวิเคราะห์ข้อมูล (What-if Analysis)

January 12, 2017 22:32

ในหัวข้อนี้เราจะมาพูดถึงการวิเคราะห์ข้อมูลโดยใช้ What-if ซึ่งเป็นเครื่องมือการวิเคราะห์ที่อยู่ใน Excel การวิเคราะห์ข้อมูลแบบ What-if เป็นการเอาสูตรหรือข้อมูลที่มีมาวิเคราะห์เพื่อหาทางเลือกจากสถานการณ์ต่างๆ โดยมีการวิเคราะห์ 3 แบบ คือ สถานการณ์สมมติ(Scenario), ตารางข้อมูล(Data Table) และการค้นหาค่าเป้าหมาย(Goal Seek) สถานการณ์สมมติและตารางข้อมูลจะรับชุดของค่าข้อมูลเข้า(Input) และประเมินล่วงหน้า เพื่อหาผลลัพธ์ที่เป็นไปได้ ส่วนการค้นหาค่าเป้าหมายต่างจากสถานการณ์สมมติและตารางข้อมูลตรงที่ นำผลลัพธ์มาประเมินย้อนกลับ เพื่อหาค่าข้อมูลเข้าที่เป็นไปได้ที่ทำให้เกิดผลลัพธ์นั้นๆ 1. การค้นหาค่าเป้าหมาย(Goal Seek) ปกติเวลาคำนวณเราจะคำนวณตามลำดับ เช่น ยอดขาย–ค่าใช้จ่าย = กำไร แต่ Goad Seek ใช้การระบุผลลัพธ์ที่ต้องการ(Output) แล้วคำนวณค่าข้อมูลเข้า(Input) เพื่อให้ได้ผลลัพธ์ตามที่เราต้องการ ตัวอย่าง1 การคำนวณเงินกู้ ปกติจะคำนวณจากเงินต้น ระยะเวลาที่กู้ และดอกเบี้ย และใส่สูตรด้วยฟังก์ชัน PMT (ดูภาพที่ 1) ซึ่งจะได้จำนวนเงินที่ต้องจ่ายในแต่ละเดือน (ดูภาพที่ 2) ภาพที่ 1 คำนวณอัตราผ่อนชำระต่องวด ภาพที่ 2 จำนวนเงินที่ต้องจ่ายในแต่ละเดือน เงื่อนไขที่ 1 : ถ้ามีต้องการผ่อนต่อเดือน 10,000 บาท ในระยะเวลา 10 ปี สามารถใช้ Goal Seek คำนวณให้ได้ว่า จะสามารถกู้เงินได้เท่าไหร่? ไปที่ Data > What-if Analysis > Goal Seek (ดูภาพที่ 3) ภาพที่ 3 เลือกคำสั่ง Goal Seek ในหน้าต่าง Goal Seek (ดูภาพที่ 4) : Set cell – cell ที่จะใช้ตั้งค่า โดยคลิกเลือก cell ที่เขียนสูตรเอาไว้ (ในตัวอย่างนี้คือ B5) To value – ระบุค่าเป้าหมายที่ต้องการ (ต้องการผ่อนเดือนละ 10,000) By changing cell – ระบุ cell ที่ต้องการให้เปลี่ยนแปลงค่าตามเป้าหมายที่กำหนดไว้ (จำนวนเงินที่กู้ได้) ภาพที่ 4 กำหนดค่าเป้าหมาย สรุป ถ้าต้องการผ่อนเดือนละ 10,000 เป็นระยะเวลา 10 ปี จะต้องกู้เงินจำนวน 949,363 บาท (ดูภาพที่ 5) ภาพที่ 5 คำตอบที่ได้ของเงื่อนไขที่ 1 เงื่อนไขที่ 2 : ถ้าต้องการกู้เงิน 1,000,000 บาท และผ่อนชำระเดือนละ 10,000 บาท จะต้องใช้เวลาเท่าไหร่? (ดูภาพที่ 6) ภาพที่ 6 กำหนดค่าเป้าหมาย สรุป ถ้าต้องการกู้เงิน 1,000,000 บาท และผ่อนชำระเดือนละ 10,000 บาท จะต้องใช้เวลาประมาณ 129 เดือน (ดูภาพที่ 7) ภาพที่ 7 ระยะเวลาผ่อนชำระ(เดือน) 2. สถานการณ์สมมติ(Scenario) ตัวอย่าง2 เปิดร้านขายเบเกอรี่มีเค้กขายอยู่ 12 ชนิด ในการวิเคราะห์กำไรจากการขาย (ดูภาพที่ 8) อาจแบ่งยอดขายได้หลายกรณี เช่น กรณีขายดี(Best Case), กรณีขายไม่ค่อยดี(Worst Case) และกรณีที่น่าจะเป็น(Most Likely) เป็นต้น

Pass special characters in JavaScript function

January 12, 2017 19:55

ในการพัฒนาโปรแกรมไม่ว่าจะพัฒนาด้วยภาษาใดก็ตาม ทุกภาษาจะมี special characters ซึ่ง special characters บางตัวอาจจะถูกระบุให้เป็นตัวแปร หรือ ใช้อักขระพิเศษเพื่อระบุอยู่ลำดับสุดท้ายของข้อความของบรรทัด เป็นต้น ซึ่งตรงส่วนนี้จะทำให้ประสบปัญหาในการนำ special characters ไปใช้งาน นั่นคือจะทำให้เกิด Error ทำให้โปรแกรมไม่สามารถทำงานต่อได้ ซึ่งJavaScript ก็เป็นอีกหนึ่งภาษาที่ประสบปัญหานี้ เช่น การส่ง parameter ผ่าน function ของ JavaScript โดยค่าของ parameter ที่ส่งไปเป็น special characters ทำให้เกิด Error และโปรแกรมไม่สามารถทำงานต่อได้ วันนี้จะขอแนะนำเทคนิคในการแก้ปัญหาดังกล่าว นั่นก็คือ การ Encoding และ Decoding ในที่นี้ผู้เขียนได้พัฒนาในรูปแบบ MVC โดยใช้ JavaScript ในการเรียก Controller จึงใช้วิธีการ Encoding กับ JavaScript และ ทางฝั่ง Controller จะใช้ C# จึงใช้ C# ในการ Decoding ค่ะ 1.วิธีการ Encoding in JavaScript ในการจะส่ง parameter ผ่านทาง function ของ JavaScript โดยข้อความนั้นมี special characters จำเป็นที่จะต้องมีการ Encoding ในที่นี้เราจะใช้ฟังก์ชัน Escape() ของ JavaScript ตัวอย่าง Encoding in JavaScript <script> function SaveData() { var txtDocTitle = $(‘#txtDocTitle’).val(); $(‘#pleaseWaitDialog’).modal(); $.ajax({ type: ‘POST’, contentType: ‘application/json; charset=utf-8’, url: “@Url.Action(“SaveDataToTable”, “I_EXPENSE”)”, data: “{‘budgetYear’:'” + valueYear + “‘ ,’docTitle’:'” + escape(txtDocTitle) + “‘}”, success: function (data) { }, error: function (data) { alert(data); } }); } </script> จากตัวอย่างกรณีป้อนข้อมูลที่มี special characters เช่น “I’m *&^$ special characters” เมื่อใช้ function escape(“I’m *&^$ special characters”) จะได้ผลลัพธ์ดังนี้ ผลลัพธ์จากการเรียกใช้ escape() I%u2019m%20*%26%5E%24%20special%20characters หลังจากที่มีการเรียกใช้ escape() จะทำให้สามารถส่ง parameter ที่มี special characters ไปได้โดยไม่พบ Error โปรแกรมสามารถทำงานได้ปกติ เป็นอันผ่านไปหนึ่งด่านในส่วนของการเรียกใช้งาน function ของ JavaScript แต่ทว่าการที่เราจะนำข้อความที่ผ่านการ Encoding มาใช้งานไม่ได้ เนื่องจากจะไม่ถูกต้องตามความต้องการของผู้ใช้งาน จากตัวอย่างข้างต้น ผู้ใช้งานป้อนข้อมูล “I’m *&^$ special characters” สิ่งที่โปรแกรมต้องทำการบันทึกก็ต้องเป็น “I’m *&^$ special characters” ไม่ใช่ “I%u2019m%20*%26%5E%24%20special%20characters” ดังนั้นจึงจำเป็นจะต้องมีการ Decoding เพื่อให้ได้ข้อมูลที่ถูกต้อง 2.Decoding in C# เมื่อมีการ Encoding เราจำเป็นที่จะต้อง Decoding เพื่อให้ได้ข้อมูลที่ถูกต้องตามที่ผู้ใช้งานได้ป้อนข้อมูล ตัวอย่าง Decoding in C# var docTitle = HttpUtility.UrlDecode(docTitle, System.Text.Encoding.Default); //ตรงส่วนนี้ตัวแปร docTitle