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

July 15, 2017 01:36

ในการออกแบบเว็บฟอร์มบันทึกข้อมูลลงฐานข้อมูลนั้น นักพัฒนาเว็บแอ๊พปลิเคชั่นส่วนใหญ่จะออกแบบเป็นลำดับขั้นตอนการทำงานประมาณนี้ ผู้ใช้เปิดเว็บฟอร์มขึ้นมาด้วยเว็บบราวเซอร์ ผู้ใช้กรอกข้อมูลลงในเว็บฟอร์ม ผู้ใช้กดปุ่มบันทึกข้อมูล ระบบตรวจสอบ (Validate) ข้อมูลที่ผู้ใช้กรอกเข้ามา ถ้าผ่านก็บันทึกข้อมูลลงฐานข้อมูล ถ้าไม่ผ่านก็จะแจ้งข้อความแจ้งเตือนผู้ใช้งานให้ตรวจสอบข้อมูลใหม่อีกครั้ง ระบบจะแจ้งผลการบันทึกข้อมูลว่า “บันทึกข้อมูลสำเร็จ” กรณีที่บันทึกสำเร็จ หรือ “เกิดข้อผิดพลาดในการบันทึกข้อมูล” ในกรณีที่มีข้อผิดพลาด การพัฒนาเว็บด้วย 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 ไปใช้ในการแสดงข้อความแจ้งผู้ใช้หลังการบันทึกข้อมูลลงฐานข้อมูลได้แล้ว โดยมีตัวอย่างดังรูปที่ 2 ผลลัพธ์ที่ได้จากโค้ดข้างต้นจะเป็นดังรูปที่ 3 แน่นอนว่าในการพัฒนาเว็บแอ๊พปลิเคชัน 1 ครั้ง จะประกอบด้วยฟอร์มบันทึกข้อมูลมากมาย ทำให้ต้องเขียนโค้ดซ้ำๆ กันหลายครั้ง จากโค้ดข้างต้นเราสามารถ Optimize โค้ดได้อีกโดยให้สามารถเรียกใช้งานและแก้ไขโค้ดในภายหลังได้ง่ายขึ้น โดยการย้ายส่วนลงทะเบียนสคริปต์ไปไว้ในฟังก์ชั่นกลางสร้างเป็น Library (ในที่นี้จะตั้งชื่อว่า CoreBLL) สำเร็จรูปไว้ใช้ต่อไปดังนี้ หลังจากที่สร้าง CoreBLL เสร็จแล้วให้แก้ไขโค้ดบันทึกข้อมูลดังรูปที่ 5 จะเห็นว่า CoreBLL ทำให้โค้ดในการบันทึกข้อมูลฟอร์มสั้นลง ง่ายขึ้น และช่วยลดความผิดพลาดในการเขียนโค้ดลง ในขณะที่หน้าจอผลลัพธ์ (รูปที่ 3) ยังคงเหมือนเดิม  

Read More »

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

July 15, 2017 00:18

เชื่อว่านักพัฒนาเว็บแอปพลิเคชันทุกคนต้องเคยได้ใช้งาน JavaScript กันเพื่อทำให้เว็บแอปพลิเคชันสามารถทำงานได้ตามความต้องการ  ตัวอย่างตัวที่ใช้กันบ่อยๆ น่าจะเป็น 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 วิธีการติดตั้ง เข้าไปที่เว็บไซต์ http://bootboxjs.com และเลือกดาวน์โหลดไฟล์ชื่อ bootbox.min.js หรือถ้าไม่ต้องการดาวน์โหลดก็สามารถใช้ CDN (https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js) ได้เช่นกัน ใส่โค้ดอ้างอิงไปยัง 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 กำหนดชื่อ CSS class ให้กับปุ่มลบ ในที่ตั้งชื่อว่า “confirm” แทรกโค้ด JavaScript ใน HTML ดังนี้ ลองเปิดเว็บด้วย Google Chrome และ Mozilla Firefox ก็จะได้ผลลัพธ์เหมือนกันดังรูป นอกจาก Confirm Dialog แล้ว ท่านสามารถดูตัวอย่าง Dialog แบบอื่นๆ ได้จากที่นี่ เพียงเท่านี้ก็จะสามารถสร้าง Dialog สวยๆ และมีความยืดหยุ่นไว้ใช้งานได้แล้ว  

