Javascript – Page 3 – CoP PSU IT Blog

Hello…Flatpickr!!

July 15, 2019 23:21

หลายคนอาจะเคยพบปัญหาการเลือก วัน เดือน ปี ในcalendar การกรอกข้อมูลที่เป็นวันที่ใน web ต่างๆ การเลือกช่วงวันที่ใช้งานยาก โดยเฉพาะในการเลือก ช่วงเวลา ที่ย้อนหลัง ไปหลายปี บาง web อาจต้องกดเลื่อนเดือนที่ละเดือนไปเรื่อยๆ ต้องใช้เวลานาน ทำให้รู้สึกเบื่อ… วันนี้เราจะมานำเสนอ Flatpickr ที่เป็นไลบรารี่ javascript ใช้สำหรับรับ input ที่เป็น datetime picker ที่ยืดหยุ่น มีขนาดเล็กและใช้ง่าย โดย output ที่ได้จะเป็น String ตาม format ที่เราต้องการ Flatpickr js รูปแบบจะเป็นแนว Lean กับ UX-driven สามารถใช้งานได้กับ JS ธรรมดาหรือ jQuery โดย Flatpickr รองรับภาษาไทยได้โดยเลือก Localization เป็นไทยเพื่อให้สามารถแสดงเป็นภาษาไทย และรองรับรูปแบบเวลาที่แสดง 24 ชม. เพราะจะเข้าใจง่ายกว่า AM กับ PM ซึ่ง library อื่นๆ อีกหลายตัวยังไม่สามารถรองรับ จุดเด่น คือ มีความสวยงาม ไม่ต้องการ dependencies ใดๆ สามารถใช้งานได้ทันที การใช้งานสามารถใช้ได้ง่ายๆ โดยใช้แค่ 2 ไฟล์ ก็สามารถใช้ option ได้เกือบครบ ซึ่งไฟล์ ที่จำเป็นประกอบด้วย ไฟล์ js 1 ไฟล์ และ ไฟล์ css 1 ไฟล์ <link rel=”stylesheet” href=”flatpickr.css”> <script src=”flatpickr.js”></script> ถ้าใช้งานร่วมกับ jquery ก็ต้อง เพิ่ม library jquery เข้ามาด้วย <script src=”jquery.min.js”></script> การใช้งาน $(“.selector”).flatpickr( optional_config ); ตัวอย่างกล่อง input ที่ใช้เลือก วันที่ <input type=”text” id=”timePicker” placeholder=”Please select Time”> การแสดงเวลาแบบ Basic $(“#basicDate”).flatpickr({ enableTime: true, dateFormat: “F, d Y H:i”, time_24hr: true }); เราสามารถกำหนดช่วงของวันที่ค้นหาได้ง่ายขึ้น เนื่องจากมี Range Calendar (ภาพที่ 2) ให้ใช้งาน หรือจะเป็นเลือกแบบ Multiple เลือกทีละหลายๆวันก็ได้ และยังมี Plugin หรือ Theme ให้เลือกใช้งานอีกด้วย การแสดงเวลาแบบ Range Datetime $(“#rangeDate”).flatpickr({ mode: ‘range’, dateFormat: “Y-m-d” });

Uploading Files into Database with ASP.NET MVC

April 24, 2018 14:51

การ upload file มีหลายรูปแบบ ไม่ว่าจะเป็นการ upload file แบบ copy ไว้บน server หรือจะเป็นการบันทึกลงในฐานข้อมูลเลยโดยตรง วันนี้จะขอนำเสนอในส่วนของการ upload file และบันทึกลงฐานข้อมูล โดยใช้ ASP.NET MVC ดังนี้ กำหนดไฟล์ที่ต้องการ upload ให้มีรูปแบบดังนี้ public class UploadModel { [Required] public HttpPostedFileBase File { get; set; } } ในส่วนของ View <form id=”uploader” enctype=”multipart/form-data” method=”POST”> <a type=”submit” href=”#” onclick=”uploadConfirm();” class=”btn btn-info”><span class=”glyphicon glyphicon-save”></span> Upload</a> </form> ในส่วนของ java script (สำหรับเรียก Controller) function uploadConfirm() { $.ajax({ type: ‘POST’, contentType: ‘application/json; charset=utf-8’, url: ‘@Url.Action(“CheckDataBeforeUpload”, “NoteUpload”)’, data: “{ ‘periodID’:’” + $(‘#selectedlistPeriods’).val() + “‘ ,’financeID’:’” + $(‘#selectedlistFinance’).val() + “‘ }”, success: function (resultSave) { }, error: function (data) { alert(data); } }); } ในส่วนของ Controller public async Task<ActionResult> UploadFile(UploadModel model, FormCollection form) { string fileName = Path.GetFileName(model.File.FileName); //แสดงชื่อไฟล์ string strFileName = Path.GetFileNameWithoutExtension(fileName); //แสดงชื่อไฟล์ string contentType = model.File.ContentType; //แสดงนามสกุลไฟล์ string FileExtension = fileName.Substring(fileName.LastIndexOf(‘.’) + 1).ToLower(); using (Stream fs = model.File.InputStream) // { using (BinaryReader br = new BinaryReader(fs)) { byte[] bytes = br.ReadBytes((Int32)fs.Length); //TO DO: Code ในส่วนที่ต้องการ insert ข้อมูลลง Database } } return RedirectToAction(“Index”); } จากตัวอย่างข้างต้น จะเป็นการ upload file ลงฐานข้อมูลโดยตรงในส่วนของรูปแบบการพัฒนาแบบ MVC ผู้เขียนหวังว่าอาจจะเป็นอีกทางเลือกหนึ่งของผู้พัฒนา ในการนำไปพัฒนาโปรแกรมต่อไปนะคะ ^_^ แหล่งอ้างอิง https://stackoverflow.com/questions/15106190/uploading-files-into-database-with-asp-net-mvc https://stackoverflow.com/questions/21677038/mvc-upload-file-with-model-second-parameter-posted-file-is-null/21677156

การปรับเปลี่ยนรูปแบบการแสดงผลเส้นทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsTravelMode

July 15, 2017 15:35

ก่อนที่เราจะไปเริ่มเนื้อหาของบทความี้ ผู้เขียนต้องขอท้าวความเดิมตอนที่แล้วของบทความก่อน ซึ่งผู้เขียนได้พูดถึงวิธีการแสดงผลเส้นทางทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsService ในเบื้องต้นไว้ (สามารถศึกษาเพิ่มเติมได้จากบทความ : การแสดงเส้นทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsService ในเบื้องต้น ) สำหรับในบทความนี้ผู้เขียนจึงอยากต่อยอดการทำงาน และเพิ่มลูกเล่นให้กับการแสดงผลแผนที่ด้วยการปรับเปลี่ยนการกำหนดรูปแบบการแสดงผลของเส้นทางให้ผู้เยี่ยมชมเว็บไซต์ ซึ่งเราจะให้ผู้ใช้สามารถเลือกรูปแบบในการแสดงผลได้ว่า ต้องการดูเส้นทางในรูปแบบใดตามรูปแบบ Mode ที่ผู้ใช้เลือกมา เช่น เส้นทางเดิน ทางถนน หรือขนส่งสาธารณะ เป็นต้น โดยวิธีการดังกล่าวนี้เหมาะกับเว็บไซต์ที่มีความเกี่ยวข้องกับความต้องการที่ต้องการทราบเส้นทางในแต่ละรูปแบบ เพื่อเป็นประโยชน์ในการนำไปประยุกต์ใช้กับงานของแต่ละท่านได้ค่ะ ตัวอย่างผลลัพธ์ที่ได้จากบทความที่แล้ว ซึ่งจากตัวอย่างโค้ดในบทความที่แล้ว การกำหนด DirectionsTravelMode เป็น DRIVIING ซึ่งในความเป็นจริงแล้วยังมีรูปแบบอื่นๆให้เลือกใช้ด้วยกันทั้งหมด 4 รูปแบบ ดังนี้ DRIVING (Default):เป็นโหมดตั้งต้นให้หากไม่ได้มีการกำหนดไว้ ซึ่งเป็นโหมดที่แสดงเส้นทางการขับขี่ด้วยยานพาหนะ BICYCLING: เป็นโหมดสำหรับเส้นทางที่เตรียมไว้สำหรับผู้ขับขี่จักรยาน TRANSIT: เป็นโหมดสำหรับแสดงเส้นทางระบบขนส่งสาธารณะ เช่น รถบัส รถไฟ หรือแม้แต่เครื่องบิน เป็นต้น WALKING: เป็นโหมดสำหรับแสดงเส้นทางการเดินถนน ซึ่งผู้เขียนจะขอยกตัวอย่างในส่วนของการเลือกรูปแบบเส้นทางและผลลัพธ์ของแต่ละรูปแบบ ดังตัวอย่างโค้ดต่อไปนี้ การกำหนดรูปแบบของเส้นทางในการแสดงผลบนแผนที่ โค้ด Javascript <script type=”text/javascript”> function initialize() { // ประกาศเรียกใช้งาน DirectionsService เพื่อการแสดงผลให้มีลักษณะเป็น Global window.directionsService = new google.maps.DirectionsService(); window.directionsDisplay = new google.maps.DirectionsRenderer(); var map; var bounds = new google.maps.LatLngBounds(); var mapOptions = { mapTypeId: ‘roadmap’ }; // แสดงผลแผนที่ในหน้าจอตาม Element ที่กำหนด map = new google.maps.Map(document.getElementById(“map_canvas”), mapOptions); map.setTilt(45); // กำหนดพิกัดจุดให้กับจุดเริ่มต้นและเส้นสุด window.markers = [ [‘Place1’, 51.501546, -0.142000], [‘Place2’, 51.512051,-0.091225] ]; // ให้แสดงผลสิ่งที่ตั้งค่าไว้ในพื้นที่แผนที่ที่กำหนด directionsDisplay.setMap(map); // กำหนดค่าเริ่มต้นของรูปแบบให้เป็นเส้นทางการเดิน (walking mode) calcRoute(); } // เป็นฟังก์ชั่นในการคำนวณเส้นทางระหว่างสองจุดพิกัดบนแผนที่และเลือกกำหนดค่า Mode ในการแสดงผล function calcRoute() { var selectedMode = document.getElementById(‘travelType’).value; var request = { origin: new google.maps.LatLng(markers[0][1], markers[0][2]), destination: new google.maps.LatLng(markers[1][1], markers[1][2]), //// //กำหนดรูปแบบการแสดงผลเส้นทางโดยเริ่มต้นให้เป็นเส้นทางการเดิน(ตามรายการแรกที่เลือก) travelMode: google.maps.TravelMode[selectedMode] }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); } </script> ส่วนของการแสดงผลใน body <body> <div id=”map_wrapper”> <div id=”map_canvas” class=”mapping”></div> </div> <div id=”travel_selector”> <p><strong>Mode of Travel: </strong> <select id=”travelType” onchange=”calcRoute();”> <option value=”WALKING”>Walking</option> <option value=”BICYCLING”>Bicycling</option> <option value=”DRIVING”>Driving</option> <option value=”TRANSIT”>Transit</option> </select></p> </div> </body> ผลลัพธ์ในแต่ละรูปแบบ แบบที่ 1 DRIVING Mode : แบบที่ 2 BICYCLING Mode:

การเรียกใช้งาน (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) ยังคงเหมือนเดิม

การสร้าง 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 สวยๆ และมีความยืดหยุ่นไว้ใช้งานได้แล้ว