Day: May 17, 2022

Figma: Scrolling  with overflow behavior (Horizontal Scrolling)

by

บล๊อกนี้ผู้เขียนจะมาแนะนำวิธีการตั้งค่า Mobile App Prototype ที่เราได้พัฒนาขึ้นมา (ด้วย figma) เพื่อให้ผู้ใช้สามารถเลื่อน (Scrolling) ส่วนของเนื้อหาที่มีมากจนเกินขนาดของอุปกรณ์ได้ โดยใน figma นั้น สามารถทำ Scrolling เพื่อให้รองรับกับพฤติกรรมของผู้ใช้ได้ 3 แบบ ดังนี้ค่ะ แบบที่ 1 Horizontal Scrolling  คือ การเลื่อนในแนวนอน ซ้ายและขวาภายในเฟรม โดยยังคงตำแหน่งแนวตั้งไว้ เช่น ภาพสินค้า , แกลอรี่ภาพ แบบที่ 2 Vertical Scrolling คือ การเลื่อนในแนวตั้ง ขึ้นและลงภายในเฟรม เช่น เลื่อนดูเว็บไซต์ที่มีขนาดยาว หรือเนื้อหาที่อยู่ภายในแอป แบบที่ 3 Horizontal & Vertical Scrolling คือ การเลื่อนในแนวนอนและแนวตั้ง ผู้ใช้สามารถเลื่อนไปในทิศทางใดก็ได้ภายในเฟรม เช่น การดูแผนที่ สำหรับบล๊อกนี้นั้น ผู้เขียนขอยกเอา Horizontal … Read more

การประยุกต์ใข้  Sequence เพื่อสร้างตัวเลขอัตโนมัติให้กับ Table ใน Oracle Database

by

ก่อนหน้านี้เคยได้รับความต้องการจากระบบหนึ่งซึ่งเป็นระบบที่รับสมัครนักเรียนเพื่อเข้าศึกษาต่อในมหาวิทยาลัยโดยมีความต้องการข้อหนึ่งว่า “ในส่วนการจัดเก็บข้อมูลเลขที่สมัคร ให้รันข้อมูลเลขที่ผู้สมัครตามโครงการที่เปิดรับในแต่ละปีการศึกษา” เนื่องในการพัฒนาระบบนี้ มีการใช้ Oracle Database ในการจัดการฐานข้อมูลอยู่แล้ว เพื่อน ๆ ที่เคยทำงานกับ Oracle Database ก็จะทราบว่าเราสามารถใช้ Oracle Sequence  เพื่อสร้างตัวเลขอัตโนมัติได้ ดังนั้นเราจึงสามารถที่จะใช้ Oracle Sequence มาประยุกต์ใช้เพื่อที่จะรันเลขที่ผู้สมัครได้ โดยสามารถมั่นใจได้ว่าจะไม่เกิดปัญหาผู้สมัครได้ข้อมูลเลขที่สมัครเดียวกัน กรณีที่ทำการสมัครในโครงการเดียวกันเรียนพร้อม ๆ กันอย่างแน่นอน วิธีการดำเนินการก็ไม่ยุ่งยากแค่สร้าง sequence ตามโครงการและปีที่เปิดรับทั้งหมดไว้ให้ก่อนให้เรียบร้อยและเมื่อนักศึกษามาสมัครก็สามารถเรียกใช้ได้เลย ตามวิธีการข้างต้นก็ไม่น่าจะมีปัญหาอะไร แต่ก็เริ่มมีคำถามในใจ ถ้าโครงการนั้นไม่มีผู้สมัครเลย ถ้าดำเนินการสร้างไว้ก่อนก็เปลืองเปล่า ๆ หรือถ้าลืมสร้างของบางโครงการ ระบบต้องเกิดข้อผิดพลาดแน่นอน จึงเกิดแนวคิดใหม่แทนที่จะสร้างไว้ก่อน เปลี่ยนเป็นสร้าง sequence ตอนที่นักเรียนสมัครในโครงการนั้น ๆ ดีกว่า โครงการไหนไม่มีการสมัครก็ไม่ต้องสร้าง และไม่เกิดปัญหาสร้าง sequence ไม่ครบในทุกโครงการแน่นอน คราวนี้ถึงเวลาที่เราจะมาดำเนินการกันแล้วค่ะ โดยมีขั้นตอนคร่าว ๆ ดังนี้คือ ตรวจสอบก่อนว่ามีการสร้าง sequence ของโครงการนั้น ๆ หรือยังถ้ายังไม่มีการสร้างก็ให้ทำการสร้าง และเมื่อถึงเวลาที่มีการสมัครก็สามารถเรียกใช้ … Read more

