Archives

19 May

การใช้ไฟล์ SVG(Scalable Vector Graphics) แสดงข้อมูลแผนที่

บนความนี้จะเป็นนำเอาแผนที่ประเทศไทย มาแสดงผลการเลือกตั้ง โดยข้อมูลจะเอามาจาก https://vote66.workpointtoday.com/ บางส่วนแต่ตัดทอนออกและทำในรูปแบบ html,css,js แบบง่ายๆเพื่อทำความเข้าใจหลักการใช้งาน svg(Scalable Vector Graphics) คร่าวๆ

18 Mar

การเชื่อต่อ Payment Gateway 2C2P โดยใช้ PHP

บทความการเขียน php เชื่อมต่อ Payment Gateway ขอ 2C2P เพื่อ ทำระบบชำระเงินผ่านบัตรเครดิต

10 Nov

การใช้ HTML , CSS ทำ Animation ฟองน้ำพร้อมใช้ JS ควบคุม ปุ่มหยุดและเล่น

บทความนี้จะนำเสนอการสร้าง  Animation ฟองน้ำ ในหน้าเว็บไซต์ และ สร้างปุ่มควบคุมการหยุดและเล่น เนื่องจากในการทำเว็บที่มีการใส่ Animation สำหรับอุปกรณ์ ที่มีความเร็วก็คงไม่มีปัญหาแต่ถ้าอุปกรณ์ช้าหรืออยากประหยัดพลังงาน คงไม่ดีนักที่จะเปิดเว็บที่มี Animation มากๆ ซึ่งใน Css จึงได้เพิ่ม prefers-reduced-motion media query เข้ามาเพื่อให้ควบคุมการเล่น

11 Oct

การใช้ php ต่อกับ payment gateway ของ กสิกรไทย (ตัดบัตร)

ธนาคารกสิกรมีการอัพเดทระบบ payment gateway ใหม่ไม่แน่ใจว่าช่วงไหน ในคู่มือคือ 17/04/2019 ซึ่งก็ไม่มีตัวอย่างของ php มีแต่ java กับ บอกวิธีการทำงานการส่งค่าและรับค่าต่างๆ ซึ่งในระบบใหม่นี้ สามารถชำระเงินได้ ทั้งแบบ ตัดบัตร และ qr code ซึ่งก็ช่วยให้การจ่ายเงินสำหรับลูกค้าในเว็บไซต์สะดวกขึ้น

04 Oct

การใช้ css Border-Radius ทำลูกเล่นในเว็บ

คำสั่ง Border-Radius ใน css นั้นเป็นคำสั่งสำหรับกำหนดขอบรูปร่าง Element นั้นๆ ให้ขอข้างมีความโค้งเป็นวงกลม โดยจะใส่ค่าตามรูปด้านล่าง จะเป็นการใส่ค่าเดียว ที่ 30% ซึ่งอาจะใช้เป็น px ก็ได้ (ถ้าจะให้เป็นวงกลมใส่ 50%) หรือเราสามารถใส่ 4 ค่าก็ได้ เพื่อให้เป็นวงกลมรูปร่างแปลกตา

20 Sep

การใช้ js ควบคุม css Variables (Custom Properties)

ก่อนอื่นเรามารู้จัก css variables คือ การสร้างตัวแปรใน css เพื่อใช้แทนค่าใน selector อื่นๆ ประโยชน์ก็คือสามารถเปลี่ยนข้อมูลในตัวแปลทีเดียว ก็จะเปลี่ยนทั้งหมด

11 Sep

มาลองใช้ framwork7 ทำ application ลง android

มาทำความรู้จักกับ framework7 ซึ่งเป็น framework เป็น front end ทำ application ในมือถือ ทั้ง ios และ android ซึ่งมี component ต่างๆมากมาย และนอกจากใช้ js ปกติแล้วยังสามารถใช้ควบคู่กับ vue

06 Jun

การใช้งาน javascript เรียก google page speed api ดึงข้อมูลรูป Thumbnail ของเว็บที่ต้องการ

google page speed insights เป็นเครื่องมือที่ใช้สำหรับตรวจสอบความเร็วเว็บไวต์ ซึ่งจะมี api ที่เปิดไว้ โดยไม่ต้องใส่ api key (ไม่แน่ใจถ้าคนใช้มากๆอาจจะปิดในอนาคต) ซึ่งเราสามารถเรียก api ได้ด้วย url อย่างง่ายๆ และจะได้ข้อมูลของเว็บไซต์นั้น รวมทั้ง รูปภาพ

12 Mar

การใช้ Javascript อ่าน exif ของรูปภาพและใช้ร่วมกับ google map api

ในรูปภาพที่เราถ่านในปัจจุบันจะมี ข้อมูลต่างๆฝังอยู่ด้วยเช่น วันเวลา กล้องที่ใช้ โลเคชั่นและอื่นๆอีกมากมาย เรียกว่า Exif ซึ่งเป็น metadata วันนี้ผมจึงลองใช้ หา lib js สำหรับอ่านค่าข้อมูล exif มาชื่อว่า exif-js  เพื่ออ่านค่าและนำค่า Location มาทำการใส่ใน google map

02 Mar

โปรแกรมสร้าง Gif Animation จาก vdo บนเว็บด้วย javascript

เนื่องจากมีความสงสัยว่า JavaScript นั้นสามารถ capture vdo และ สามารถสร้างไฟล์ gif animation ได้หรือไม่ จึงไปศึกษาหาข้อมูลมาดู สรุปคือสามารถทำได้ จึงมาลองเขียนเป็นโปรแกรมแบบง่ายๆเพื่อศึกษาและเขียนบทความเก็บไว้เผื่อมีงานทำเว็บที่ต้องใช้ในอนาคต