Read More »

ติดตั้ง Microsoft Office 2010 บน Linux Mint 18.2

July 14, 2017 23:01

     สวัสดีวันค่ะ… บล็อคนี้เราก็ยังคงอยู่กับ Linux Mint “Sonya” ที่มาพร้อมกับ Applicationพื้นฐานติดตั้งมาด้วย สำหรับคนที่ยังไม่คุ้นเคยกับ Linux ก็จะมีคำถามว่าแล้วโปรแกรมนี้ที่เคยใช้ในฝั่ง Windows มันมีให้ใช้ใน Linux มั้ย อย่างเช่น Microsoft Office อันนี้ Linux ก็มี LibreOffice ให้ใช้แทน และ LibreOffice Writer สามารถ Save เป็น นามสกุล .doc, .docx มาเปิดบน Windows ได้ แต่ Fonts อาจจะเพี้ยนๆหน่อยตอนเอามาเปิดบน Windows ก็มีทางเลือกให้เราติดตั้ง Fonts ที่ต้องการลงไป ดังภาพที่ 1     ภาพที่1 ติดตั้ง Font บน Linux หรือไม่แน่ใจว่า Office ตัวอื่นจะประสบปัญหาอะไรไหมตอนเอาไปเปิดกับ Windows อยากได้โปรแกรมของ Microsoft Office ทั้งหมดเอาไปใช้เลย!! ก็ทำได้ ก่อนอื่นก็ต้องลง PlayOnLinux ซึ่งเป็นโปรแกรมที่ช่วยให้สามารถใช้โปรแกรม Windows บน Linuxได้ โดยทำตามขั้นตอนดังนี้ค่ะ Step1: ไปที่ Software Manager > Search Palyon… > Install > รอวนไปค่ะ ช้าเร็วขึ้นกับเน็ตด้วย ตามภาพที่ 2 ภาพที่2 Install PlayOnLinux Step2: เปิดโปรแกรม PlayOnLinux ดังภาพที่ 3 ภาพที่3 Open PlayOnLinux เมื่อรัน PlayOnLinux ขึ้นมา ให้กด Install ดังภาพที่ 4 ภาพที่4 หน้าจอ PlayOnLinux  เลือกเมนู Office และเลือก Microsoft Office Version ที่ต้องการติดตั้ง ตามภาพที่ 5 ภาพที่5 List Program in Office Category จากนั้นก็ Next Step ไปค่ะ ตามภาพที่ 6 ภาพที่6 Installation Wizard ระหว่างทางนั้น ในเมื่อชีวิตเราไม่ได้โรยด้วยกลีบกุหลาบ Error ตามภาพที่ 7 ก็มา  ตั้งสติแล้วก็ไปลง winbind ซะ!!! ภาพที่7 Fatal Error กลับมาลง Office กันอีกที Again & Again(ไปฟังเพลงปลอบใจพลางนะ) ถ้าคุณได้ไปต่อมันก็จะขึ้นให้ Browse ไปยังที่เก็บไฟล์ .exe ตามภาพที่ 8 กด Open ไปอีกหน้าจอ แล้วกด Next รอจนติดตั้งเสร็จ ภาพที่8 Setup File ในที่สุดก็ติดตั้งเสร็จ จะแสดงผลลัพธ์ดังภาพที่ 9  ซึ่ง Shortcut ถูกสร้างไว้บน Desktop สามารถเรียกใช้ได้เลย ตามภาพที่ 10 ภาพที่9 Installed Program ภาพที่10 Office Shortcut on Desktop

Read More »

การเติมข้อมูล PDF Fill Form ผ่านโปรแกรมด้วย iTextSharp

July 14, 2017 21:57

