ทำไมผมถึงใช้ jQuery Validation Plugin

การ validate ข้อมูลใน form ก่อนที่จะ submit นั้น ข้อดีของมันก็คือ “ทำให้ user ไม่ต้องกรอกข้อมูลซ้ำอีก เมื่อเกิดข้อผิดพลาด” ยกตัวอย่างเช่น มีแบบฟอร์มให้กรอกข้อมูลบุคคล มี input ประมาณ 20 ตัว ที่ต้องกรอกให้ครบ แต่ userA เข้ามากรอกข้อมูลจากนั้นกด submit แต่ระบบแจ้งว่าข้อมูลที่กรอกไม่ถูกต้อง พอกด back หรือย้อนกลับไปหน้ากรอกข้อมูล พบว่าข้อมูลที่เคยกรอกไว้ มันหายไปหมด ต้องมานั่งหัวเสียกรอกซ้ำอีกรอบ เป็นแบบนี้ทำให้เกิดความยุ่งยากแก่ผู้ใช้บริการ จะดีกว่ามั้ยถ้ามีการตรวจสอบข้อมูลก่อนที่จะกด submit เพื่อให้ได้ข้อมูลที่ถูกต้องครบถ้วน ซึ่งนี่คือเรื่องราวของบทความนี้ ขอเกริ่นเกี่ยวกับอดีตที่ผ่านมาซักเล็กน้อย เพื่อให้ให้เข้าเหตุผลว่าทำไมผมถึงเลือกใช้ แต่ก่อนนั้น สมัยที่ใช้กันแต่ javascript เพียวๆ การที่เราจะทำการ validate ข้อมูลที่กรอกใน form input นั้น ทำได้ค่อนข้างยาก และสลับซับซ้อนมากกว่าจะได้เงื่อนไขที่ดักจับ Value ไม่ให้หลุดรอดไปได้ ผมขอยกตัวอย่างเช่น การสร้าง form …

Make my own gallery from facebook album with PHP

มีพี่เข้ามาสอบถามเกี่ยวกับอัลบั้มภาพกิจกรรม แบบที่โรงพยาบาลอ่างทอง (ที่ทำงานผม) ใช้อยู่ ว่าเป็น module อะไร? ทำยังไง? เห็นมันสวยดีเลยอยากให้แนะนำ ผมเลยชี้แจงรายละเอียดคร่าวๆ ดังนี้ครับ code แยกออกเป็นสองส่วนดังนี้ครับ PHP – ใช้ดึงข้อมูลจาก facebook album มาแสดง CSS – จัดรูปแบบให้น่าสนใจ มาดู code php พร้อมคำอธิบาย   ในส่วนของ CSS นั้นผมใช้ service ของ tympanus codrops http://tympanus.net/codrops/2013/06/18/caption-hover-effects/ สามารถ download code ตัวอย่างทั้งหมดได้ที่นี่ครับ https://github.com/MoreMeng/FBgallery

HTML5 input type date แสดงปฏิทินได้แล้วบน Google Chrome 27

แต่ก่อนจะใช้ jQueryUI datepicker เพื่อให้มันโชว์ปฏิทินขึ้นมา เพื่อให้ผู้ใช้เลือก ว่าต้องการวันที่เท่าไหร่ ปีไหน แต่เดี๋ยวนี้ด้วย HTML5 มี tag เพิ่มเติมมากมาย อาทิ input type ที่เป็นแบบ date, number, email เป็นต้น เมื่อเรากำหนด input type เป็นแบบ date เจ้า Google Chrome แสนฉลาด ก็จะแสดงปฏิทินให้เราทันทีเมื่อมีการเลือก input ที่เรากำหนดค่าไว้ มาดูตัวอย่าง หากเราต้องการเปลี่ยนให้เป็นภาษาอังกฤษ หรือภาษาที่ต้องการ เราก็ไม่ต้องไปตั้งค่าอะไรที่ตัว code เลย เพียงแต่มันจะ detect ภาษาที่เราใช้บน google chrome นั่นเอง    ไปดูจตัวอย่างของ input type ใน HTML5 ที่นี่ได้เลย http://www.w3schools.com/html/html5_form_input_types.asp

play shoutcast internet radio steaming with html5

HTML5 > AUDIO html5 มี tag audio เพื่อใช้สำหรับแสดงตัว player ในการเล่นเพลง ซึ่งเอามาแทน flash นั้นเอง ทีนี้หากต้องการให้มันเล่นบน radio online ละ? หากต้องการเปิดไฟล์ที่มาจากการ streaming ละ จะทำอย่างไร มาดู code ดังนี้ ตัวอย่าง หากทดสอบแล้ว browser ไม่สามารถเล่นเพลงได้ ให้เพิ่ม ;stream.mp3 หรือ ชื่ออื่นก็ได้ เข้าไปดังนี้