Javascript

Hello…Flatpickr!!

by

หลายคนอาจะเคยพบปัญหาการเลือก วัน เดือน ปี ในcalendar การกรอกข้อมูลที่เป็นวันที่ใน web ต่างๆ การเลือกช่วงวันที่ใช้งานยาก โดยเฉพาะในการเลือก ช่วงเวลา ที่ย้อนหลัง ไปหลายปี บาง web อาจต้องกดเลื่อนเดือนที่ละเดือนไปเรื่อยๆ ต้องใช้เวลานาน ทำให้รู้สึกเบื่อ… วันนี้เราจะมานำเสนอ Flatpickr ที่เป็นไลบรารี่ javascript ใช้สำหรับรับ input ที่เป็น datetime picker ที่ยืดหยุ่น มีขนาดเล็กและใช้ง่าย โดย output ที่ได้จะเป็น String ตาม format ที่เราต้องการ Flatpickr js รูปแบบจะเป็นแนว Lean กับ UX-driven สามารถใช้งานได้กับ JS ธรรมดาหรือ jQuery โดย Flatpickr รองรับภาษาไทยได้โดยเลือก Localization เป็นไทยเพื่อให้สามารถแสดงเป็นภาษาไทย และรองรับรูปแบบเวลาที่แสดง 24 ชม. เพราะจะเข้าใจง่ายกว่า AM … Read more

Uploading Files into Database with ASP.NET MVC

by

การ    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 … Read more

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

by

          ก่อนที่เราจะไปเริ่มเนื้อหาของบทความี้ ผู้เขียนต้องขอท้าวความเดิมตอนที่แล้วของบทความก่อน ซึ่งผู้เขียนได้พูดถึงวิธีการแสดงผลเส้นทางทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsService ในเบื้องต้นไว้ (สามารถศึกษาเพิ่มเติมได้จากบทความ : การแสดงเส้นทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsService ในเบื้องต้น )  สำหรับในบทความนี้ผู้เขียนจึงอยากต่อยอดการทำงาน และเพิ่มลูกเล่นให้กับการแสดงผลแผนที่ด้วยการปรับเปลี่ยนการกำหนดรูปแบบการแสดงผลของเส้นทางให้ผู้เยี่ยมชมเว็บไซต์  ซึ่งเราจะให้ผู้ใช้สามารถเลือกรูปแบบในการแสดงผลได้ว่า ต้องการดูเส้นทางในรูปแบบใดตามรูปแบบ Mode ที่ผู้ใช้เลือกมา เช่น เส้นทางเดิน ทางถนน หรือขนส่งสาธารณะ เป็นต้น โดยวิธีการดังกล่าวนี้เหมาะกับเว็บไซต์ที่มีความเกี่ยวข้องกับความต้องการที่ต้องการทราบเส้นทางในแต่ละรูปแบบ เพื่อเป็นประโยชน์ในการนำไปประยุกต์ใช้กับงานของแต่ละท่านได้ค่ะ    ตัวอย่างผลลัพธ์ที่ได้จากบทความที่แล้ว  ซึ่งจากตัวอย่างโค้ดในบทความที่แล้ว การกำหนด DirectionsTravelMode เป็น DRIVIING ซึ่งในความเป็นจริงแล้วยังมีรูปแบบอื่นๆให้เลือกใช้ด้วยกันทั้งหมด 4 รูปแบบ ดังนี้ DRIVING (Default):เป็นโหมดตั้งต้นให้หากไม่ได้มีการกำหนดไว้ ซึ่งเป็นโหมดที่แสดงเส้นทางการขับขี่ด้วยยานพาหนะ BICYCLING: เป็นโหมดสำหรับเส้นทางที่เตรียมไว้สำหรับผู้ขับขี่จักรยาน TRANSIT: เป็นโหมดสำหรับแสดงเส้นทางระบบขนส่งสาธารณะ เช่น  รถบัส รถไฟ หรือแม้แต่เครื่องบิน เป็นต้น WALKING: เป็นโหมดสำหรับแสดงเส้นทางการเดินถนน           ซึ่งผู้เขียนจะขอยกตัวอย่างในส่วนของการเลือกรูปแบบเส้นทางและผลลัพธ์ของแต่ละรูปแบบ ดังตัวอย่างโค้ดต่อไปนี้ การกำหนดรูปแบบของเส้นทางในการแสดงผลบนแผนที่ โค้ด … Read more

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

by

ในการออกแบบเว็บฟอร์มบันทึกข้อมูลลงฐานข้อมูลนั้น นักพัฒนาเว็บแอ๊พปลิเคชั่นส่วนใหญ่จะออกแบบเป็นลำดับขั้นตอนการทำงานประมาณนี้ ผู้ใช้เปิดเว็บฟอร์มขึ้นมาด้วยเว็บบราวเซอร์ ผู้ใช้กรอกข้อมูลลงในเว็บฟอร์ม ผู้ใช้กดปุ่มบันทึกข้อมูล ระบบตรวจสอบ (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 … Read more

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

by

เชื่อว่านักพัฒนาเว็บแอปพลิเคชันทุกคนต้องเคยได้ใช้งาน JavaScript กันเพื่อทำให้เว็บแอปพลิเคชันสามารถทำงานได้ตามความต้องการ  ตัวอย่างตัวที่ใช้กันบ่อยๆ น่าจะเป็น JavaScript Confirm ใช้ในการยืนยันก่อนการดำเนินการต่าง ๆ เช่นการลบข้อมูล เพื่อป้องกันการคลิกปุ่มลบโดยไม่ได้ตั้งใจ ดังรูป   จากรูปจะเห็นว่า JavaScript Confirm บน Google Chrome และ Mozilla Firefox หน้าตาไม่เหมือนกัน ทั้งๆที่ใช้โค้ดเดียวกัน และปัญหาอีกอย่างหนึ่งที่พบคือ หากเราต้องการให้ข้อความ “คุณต้องการลบข้อมูลรายการนี้ใช่หรือไม่?” มีการขึ้นบรรทัดใหม่ ใส่สี เพิ่มขนาดฟอนต์ จัดตัวหนา ตัวเอียงก็ไม่สามารถทำได้เลย แต่ถ้าต้องการให้แก้ปัญหาเหล่านี้ได้ก็ต้องใช้ตัวช่วย นั่นคือ Bootbox.js ซึ่งเป็น JavaScript library ที่ใช้งานร่วมกับ Bootstrap โดยใช้ Bootstrap modal มาทำหน้าที่แทน JavaScript Dialog ต่างๆ ทั้ง Alert, Confirm, Prompt และรวมถึง Custom Dialog ด้วย … Read more