เนื่องจากในช่วงที่ผ่านมาผมได้เข้าร่วมในโครงการที่ต้องพัฒนาโปรแกรมที่มีการกรอกข้อมูลลงฟอร์ม และต้องการให้พิมพ์ข้อมูลต่างๆเป็น PDF จึงได้มีโอกาสศึกษาการใช้ PDF Fill Form และ iText Sharp Library เพื่อนำมาใช้ในการพัฒนา ผมจึงคิดว่าน่าจะเอาสิ่งที่ได้ศึกษามาเล่าสู่กันฟัง เผื่อมีท่านใดสนใจจะนำไปใช้ครับ เริ่มต้นทำสร้าง PDF Fill Form โดยทั่วไปเราจะใช้งาน Pdf File เพื่ออ่านกันเป็นส่วนใหญ่ แต่จริงๆแล้ว PDF นั้นสามารถจะสร้าง form สำหรับใช้กรอกข้อมูลลงบนตัวเอกสารได้ด้วยครับ โดยมีวิธีการดังนี้ 1.นำเอกสารแบบฟอร์ม ซึ่งเป็นไฟล์ word มาทำการสั่ง export  เป็นไฟล์ PDF หรือถ้ามีไฟล์ PDF ที่เป็นแบบฟอร์มอยู่แล้วก็สามารถนำมาใช้ได้เลย โดยทำตามภาพนะครับ 2.นำไฟล์ PDF ที่ได้มา เปิดด้วยโปรแกรม Adobe Acrobat Pro 3.คลิก Tools เพื่อทำการ edit โดยโปรแกรมจะถามว่าต้องการให้โปรแกรมสร้าง field อัตโนมัติให้หรือไม่ ถ้าตอบตกลงโปรแกรมจะสร้าง field ข้อมูลให้ในพื้นที่เอกสารที่คาดว่าจะเป็นช่องว่างสำหรับกรอกข้อมูลให้ 4.ทำการแก้ไขชื่อ field ข้อมูลให้เป็นชื่อที่เราต้องการ โดยคลิกเมาส์ขวาที่กล่อง field และเลือกเมนู property จะมี Popup ให้แก้ไขรายละเอียดต่างๆของ field 5.หากต้องการเพิ่ม field ใหม่ เราสามารถเพิ่ม รูปแบบ field หลายแบบ เช่น – Text Box เป็น Field ที่ใช้เก็บข้อความต่างๆ – Check Box เป็น Field ที่ใช้เก็บค่าในการเลือกข้อมูลในฟอร์มแบบช่องสี่เหลี่ยม – Radio Box เป็น Field ที่ใช้เก็บค่าในการเลือกข้อมูลในฟอร์มเช่นกัน แต่จะแตกต่างกับ Check Box ที่เป็นวงกลม และจะเลือกค่าได้เพียงค่าเดียวในกลุ่มข้อมูลชุดเดียวกัน เช่น การกรอกข้อมูลเพศ ที่จะเลือกได้เพียงแค่เพศเดียว 6.เมื่อสร้าง field จนครบถ้วนก็ทำการบันทึกไฟล์ คลิกเลือกไปที่เมนู File -> Save เพียงเท่านี้ก็จะได้ไฟล์ PDF ที่เป็นแบบฟอร์มส่งไปให้ผู้ใช้กรอกข้อมูล และบันทึกส่งเป็นไฟล์ PDF กลับมา   ตัวอย่างการใช้ iText Sharp บน C# เติมค่าลงใน PDF Fill Form เพียงเท่านี้เราก็สามารถจะสามารถส่งข้อมูลจากโปรแกรมของเราไปกรอกในไฟล์ PDF ที่เราได้สร้างเป็น template ได้ พร้อมให้ user นำข้อมูลไปใช้ได้ทันทีครับ อ้างอิงข้อมูล http://techvalleyprojects.blogspot.com/2011/08/fill-pdf-forms-in-c-with-itextsharp.html

Read More »

การเรียกดูรายการ object ในฐานข้อมูล Oracle

July 14, 2017 14:19

