ลองใช้ reCAPTCHA ใหม่ของ Google

CAPTCHA สำหรับ web developer หลายๆ คนคงรู้ความหมายอยู่แล้ว ผมขอสรุปสั่นๆ แล้วกันครับ

CAPTCHA คือเครื่องมือช่วยป้องกัน spam หรือ bot ของ website ครับ ซึ่งไม่นานมานี้ Google ได้พัฒนา reCAPTCHA ให้ใช้งานได้ง่ายขึ้น(จริงข่าวออกมาซักพักละ) โดย reCAPTCHA version ใหม่ตัวนี้ผู้ใช้ไม่จำเป็นต้องพิมพ์ตัวอักษรตามที่เห็นอีกต่อไป เปลี่ยนเป็นการติ๊กถูกว่าเราไม่ใช้ bot ซึ่งการตรวจสอบนั้นทาง Google จะประเมินความเสี่ยงและแยกแยะเองว่าเป็นมนุษย์จริงๆ หรือไม   แต่ถึงอย่างนั้นหากระบบไม่สามารถแยกแยะได้ว่าเป็นมนุษย์หรือ bot ระบบก็จะแสดงตัวอักษรมาให้พิมพ์ตามเดิม ดูแล้วน่าจะสะดวกกับผู้ใช้มากขึ้น

การใช้งาน reCAPTCHA ของ Google นั้นต้อง register ก่อนนะครับเพื่อขอรับ Website Key ในการนำไปใช้ วิธีการนั้นก็ง่ายๆ ครับตามนี้เลย

1. เข้าไปยังเว็บ https://www.google.com/recaptcha/intro/index.html

2. คลิกที่ปุ่ม Get reCAPTCHA ดังรูป

3. Login เข้าใช้งานด้วย Account gmail

4. กรอกข้อมูลลงในหน้าต่างดังรูป แล้วคลิก Register

5. เรียบร้อยได้ Website Key มาตามรูป

การเขียน Code เรียกใช้ reCAPTCHA

ตัวอย่างที่ 1 เรียกใช้ผ่าน HTML

ตัวอย่างที่ 2 เรียกใช้งานผ่าน javascript

ผลลัพท์ที่ได้

หากต้องการศึกษาการใช้งานหรือคำสั่งต่างๆ เพิ่มเติม ดูได้ที่

https://developers.google.com/recaptcha/intro

การทำ Dropdownlist(Select) Type และ Subtype

ทุกคนที่เคยเขียนโปรแกรมต้องเคยทำ Dropdownlist 2 หรือ 3 อันที่มีความสัมพันธ์เกี่ยวข้องกันอยู่บ้าง

เช่นเลือกประเภทหลักแล้ว ให้แสดงเฉพาะประเภทย่อยที่เกี่ยวข้องตามที่เลือกประเภทหลักเท่านั้น

โดยตัวอย่างนี้ผมจะทำ Dropdownlist 3 ระดับให้ดูเป็นตัวอย่างครับ

สิ่งที่ผมนำมาใช้ในครั้งนี้ (เรียกใช้ผ่าน CDN)

1. jQuery  (https://code.jquery.com/jquery-1.11.0.min.js)

2. CSS ของ Bootstrap (http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css)

3. Database สำหรับทดสอบผมเลือกใช้ MySQL

---

ขั้นตอนที่ 1 เริ่มโดยสร้าง Database เตรียมพร้อมไว้ก่อน

ในตัวอย่างนี้ผมใช้ Table ทั้งหมด 3 Table ด้วยกัน

– Table 1 ชื่อ tbl_type เก็บประเภทหลัก (script สร้างตามรูป)

create table tbl_type

– Table 2 ชื่อ tbl_sub_type เก็บประเภทย่อย (script สร้างตามรูป)

create table tbl_sub_type

– Table 3 ชื่อ tbl_product เก็บข้อมูลสินค้า (script สร้างตามรูป)

create table tbl_product

 

ขั้นตอนที่ 2 เขียนโปรแกรม(php) สำหรับ select ข้อมูลออกมาให้กับ Dropdownlist

php connect mysql generate datasource

 

ขั้นตอนที่ 3  เขียน HTML สำหรับ Dropdownlist สำหรับทดสอบใช้งาน

html with dropdownlist

ขั้นตอนสุดท้าย เขียน jQuery สำหรับให้ Dropdownlist ทำงาน

– เมื่อ page load เรียบร้อยให้เตรียมข้อมูลลงที่ Dropdownlist Type

jQuery onloaded

– function เมื่อเลือก Dropdownlist Type

function onTypeChange (parametet1 , parameter2)

– function เมื่อเลือก Dropdownlist Subtype

function onSubtypeChange (parameter1)

– function clear option เมื่อมีการเปลี่ยนแปลง

function clearOptionItem (parameter1)

– function พระเอกของเรา ติดต่อ PHP ผ่าน Ajax เพื่อสร้าง Item ใน Dropdownlist

function callAjax for generate dropdownlist item

---

สามารถดูตัวอย่างได้ที่ Demo
Download Code ตัวอย่างได้จาก SourceCode

การสร้าง Dynamic Table

ผมได้มีโอกาสเขียนโปรแกรมออกแบบการทำงานให้ยืดหยุ่นตามที่ User ต้องการ สิ่งที่ User ต้องการคืออยากจะสร้าง Table ขึ้นเองโดยที่สามารถกำหนดข้อความส่วนต่างๆ ได้ตามต้องการ ผมเห็นว่าเป็นเรื่องน่าสนใจสำหรับผู้พัฒนาใหม่ๆ เพราะสามารถนำไปใช้พัฒนาเป็นลูกเล่นได้ทั้งในส่วน Bankend และ Frontend จึงอยากนำตัวอย่างที่ผมทำมาให้ดูกันครับ

สิ่งจำเป็นสำหรับตัวอย่างนี่ที่ผมใช้

1. jQuery (แน่นอนเว็บสมัยนี้ขาดมันไม่ได้เลย มันช่วยให้การเขียน javascript สะดวกสบายขึ้นเยอะ)

2. bootstrap ทั้ง css และ js

3. ตัวช่วยในการสร้าง modal ของ bootstrap คือ modal.js

---

เริ่มต้นด้วยส่วนของ html (index.html)

dynamic-table

ตามมาด้วย function ต่างๆ ของ Javascript

1.  function เมื่อปุ่ม button clicked

function event button clicked

2.  function สำหรับแสดง popup ให้ระบุจำนวน column และ row

function popup confirm

3.  function ที่รอรับการ call back จากหน้า popup

function รอรับการ call bank จาก popup

4.  function พระเอกของเรา สร้าง table ขึ้นมา

function create table

---

ดูตัวอย่างได้จากที่นี่ครับ Demo
Download code ตัวอย่างได้จาก SourceCode