ว่าด้วยเรื่องการคำนวณตัวเลขตรวจสอบ (Check Digit)

by

ได้รับมอบหมายจากทีมในการสร้าง Oracle Function เพื่อคำนวณตัวเลขตรวจสอบ (check digit) ของการชำระเงินค่าสมัครผ่านช่องทางการชำระเงินช่องทางหนึ่ง โดยได้รับ requirement มาดังภาพข้างล่างนี้ จากภาพข้างต้นจะมีข้อมูลสำหรับการนำเข้า 4 ชุดซึ่งประกอบด้วย ชุดที่ 1 : Customer No.1/Ref.1  ชุดที่ 2 : Due Date (DDMMYY : พ.ศ.)   ชุดที่ 3 : Customer No.2/Ref.2 ชุดที่ 4 : จำนวนเงินที่ต้องชำระ พร้อมด้วยขั้นตอนวิธีในการคำนวณตัวเลขตรวจสอบ (check digit) ดังนี้ มาทำความเข้าใจกับวิธีคำนวณกันก่อนที่จะเริ่มต้นสร้าง Oracle Function ถ้ามาดูรายละเอียดของวิธีการคำนวณในข้อที่ 1 ซึ่งเป็นการหาค่าประจำหลักของข้อมูลนำเข้า โดยวิธีการคือ นำข้อมูลแต่ละหลักคูณค่าคงที่ คือ 6, 4, 5, 8, 7 ไปเรื่อย … Read more

UX, everything related!

by

เรามักได้ยินคำว่า UI เป็นประจำเมื่อเราพัฒนาระบบแต่ รู้หรือไม่ว่านอกจาก UI แล้วมันมีอีกหนึ่งอย่างที่ควรรู้และสำคัญยิ่งกว่าแต่ถูกมองข้ามไปคือ UX (ย่อมาจาก User experience) หลายๆคนมักจะสับสนว่า UI และ UX มันคือสิ่งเดียวกัน จริงๆแล้วมันคือคนละอย่างกันเลย วันนี้เราจะมาเล่าให้ฟัง UI :: User Interface User Interface คือหน้าตาของระบบที่ผู้ใช้ได้เห็น ได้ตอบสนอง ไม่ใช่ระบบในทางคอมพิวเตอร์อย่างเดียวที่มี UI ถ้าเทียบกับขวดซอสมะเขือเทศ ขวดก็คือหนึ่งใน UI เช่นกันหรืออาหาร 1 จาน หน้าตาของอาหารก็ถือว่าเป็น UI ด้วย “UI เป็นสิ่งที่สามารถมองเห็นได้หรือจับต้องได้“ UX :: User Experience User Experience คือ Experience หรือประสบการณ์ของผู้ใช้ที่เราได้ส่งมอบให้ มากกว่า Interface ที่ผู้ใช้งานได้ตอบสนอง เราจะไป focus ที่ผู้ใช้ใช้สินค้าเราแล้วมีความรู้สึกอย่างไร ผู้ใช้ใช้สินค้าเราแล้วได้บรรลุวัตถุประสงค์ของเราหรือไม่ “UX … Read more

สร้าง Modal dialog อย่างง่ายด้วย jquerymodal

by

เนื่องจากตอนนี้มีพรบ.คอมพิวเตอร์เข้ามาเกี่ยวข้อง จึงต้องมี pop up Modal dialog ถามผู้ใช้ วันนี้จะมาแนะนำการใช้งาน jQuery ที่เรียกใช้ไม่กี่บรรทัดเราก็ได้ Modal dialog โดยจะยกตัวอย่าง Modal dialog แบบไม่ให้ปิดได้ โดยต้องอ่านข้อความก่อน ถึงจะปิดได้ ขั้นตอนที่ 1 เพิ่ม jquery.min.js, jquery.modal.min.js, jquery.modal.min.css เพื่อเรียกใช้งาน ขั้นตอนที่ 2 เพิ่มการตั้งค่า Modal dialog ตามตัวอย่างไม่ให้แสดงปุ่ม “ปิด” ขั้นตอนที่ 3 เพิ่ม User interface Modal dialog โดยใช้ tag div ขั้นตอนที่ 4 ได้ผลลัพธ์ Modal dialog ออกมาอย่างสวยงาม ที่มา : https://jquerymodal.com