คำสั่งที่ใช้ในการเรียกดู รายการ object ในฐานข้อมูล Oracle การเรียกดูรายการ object ทั้งหมดในฐานข้อมูล Oracle (เช่น table, view ฯลฯ)  สามารถเรียกดูได้จาก view ที่ชื่อว่า ALL_OBJECTS  ตัวอย่างคำสั่งคือที่ใช้เรียกดูคือ   SELECT * FROM ALL_OBJECTS;   โดยคำสั่งนี้จะแสดงรายการ object ทั้งหมดที่มี   แต่ในการใช้งานส่วนใหญ่ อาจจะต้องการเจาะจงดูแค่บางเงื่อนไข เช่น ต้องการดูรายการ table ทั้งหมด โดยเจาะจงแค่ schema ใด schema  หนึ่งเท่านั้น  ซึ่งสามารถใช้เงื่อนไขจากฟีลด์ต่อไปนี้ คือ OBJECT_TYPE เป็นการเรียกดูตามเงื่อนไขของประเภท object เช่น หากต้องการดูเฉพาะ table จะใช้เงื่อนไขเป็น  WHERE OBJECT_TYPE = ‘TABLE’ OWNER เป็นการเรียกดูเฉพาะเจาะจง schema ใด schema  หนึ่ง เช่น ต้องการเรียกดูข้อมูลจาก schema ชื่อ SCOTT จะใช้เงื่อนไขเป็น WHERE OWNER = ‘SCOTT’ ตัวอย่างคำสั่งเต็ม ๆ กรณีที่ต้องการเรียกดูเฉพาะ table ทั้งหมดที่อยู่ใน schema ที่ชื่อ SCOTT SELECT * FROM ALL_OBJECTS WHERE OBJECT_TYPE=’TABLE’ AND OWNER=’SCOTT’;   ตัวอย่างการนำไปใช้ประโยชน์ เพื่อให้เห็นภาพการนำไปใช้งานจริง จึงขอยกตัวอย่างที่เคยใช้งาน คือ การสร้างสคริปต์คำสั่ง sql ที่อ้างอิงชื่อ table ที่อยู่ใน schema ใด schema หนึ่ง โดยในที่นี้จะยกตัวอย่างการ grant สิทธิ์ในการเข้าถึงข้อมูลของ schema หนึ่งไปให้กับอีก schema หนึ่ง ที่มาที่ไปคือ ในบางครั้ง เราต้องการ grant สิทธิ์ในการเข้าถึงข้อมูลของ schema หนึ่งไปให้กับอีก schema หนึ่ง เช่น ต้องการ grant สิทธิ์การเรียกดูข้อมูลใน table ชื่อ TABLE01 ของ schema ที่ชื่อ SCHEMA01 ให้ schema ที่ชื่อ SCHEMA02 สามารถเรียกดูข้อมูลได้ คำสั่งที่ใช้ในการ grant คือGRANT SELECT ON SCHEMA01.TABLE01 TO SCHEMA02; แต่หากต้องการ grant หลาย ๆ  table ก็ต้องพิมพ์คำสั่งเหล่านี้ทีละคำสั่งซ้ำๆ ไปจนครบตามชื่อ talbe ที่ต้องการ grant ซึ่งถ้า table ที่ต้องการ grant มีเป็นจำนวนมากก็จะยิ่งใช้เวลามากยิ่งขึ้น และอีกปัญหาคือ มีโอกาสพิมพ์ชื่อ table ผิด เทคนิคในการสร้างสคริปต์เพื่อช่วยให้การทำงานรวดเร็วขึ้นจะมีรูปแบบดังนี้คือSELECT ‘GRANT SELECT ON OWNER_SCHEMA.’ || OBJECT_NAME || ‘ TO OTHER_SCHEMA;’ FROM ALL_OBJECTS WHERE OBJECT_TYPE = ‘TABLE’; เมื่อ OWNER_SCHEMA คือชื่อของ schema ที่เป็นเจ้าของ table OBJECT_NAME คือชื่อฟีลด์ที่อยู่ใน ALL_OBJECTS โดยเป็นข้อมูลของชื่อ object ซึ่งกรณีนี้คือชื่อของ table นั่นเอง OTHER_SCHEMA คือชื่อของ schema ที่ได้รับการ grant สิทธิ์ให้เรียกดูข้อมูลใน table ของ OWNER_SCHEMA WHERE OBJECT_TYPE = ‘TABLE’ เป็นการระบุเงื่อนไขว่าต้องการ object ที่เป็น table เท่านั้น ผลลัพธ์ที่ได้คือ GRANT SELECT ON OWNER_SCHEMA.TABLE01 TO OTHER_SCHEMA; GRANT SELECT ON OWNER_SCHEMA.TABLE02

Read More »