การพัฒนา Web Application – Page 4

วิธีการรวมไฟล์ pdf หลายไฟล์และรูปภาพมาแสดงในครั้งเดียวด้วย iTextSharp (#C)

May 23, 2021 03:00

ที่มาของบทความนี้ เนื่องด้วยงานที่ผู้เขียนได้รับมอบหมายให้พัฒนาอยู่นั้น มีส่วนหนึ่งที่เป็นการแนบไฟล์เอกสาร/หลักฐานทั้งในรูปแบบไฟล์ PDF และรูปภาพ เข้ามาจากผู้ใช้งาน ซึ่งเอกสารเหล่านี้จะต้องมีส่วนของการแสดงผลให้ทางฝั่งเจ้าหน้าที่ทำการตรวจสอบเอกสาร/หลักฐานดังกล่าวด้วย โดยเดิมทีจะมีการแสดงผลแยกเป็นรายการให้เจ้าหน้าที่เพื่อคลิกดูรายละเอียดทีละรายการ ดังภาพ ซึ่งในการทำงานจริงแล้วนั้นพบว่า การตรวจสอบเอกสาร/หลักฐานต่างๆที่ผู้ใช้แนบมาสามารถทำได้ยากและต้องใช้เวลา เนื่องจากเจ้าหน้าที่จะต้องทำการคลิกดูรายละเอียด/ดาวน์โหลดไฟล์คราวละ 1 ไฟล์เพื่อตรวจสอบ ซึ่งไฟล์จะแยกกันอยู่ หากต้องการดาวน์โหลดก็ต้องดาวน์โหลดทีละไฟล์ ดังภาพ จึงเป็นที่มาของการค้นหาวิธีการแสดงผลไฟล์ทั้งหมดให้เจ้าหน้าที่สามารถตรวจสอบและดูรายละเอียดข้อมูลเอกสารไฟล์แนบได้ในคราวเดียว ซึ่งผู้เขียนก็ได้นำวิธีการดังกล่าวมาแบ่งปันให้กับผู้อ่านที่มีความสนใจและประสบปัญหาคล้ายกันอยู่ ซึ่งจะมีวิธีการดังนี้ค่ะ 1.ดึงข้อมูลไฟล์แนบเอกสารทั้งหมดของผู้ใช้ หมายเหตุ ในการทำงานข้างต้น ควรมีการลบไฟล์(Temporary file)ที่ถูกสร้างไว้ก่อนหน้านี้ที่ไม่ใช้งานออกไปด้วย เนื่องจากการรวมไฟล์ด้วยวิธีนี้จะมีการสร้างไฟล์รวมตัวใหม่ขึ้นมาและนำไปแสดงผลให้ผู้ใช้ ซึ่งหลังจากผู้ใช้งานไม่ใช้งานแล้วหากเราไม่ทำการลบทิ้งจะเกิดเป็นไฟล์ขยะบนเซิร์ฟเวอร์จำนวนมากได้ โดยจากโค้ดข้างต้นจะพบว่า ไฟล์ที่จะใช้ในการรวบรวมจะต้องเป็นไฟล์ PDF ซึ่งในการทำงานจริงของเรา การแนบไฟล์เอกสาร/หลักฐานสามารถแนบได้ทั้งไฟล์ที่เป็น PDF และไฟล์ที่เป็นรูปภาพด้วย ดังนั้น ก่อนที่จะทำการรวมไฟล์ จึงต้องทำการตรวจสอบว่ามีไฟล์ดังกล่าวอยู่จริงหรือไม่ รวมทั้งตรวจสอบชนิดของไฟล์ด้วย หากพบว่าไฟล์ดังกล่าวไม่ได้อยู่ในรูปแบบ PDF ไฟล์ ให้ทำการแปลงไฟล์รูปภาพเหล่านั้นให้เป็น PDF เสียก่อน เพื่อป้องกันความผิดพลาดที่จะเกิดขึ้นในขณะทำการรวมไฟล์นั่นเอง 2. เขียนเมธอดในการรวมไฟล์ดังกล่าวและสร้างเป็นไฟล์ PDF ตัวใหม่ 3.เขียนเมธอดในแปลงไฟล์รูปภาพให้เป็นไฟล์ PDF 4.แสดงผลไฟล์ PDF ที่รวมเรียบร้อยแล้ว ด้วย Literal หมายเหตุ ในการใช้งานโค้ดข้างต้น มีไลบรารีที่จำเป็นต้องใช้งาน ดังนี้ค่ะ using System.IO;using iTextSharp.text;using iTextSharp.text.pdf;using System.Data;using System.Text;using System.Drawing; ผลลัพธ์ ตัวอย่างไฟล์ที่ได้จากการรวมไฟล์เอกสาร PDF 3 ไฟล์ และไฟล์รูปภาพ 1 ไฟล์ ซึ่งวิธีการนี้เป็นเพียงหนึ่งในแนวทางแก้ปัญหาในการแสดงผลไฟล์ PDF หลายๆไฟล์ในครั้งเดียวเท่านั้น และอาจมีข้อจำกัดหากผู้ใช้มีการแนบไฟล์จำนวนมาก เนื่องจากจะส่งผลให้ขนาดของไฟล์ที่รวมได้มีขนาดใหญ่มากตามไปด้วย ในส่วนของการแนบไฟล์จึงควรมีการจำกัดขนาดและรูปแบบให้เหมาะสมในการแนบไฟล์แต่ละครั้ง เพื่อประหยัดเนื้อที่ในการจัดเก็บไฟล์บนเซิร์ฟเวอร์ด้วย และผู้เขียนหวังเป็นอย่างยิ่งว่าบทความนี้จะช่วยแก้ปัญหาให้กับนักพัฒนาที่กำลังประสบปัญหาเดียวกันอยู่ไม่มากก็น้อยนะคะ ขอบคุณค่ะ ^^ แหล่งอ้างอิง https://stackoverflow.com/questions/6029142/merging-multiple-pdfs-using-itextsharp-in-c-net https://alandjackson.wordpress.com/2013/09/27/convert-an-image-to-a-pdf-in-c-using-itextsharp/

ซ่อน/แสดง คอลัมน์ใน ASP.NET GridView จาก Code Behind

May 19, 2021 15:58

จากบทความ ซ่อน/แสดง คอลัมน์ใน ASP.NET GridView ด้วย jQuery ท่านผู้อ่านที่ได้เข้าไปอ่านแล้วอาจจะมีคำถามว่าถ้าไม่อยากใช้ jQuery ล่ะ เนื่องด้วยสาเหตุอะไรก็แล้วแต่ วันนี้ผมก็จะมานำเสนอการซ่อน/แสดงคอลัมน์ใน ASP.NET GridView อีกวิธี ซึ่งจะเป็นการควบคุมจาก code behind ที่เป็นภาษา C# หรือ VB.NET ในที่นี่ผู้เขียนจะใช้ภาษา C# ซึ่งจะมีขั้นตอนต่างๆ ดังต่อไปนี้ 1. ตัวอย่างโค้ด HTML จะมีการแก้ไขเพิ่มขึ้นอีกเล็กน้อยจากบทความเดิม โดยสิ่งที่เพิ่มขึ้นมาจะอยู่ที่ CheckBox คือ AutoPostBack=”true” เพื่อให้มีการ PostBack ทุกครั้งที่มีการคลิก Checkbox OnCheckedChanged=”chkCallNo_CheckedChanged” คือ event ที่อยู่ใน code behind ที่จะถูกเรียกใช้เมื่อมีการคลิก 2. โค้ดในส่วนของการจำลองข้อมูล สามารถใช้โค้ดเดิมจากบทความเก่าได้เลย 3. เพิ่มโค้ดใน chkCallNo_CheckedChanged เพื่อควบคุมการซ่อน/แสดงคอลัมน์ที่ต้องการ โดย gvBib.Columns[3].Visible จะเป็นการกำหนดให้คอลัมน์ที่ 3 ของ Gridview แสดงผลหรือไม่ ซึ่งก็คือคอลัมน์ CallNo นั่นเอง (จะเริ่มนับตั้งแต่ 0) 4. ทดสอบการใช้งาน 5. จะเห็นว่าระบบสามารถทำงานได้ตามความต้องการ คอลัมน์จะซ่อน/แสดงได้ตามเงื่อนไขที่เราเลือกจาก checkbox แต่จะสังเกตเห็นว่า ทุกครั้งที่มีการเลือก checkbox ระบบจะ refresh หน้าจอใหม่ทุกครั้ง ซึ่งถ้าในหน้าจอที่เรากำลังทำงานมีข้อมูลอื่นๆ อีกหลายอย่าง ก็จะถูกโหลดซ้ำโดยไม่จำเป็น เพื่อแก้ไขปัญหานี้ ASP.NET จะมีเครื่องมือที่เรียกว่า UpdatePanel ซึ่งจะทำงานในแบบ Partial Load ได้ตามตามเงื่อนไขที่เรากำหนด โดยเราจะต้องปรับแก้โค้ด HTML เพิ่มเติมดังนี้ สิ่งที่เพิ่มเติมเข้ามาคือ ScriptManager สำหรับใช้ควบคุมการทำงาน UpdatePanel UpdatePanel ใช้ครอบ component หรือพื้นที่ที่เราต้องให้สามารถทำ Partial Load ได้ ในที่นี่คือเราครอบ Gridview นั่นเอง Triggers จะเป็นการกำหนดเพื่อให้เกิด Partial Load ตาม control และ event ที่ได้ระบุเอาไว้ ในที่นี้คือ จะโหลดเมื่อ chkCallNo เกิด event CheckdChanged ซึ่งก็คือเหตุการณ์คลิกนั่นเอง ทดสอบ run ก็จะได้ผลลัพธ์ดังรูปด้านล่าง จะเห็นว่าหลังจากมีการปรับแก้โค้ดไปแล้ว ทุกครั้งที่มีการคลิก CheckBox และมีการซ่อน/แสดงคอลัมน์ จะไม่มีการ refresh หน้าจออีกแล้ว เพราะ UpdatePanel ที่เราได้เพิ่มเข้าไปจะควบคุมให้มีการโหลดข้อมูลใหม่เฉพาะ component ที่อยู่ภายใน UpdatePanel เท่านั้น จากบทความนี้ก็จะเป็นวิธีการซ่อน/แสดงคอลัมน์ใน Gridview อีกทางเลือกหนึ่ง ที่ผู้อ่านสามารถนำไปประยุกต์ใช้กับงานของตัวเองได้ ในกรณีที่เราไม่อยากเพิ่ม jQuery เข้ามาในโครงการที่กำลังทำ หรือเห็นว่าไม่ถนัดในการใช้งาน jQuery ก็ตามแต่ ซึ่งผู้อ่านสามารถเลือกแนวทางได้เองตามอัธยาศัย สวัสดีครับ แหล่งข้อมูลอ้างอิง https://www.aspsnippets.com/Articles/Show-Hide-ASPNet-GridView-Columns-on-CheckBox-Checked-Unchecked-using-jQuery.aspx http://theheing.blogspot.com/2012/04/ajax-updatepanel-control.html

ซ่อน/แสดง คอลัมน์ใน ASP.NET GridView ด้วย jQuery

May 19, 2021 12:56

การแสดงผลข้อมูลใน Gridviews ในบางสถานการณ์เราต้องการซ่อนข้อมูลบางคอลัมน์ออกไปก่อนตามเงื่อนไขใดๆ และเมื่อเงื่อนไขเปลี่ยนเราก็จะแสดงข้อมูลในคอลัมน์ที่ถูกซ่อนนั้นออกมา ในบทความนี้ผู้เขียนจะแสดงตัวอย่างการ ซ่อน/แสดง คอลัมน์ใน ASP.NET GridView ด้วยชุดคำสั่ง jQuery โดยมีขั้นตอนดังต่อไปนี้ 1. เพิ่มโค้ด HTML ดังตัวอย่างด้างล่าง ซึ่งเป็นโค้ดที่แสดง Checkbox เพื่อใช้เลือกแสดงคอลัมน์ CallNo และ ASP.NET GridView ที่มีข้อมูล 5 คอลัมน์ 2. เพิ่มโค้ดใน event Page_Load ในหน้า code behind เพื่อจำลองข้อมูลที่จะใช้แสดงใน GridView เนื่องจากโค้ดตัวอย่างมีการใช้งาน class DataTable และ DataColumn ซึ่งอยู่ใน namespace System.Data เพราะฉะนั้นจะต้อง Import namespace นี้ด้วย 3. เพิ่มโค้ด jQuery เพื่อควบคุมการแสดง/ซ่อน คอลัมน์ เมื่อมีการคลิก เลือก/ยกเลิก เช็คบ๊อก (โดยในบทความนี้ผู้เขียนขออนุญาตข้ามขั้นตอนการติดตั้ง jQuery ออกไป) ทดสอบ run ก็จะได้ผลลัพธ์ดังรูปด้านล่าง และเมื่อคลิกเช็คบ๊อก Show CallNo ออก คอลัมน์ CallNo ใน Gridview ก็จะหายไป จากตัวอย่างโค้ดในบทความนี้ จะเห็นว่าการซ่อนหรือแสดงคอลัมน์ด้วย jQuery ไม่ได้มีความยุ่งยาก สามารถนำไปประยุกต์ใช้กับงานของท่านได้ ซึ่งผู้เขียนหวังเป็นอย่างยิ่งว่าบทความนี้น่าจะมีประโยชน์กับท่านผู้อ่านไม่มากก็น้อย สวัสดีครับ แหล่งข้อมูลอ้างอิง https://www.aspsnippets.com/Articles/Show-Hide-ASPNet-GridView-Columns-on-CheckBox-Checked-Unchecked-using-jQuery.aspx

Bootstrap Modal Full Screen

May 17, 2021 16:34

หลายๆ ท่านที่เคยใช้งาน Bootstrap เป็น Frontend Framework น่าจะเคยใช้ modal กันมาบ้าง ซึ่ง modal เป็นจาวาสคลิปต์ปลั๊กอิน มีไว้สำหรับการแสดงผลข้อมูล ทั้งรูปภาพ ข้อความ หรือแบบฟอร์มรับข้อมูล ( html input form ) ในลักษณะป๊อปอัพ ซึ่ง modal ของ bootstrap สามารถแสดงผลได้หลายขนาด ทั้งแบบปกติ แบบเล็ก และแบบใหญ่ ขึ้นอยู่กับ class ที่เราสามารถระบุเพิ่มเข้าไปว่าต้องการให้แสดงผลเป็นแบบไหน ตัวอย่างโค้ด modal dialog และปุ่มสำหรับเปิด modal จะได้ผลลัพธ์ดังรูป ถ้าต้องการให้ modal แสดงผลใหญ่ขึ้นหรือเล็กลง ให้ระบุ modal-lg modal-sm หลัง modal-dialog ดังตัวอย่าง ถ้าเราต้องการให้ modal สามารถแสดงผลแบบเต็มจอ (full screen) จะไม่สามารถทำได้ (อ้างอิงจากเวอร์ชัน 3.3 ที่ผู้เขียนใช้งาน แต่จากการตรวจสอบล่าสุดพบว่าเวอร์ชัน 5.0 สามารถทำได้แล้ว) แต่เราจะใช้ความรู้ในเรื่อง css มาปรับแต่งเพิ่มเติมเพื่อให้สามารถแสดงผลได้ตามความต้องการ โดยเราจะต้องเพิ่ม css class ที่ระบุคุณสมบัติที่จำเป็น ดังตัวอย่าง ระบุ class fullscreen ไว้ด้านหลัง modal-dialog modal จะได้แสดงผลเต็มจอดังรูป และเพื่อให้การแสดงผล modal มีความยืดหยุ่นและมีการทำงานใกล้เคียงกับ dialog ของ Windows ทั่วไป คือสามารถขยายให้เป็น full screen และย่อให้กลับมาขนาดเท่าเดิม โดยสิ่งที่เราต้องทำเพิ่มคือ เพิ่มปุ่ม fullscreen เมื่อ modal แสดงผลอยู่ในสภาพปกติ เมื่อคลิกปุ่ม fullscreen จะเปลี่ยนการแสดงผล modal ให้เป็นแบบ fullscreen ซ่อนปุ่ม fullscreen และแสดงผลปุ่ม restore แทน เพิ่มปุ่ม restore เมื่อ modal แสดงผลในรูปแบบ fullscreen เมื่อคลิกปุ่ม restore จะเปลี่ยนการแสดงผล modal กลับไปเป็นสภาพปกติ ซ่อนปุ่ม restore และแสดงผลปุ่ม fullscreen แทน โดยมีขั้นตอนดังต่อไปนี้ 1. เพิ่มปุ่ม fullscreen และปุ่ม restore ใน div class=”modal header” จะเห็นว่าปุ่มที่เพิ่มขึ้นมาจะมีการระบุชื่อ class “restore-dialog” และ “fullscreen-dialog” ซึ่งจะใช้ในการอ้างถึงในโค้ด jQuery ที่ใช้ควบคุมการทำงานเมื่อมีการคลิกปุ่มนั้นๆ 2. เนื่องจากผู้เขียนใช้ icon ที่อยู่ใน font awesome ดังนั้นจะต้องเพิ่ม link style sheet เพื่ออ้างไปถึงไฟล์ css ของ font awesome ภายนอกไซต์ที่กำลังพัฒนา (CDN) โดยไปเพิ่มไว้ใน tag <head></head> 3. เพิ่มชุดคำสั่ง jQuery 4. ทดสอบ ก็จะได้ผลลัพธ์ดังภาพ จะเห็นว่ามีปุ่ม fullscreen แสดงอยู่ เมื่อกด modal จะแสดงผลเป็น fullscreen ดังภาพ และเมื่อกดปุ่ม restore หน้าจอ modal ก็จะแสดงผลกลับไปเป็นเหมือนเดิม หวังว่าบทความนี้จะเป็นประโยชน์ไม่มากก็น้อย น่าจะพอเป็นแนวทางให้ผู้อ่านนำไปประยุกต์ใช้กับงานของตัวเองนะครับ สวัสดีครับ แหล่งข้อมูลอ้างอิง https://www.jquery-az.com/minimize-maximize-modal-of-bootstrap-by-using-jquery-3-demos/ https://getbootstrap.com/docs/3.3/javascript/#modals

จะทำอย่างไรให้สามารถดึงข้อมูลมาแสดงผลด้วย Progress bar โดยใช้ .Net (C#)

May 17, 2021 12:55

จากบทความก่อนหน้านี้ ผู้เขียนได้แนะนำเกี่ยวกับ Progress bar และวิธีการใช้งานเบื้องต้นกันไปแล้ว ซึ่งใครที่ยังไม่ได้อ่าน สามารถอ่านเพิ่มเติมได้ ที่นี่ มาถึงในบทความนี้ ผู้เขียนจึงขอนำความรู้ดังกล่าวมาต่อยอดประยุกต์ใช้กับการทำงานจริงที่มีการดึงข้อมูลตอน Runtime มาแสดงผลด้วย Progress bar โดยผู้เขียนจะไม่ขอลงรายละเอียดในส่วนของการสร้างสไตล์ชีทและการกำหนดค่าต่างๆแล้ว แต่จะเน้นในส่วนของการดึงข้อมูลมาแสดงแทน โดยผู้เขียนจะพยายามยกตัวอย่างให้เห็นหลายแนว เพื่อให้ผู้อ่านเห็นภาพในการนำไปใช้มากขึ้น ซึ่งแต่ละแบบจะต้องทำอย่างไรบ้าง มาดูกันเลยค่ะ แบบแถบละสี ดึงข้อมูลจากฐานข้อมูล และจัดเตรียม Tag Html ที่จะใช้ในการแสดงผล 2. เมธอดในการแปลงค่าสไตล์ชีทเพื่อปรับสีตามจำนวนที่ส่งมาเป็นพารามิเตอร์ จากโค้ดข้างต้นจะเป็นการกำหนดสไตล์ชีทที่จะใช้ ซึ่งจะขึ้นอยู่กับจำนวนค่า % ที่ส่งมาเป็นพารามิเตอร์ โดยจะแบ่งออกเป็น 4 ช่วง สีแดง ช่วงตั้งแต่ 0 – 25 % สีส้ม ช่วงตั้งแต่ 26 – 50 % สีฟ้า ช่วงตั้งแต่ 51 – 75 % สีเขียว ช่วงตั้งแต่ 76 – 100 % ตัวอย่างการเรียกใช้งาน ผลลัพธ์ แบบหลายสีในแถบเดียวกัน(แบบที่ 1) โดยในตัวอย่างนี้ จะเป็นการแสดงข้อมูลจำนวนผลไม้เป็น % รวมในแถบ Progress bar เดียวกัน ซึ่งจะแยกตามสี และมีบอกจำนวนรวมถึงชื่อผลไม้ให้ทราบ อีกทั้งยังแสดงจำนวนรวมของผลไม้ทุกชนิดด้วย โดยมีวิธีการทำ ดังนี้ค่ะ ดึงข้อมูลจากฐานข้อมูล และจัดเตรียม Tag Html ที่จะใช้ในการแสดงผล จากโค้ดตัวอย่างข้างต้น จะเห็นว่าการสร้างแท็ก Html จะแตกต่างจากแบบแรก คือจะมีการสร้างใน <div class=\”progress\”> เดียวกัน ซึ่งมีหลักการคล้ายกับการสร้าง Progress bar อย่างง่ายหลายสีในแถบเดียวกันที่เคยกล่าวไว้แล้วในบทความก่อนหน้านั่นเอง ผลลัพธ์ แบบหลายสีในแถบเดียวกันและแสดงหลายแถบ Progress Bar(แบบที่ 2) ในตัวอย่างนี้ เป็นการแสดงผลแถบสีแยกตามช่วงของข้อมูลบน Progress bar แต่ละแถบ โดยการแสดงผลจะแบ่งสีตามปริมาณข้อมูลในแต่ละช่วง ดังนี้ สีแดง ช่วงตั้งแต่ 0 – 25 % สีส้ม ช่วงตั้งแต่ 26 – 50 % สีฟ้า ช่วงตั้งแต่ 51 – 75 % สีเขียว ช่วงตั้งแต่ 76 – 100 % หากข้อมูลที่ต้องการแสดงผลตกอยู่ในช่วงใดก็จะมีการแสดงแถบสีนั้นขึ้นมาให้เห็นตามลำดับ โดยมีวิธีการทำต่อไปนี้ค่ะ ดึงข้อมูลจากฐานข้อมูล และจัดเตรียม Tag Html ที่จะใช้ในการแสดงผล 2. สร้างเมธอดที่ใช้ในการสร้างแท็ก Html ในการแสดงผลแถบสี ซึ่งในส่วนของกระบวนการคำนวณแถบสีจะไม่ขอลงในรายละเอียด แต่แสดงไว้ให้เห็นภาพการทำงานหลักๆเท่านั้น ดังนี้ค่ะ ผลลัพธ์ หมายเหตุ : จากตัวอย่างข้างต้น เป็นเพียงการยกตัวอย่างเพื่อให้ผู้อ่านเข้าใจการประยุกต์ใช้งาน และการทำงานร่วมกับ Progress bar เพิ่มมากขึ้นเท่านั้น ซึ่งผู้อ่านสามารถดัดแปลง และมีวิธีการรวมถึงเทคนิคที่แตกต่างออกไปที่จะนำมาใช้ในการพัฒนาเพื่อแสดงผลข้อมูล ขึ้นกับอัลกอริธึมของแต่ละท่าน จากบทความนี้จะเห็นได้ว่า วิธีการดึงข้อมูลมาแสดงผลด้วย Progress bar แบบนี้ จะมีความยืดหยุ่นกว่าแบบที่มีการกำหนดค่าตายตัวในบทความก่อนหน้า อีกทั้งยังสามารถแสดงจำนวนแถบ Progress bar และสีได้ไม่จำกัด ขึ้นอยู่กับข้อมูล การกำหนดเงื่อนไขในการแสดงผล และความต้องการของผู้พัฒนาที่จะดึงข้อมูลมาแสดงผลนั่นเอง และผู้เขียนหวังเป็นอย่างยิ่งว่า บทความนี้ จะพอเป็นแนวทางในการนำไปใช้งานจริงให้กับทุกท่านได้นะคะ ขอบคุณค่ะ ^^ แหล่งข้อมูลอ้างอิง : https://bestjquery.com/tutorial/progress-bar/demo78/ https://www.jquery-az.com/boots/demo.php?ex=51.0_5