การ bind event ให้กับ element ที่ยังไม่เกิด

การทำงานกับ Ajax เราจำเป็นต้องมีการ bind event ให้กับ element ที่ยังไม่เกิด ยกตัวอย่างเช่นถ้าเราต้องการ bind event ให้กับปุ่ม delete ที่อยู่ในแต่ละแถวของตารางที่ทำการ Ajax Call ไปดึงข้อมูลมาจากฝั่ง Server(ในตอน document ready จะยังไม่มีข้อมูลซักแถว) ก็ในเมื่อการ bind event onclick จำเป็นต้องทำการเขียน selector เพื่อให้ได่้ element นั้นมาก่อนแล้วค่อยใช้ .on หรือ .click bind event ให้กับ element นั้นๆ

วิธีการแก้ปัญหาอย่างแรกก็คือ ย้ายการ bind event ให้ไปทำงานตอน call back function ซึ่งจะทำงานได้เหมือนกันแต่จะทำให้ code ดูยุ่งยากและซับซ้อน ในบทความนี้เราเลยหยิบเอาประเด็นเรื่องนี้มาแก้ปัญหากัน โดยใช้วิธี bind event ให้กับ element ก่อนที่ element นั้นจะเกิดขึ่นจริงๆ

เริ่มจากเราจะสมมุติว่าให้ append element เข้าไปหลังจากผ่านไป 5 วินาที(เหมือนกับเราทำ Ajax call ไปยัง Server) โดยใช้ Code ด้านล่างนี้

และ target ที่เราจะ append element เข้าไปสมมุติให้เป็น div ที่ตั้ง id เป็น target แบบนี้

ขั้นตอนแรกเราจะทำการ select element ที่เป็น parent ของ target ที่เราต้องการ เช่นจากตัวอย่างเราก็ทำการ query เอา div ที่เป็น target(แทนที่จะ query เอาปุ่มที่อยู่ใน div นั้นมา bind event)

หลังจาก query target มาได้แล้วก็ให้ใช้ .on เหมือนปกติแต่เพิ่ม parameter ตัวที่ 2 ขึ้นมา ซึ่ง parameter ตัวนี้จะเป็น selector ไป query element ลูกอีกทีนึง(ซึ่งก็คือ element ที่ยังไม่เกิดนั่นเอง) จากในตัวอย่างเราจะทำการ query button ทุกตัวที่อยู่ใน div(ซึ่ง button จะยังไม่ในตอนเริ่มต้น แต่จะค่อยๆเพิ่มขึ้นทุกๆ 5 วินาที) แล้ว bind event onclick นี้ให้กับทุกๆ button ทั้งที่เกิดขึ้นมาแล้วและกำลังจะเกิดขึ่นในอนาคต

รู้จักกับ Attributes ต่างๆของ Active Directory

ในการค้นหาข้อมูลใน AD(Active Directory) เราจำเป็นจะต้องรู้ว่า Attribute แต่ละตัวนั้นเรียกว่าอะไรซึ่งในรูปนี้จะสามารถอธิบายได้อย่างชัดเจนว่าแต่ละตัวมีชื่อเรียกว่าอะไรบ้าง
ldap_properties

เริ่มต้นจากชื่อ object หรือ objectClass จะเป็นชื่อของ Object ที่เราทำการค้นหาใน OU(Organiztion Unit) เช่น User, Group เป็นต้น

ตัวถัดมาก็เป็นชื่อซึ่งอาจเป็น CN(ย่อมาจาก Common Name) เป็นการเอา sn(นามสกุล) และ givenName(ชื่อ) มาต่อกัน ส่วน displayName นี่จะเป็น Attribute อีกตัวที่ทำการกรอกเข้าไปใน AD ดังนั้นบาง Server อาจไม่ได้กรอกค่านี้เอาไว้หรืออาจไม่เหมือนกับ sn และ givenName เวลา Query ออกมาเลยได้ค่าที่ไม่ตรงกับที่เราคิดไว้

ส่วน Attribute อีกตัวที่ใช้บ่อยมากๆคือ SAMAccountName จะเป็นชื่อ username(ไม่ต้องใส่ domain เช่น MyCompany\Somsri ก็ให้ใส่แค่ Somsri) เป็น Attribute ที่ไว้ทำการค้นหาเวลา login

สุดท้ายก็ userPrincipalName จะเป็น SAMAccountName ต่อด้วย @domainname

ดังนั้นใน ASP.net เราจะสามารถใช้ Attributes เหล่านี้ในการ filter และ ทำการดึง properties ออกมา

แต่ถ้าเราต้องการระบุ attribute หลายๆตัวให้เขียนแบบนี้แทน

แหล่งข้อมูลอ้างอิง

http://www.computerperformance.co.uk/Logon/LDAP_attributes_active_directory.htm

การ propagation ของ javascript

propagation ตามความหมายในพจนานุกรมหมายถึงการแพร่พันธ์ ดังนั้นใน javascript ก็จะใช้ในลักษณะที่ใกล้เคียงกัน ดังในตัวอย่างนี้

เริ่มต้นจากการที่มี

ในตัวอย่งจะมี span วางอยู่บน p และ ทั้งสอง element นี้ก็วางอยู่บน div อีกทีนึง ดังนั้นการ propagation ก็จะเกิดขึ้น เมื่อไหร่ที่มีการ click ที่ element span ก็จะเกิดการแพร่พันธ์ของการ click ไปยัง p และ div ด้วย หมายถึงเรา click แค่ span แต่เหมือนเราได้ click ทั้ง span, p และ div พร้อมๆกัน ดังนั้นถ้าเราไม่ให้เกิดการ propagate ก็ให้ทำการใช้ คำสั่ง event.stopPropagation() ซึ่งจะต้องรับ event object เข้ามาก่อน ซึ่งในทุกๆ event จะมี event object ให้ใช้งานอยู่แล้ว ยกตัวอย่างเช่น

จากในตัวอย่างเรารับ parameter ของ function มาเป็น event เราก็เลยสั่งให้หยุดการ propagate ด้วย event.stopPpropagation(); ทำให้การ click ที่ span จะไม่ไปเรียก onclick ของ p และ div ขึ้นมาทำงาน ตรงกันข้ามถ้าเรา comment เอา event.stopPropagation() ออก ก็จะพบว่าเมื่อเรา click ที่ span จะมี pop up ขึ้นมา 3 ครั้ง เนื่องจาก event onclick ของ span, p และ div ถูกเรียกขึ้นมาใช้งานตามลำดับ

การใช้งาน closest() ใน jquery

การทำงานของ closest() จะเหมือนกับการทำงานของ function parents (ไม่ใช่ parent เฉยๆนะ เพราะจะหาแค่ ชั้นบนที่ติดตัวชั้นเดียวเท่านั้น เพราะ parent จริงๆแล้วหมายถึงพ่อแม่ ไม่รวมปู่กับย่า) แต่จะต่างกันตรงที่ถ้าใช้ parents() จะหาเฉพาะ ชั้นที่เป็นแม่ของมันเท่านั้น แต่จะไม่ได้สนใจว่า element ปัจจุบันนั้นเป็นอะไร แต่ถ้าเป็น closest() จะทำการเปรียบเทียบตัวมันเองก่อนแล้วถึงจะมองขึ้นไปยังแม่ของ element นั้นๆอีกที โดยที่ function closest() นั้นจะทำการ return element ที่มันต้องการเพียงแค่ element เดียวเท่านั้น

ตัวอย่าง

ถ้าเราอยากได้ parent ตัวแรกสุดที่เป็น ul ของ span ให้เขียนแบบนี้

การทำงานจะเริ่มจากการหา span แลัวไล่จาก span ขึ้นไปเรื่อยๆ จนกระทั่งเจอ ul แล้วก็หยุดทำงาน แต่ถ้า element ที่เราทำการเลือกใน selector เป็น ul อยู่แล้วก็จะไม่ได้ทำการค้นหาอะไรแล้วก็ return element ปัจจุบันออกไป

แล้วกรณีไหนที่ต้องการใช้งาน closest() เพราะปกติเราจะใช้ parents กันอยู่แล้ว คำตอบคือใช้ในกรณีที่ต้องการหาตัวแม่เพียงตัวเดียวเท่านั้น เพราะเมื่อเจอแล้วก็จะหยุดค้นหา แต่ถ้าเราเปลี่ยน code ใหม่เป็น parents แบบนี้

ผลลัพธ์ที่ได้คือ ul ทั้ง 2 level จะมีกรอบสีแดงทั้ง 2 element

การใช้ while loop แทน foreach

ในการทำงานกับ array ถ้าในบางปัญหาเราอาจพบว่าการเขียนด้วย while loop จะง่ายกว่าการเขียน foreach(แน่นอนการทำงานแบบวน loop 99% ถ้าเขียนด้วย foreach จะเหมาะสมกว่า) แต่ในบางกรณีเราอาจไม่อยากใช้ foreach ในการทำงานแล้ว loop อะไรล่ะที่จะมาตอบโจทย์ได้ดีที่สุด

ถ้าทำงานกับ index array สิ่งที่เราเลือกต้องเป็น for อย่างไม่ต้องสงสัย แต่ถ้าต้องการทำงานกับ Associated Array(เป็น array ที่มี key เป็นอะไรก็ได้ตามใจฉัน) ล่ะ จะทำยังไงดีเพราะไม่มี key 0,1,2,… ให้ใช้งานแบบ Indexed Array คราวนี้จะแก้โจทย์นี้ยังไงกันดี

ก่อนอื่นมาวิเคราะห์กันก่อนว่า foreach มีข้อดีอะไรบ้าง

  1. ไม่ต้องระบุรอบที่ชัดเจนเหมือนกับ for loop
  2. ในแต่ละรอบจะสามารถเข้าถึง Value และ Key ของ Array นั้นๆได้

ดังนั้น ถ้าวิเคราะห์จากข้อที่ 1 เราคงต้องเลือก loop ที่ไม่จำเป็นต้องระบุรอบให้ชัดเจนอย่าง while หรือ do-while มาใช้ และข้อที่ 2 เราก็คงจะต้องมี function ที่สามารถดึง Value และ Key ของสมาชิกในรอบ Array ปัจจุบันได้ ซึ่งคำตอบของชื่อ function ที่ว่านี้ก็คือ current และ key

  • current() จะเป็นการเอาสมาชิกตัวปัจจุบันเอามาแสดงผล
  • key() จะเป็นการเอา key ของสมาชิกตัวปัจจุบันออกมาแสดงผล
  • next() จะเป็น function สำหรับเลื่อน pointer ไปยังสมาชิกตัวถัดไป

ดังนั้น code ที่ได้หน้าตาจะออกมาเป็นแบบนี้

ในแต่ละรอบจะทำการดึงค่า current(อย่าลืมใส่ parameter ด้วยนะ) ออกมา ถ้า current ยังคงมีค่าอยู่ก็จะวน loop ไปเรื่อยๆ เลยต้องมี next($arr) เพื่อเลื่อนไปยังสมาชิกตัวถัดไป

ที่สำคัญย้ำกันอีกครั้งว่า ในทุกๆ function ไม่ว่าจะเป็น current, key หรือ next ต้องใส่ parameter ที่เป็น Array เข้าไปด้วยหวังว่าคงจะได้เอาเทคนิคนี้ไปลองใช้กันบ้างจะได้เข้าใจการทำงานของ foreach กันมากขึ้น

ทำความรู้จักกับ interface ที่ชื่อว่า iterator

ทำไมต้องมี interface iterator ก็เหมือนกับบทความก่อนหน้านี้ที่เราต้องการให้ object ที่เราสร้างขึ้นสามารถใช้งานฟังก์ชั่น count ได้เหมือนกับ array เราจะใช้ interface ที่ชื่อว่า countable ในตอนนี้เราก็เลยอยากจะให้ object ที่เราสร้างขึ้นสามารถใช้งาน foreach loop ดูบ้าง

ทบทวนเรื่อง interface กันก่อน ในการเขียน PHP แบบ Object-Oriented หรือ OOP เราจำเป็นต้องรู้จักการใช้งาน interface เพราะจุดประสงค์ของ interface คือการเป็นจุดเชื่อมต่อของ code 2 ส่วนถ้าเราไม่มี interface เข้ามาคั่นกลางเราจะไม่สามารถแยก 2 ส่วนนี้ออกจากกันได้ เช่นการที่เราใช้ interface iterator จะเป็นจุดเชื่อมต่อของ code 2 ส่วนคือคำสั่ง foreach(ซึ่งเป็นของ PHP เอง) และ object ของเรา ดังนั้นจะเห็นว่าถ้าเราอยากได้ object ตัวไหนทำงานกับ foreach ได้ เราก็แค่ implement interface ที่ชื่อว่า iterator แค่นี้เอง แล้ว iterator จะบอกเราเองว่า เราต้อง implement method หรือ function อะไรบ้าง (เราสามารถเอา object ของเราไปทำงานกับ foreach ได้โดยที่ไม่ต้องเข้าไปแก้ไข code ของ PHP นี่คือประโยชน์ของ interface)

คราวนี้ก็มาเริ่มต้นใช้งาน interface iterator โดยเริ่มจาก

ต่อจากนั้นให้ implement method 5 method นี้

เพราะฉะนั้นในรอบแรกจะเข้า

  • rewind
  • valid
  • current (ถ้ามีข้อมูล)
  • key(ถ้ามีข้อมูล)

หลังจากนั้นรอบอื่นๆ ก็จะเป็น

  • next
  • valid
  • current
  • key

จนรอบสุดท้ายก็จะทำงานแค่ 2 method เท่านั้น

  • next
  • valid

สุดท้ายเราก็สามารถใช้ obj ที่เกิดจาก Customer Class กับ foreach ได้แบบนี้

Posted in PHP

การเปลี่ยน Collation ใน MySQL

ในบางครั่้งถ้าเราทำการ migrate database จาก database ยี่ห้ออื่น เช่น Microsoft SQL Server หรือ Oracle ค่า Collation ที่เราได้อาจไม่ใช่ utf-8 อย่างที่เราต้องการ(ขึ้นอยู่กับ Tool ที่ใช้ในการ convert หรืออาจลืมกำหนด Collation ก่อนที่จะทำการ Convert) รวมทั้งกรณีที่เราอยากจะเปลี่ยน collation ระหว่างทาง เนื่องจากปัญหาเรื่องการ sorting หรือ searching ด้วย

เราสามารถใช้ SQL command ในการเปลี่ยนค่า Collation โดยไม่ต้องใช้ Tool อย่าง PhpMyadmin, Navicat หรือ MySQL workbench เข้าไปเปลี่ยนค่า Collation ของแต่ละ column ทีละตัว โดยเราจะใช้คำสั่ง

หลังจากที่เรา run sql command นี้ทุก columns ของเราจะถูกเปลี่ยน collation เป็น utf8_general_ci ทั้งหมด

แต่ถ้าในกรณีที่ต้องการเปลี่ยน collation ของทุกๆ table ใน database เราต้องทำการเขียน Code(อาจเป็น PHP) เพื่อดึงรายชื่อ table ทั้งหมดออกมา แล้วก็ run query ด้านบนทุกรอบโดยเปลี่ยน ชื่อ table ไปเรื่อยๆจนครบทุก table ตามตัวอย่างด้านล่าง

แต่ code นี้จะใช้กับ php 7 ไม่ได้เนื่องจากใน php 7 จะไม่ support mysql_connect อีกต่อไป

ตัวอย่าง code เอามาจาก http://stackoverflow.com/questions/1294117/how-to-change-collation-of-database-table-column

หัดเขียน Jade ตอนที่ 1

หลังจากที่เรารู้จักวิธีการใช้งาน jade จากบทความตอนที่แล้ว ในบทความนี้เราจะมาทำความรู้จักการเขียน jade กันต่อ โดยอันดับแรกต้องเริ่มจากโครงสร้างของเอกสาร HTML โดยปกติจะใช้งาน tag เปิดและ tag ปิด แต่ใน jade จะใช้การย่อหน้าแทนดังนั้นโครงสร้างเริ่มต้นของเอกสารจะเป็นรูปแบบดังนี้

ในส่วนของโครงสร้าง HTML จะเป็นตามรูปแบบด้านบน โดยการสร้าง tag จะเป็นไปตามรูปแบบดังนี้

จะเห็นว่าเราจะเริ่มต้นด้วยชื่อ tag เช่น link(….) จะ generate เป็น parameter ใน function แต่ละตัวจะเป็น attribute ต่างๆ เช่นจากใรตัวอย่าง

จะได้ผลลัพธ์ออกมาเป็น

สิ่งที่อยู่ในวงเล็บของ jade จะถูกแตกออกมาเป็น attribute แต่ละตัวของ tag link ซึ่งในการเขียน jade เราจะใช้ pattern แบบนี้ทั้งหมด
และถ้าเราจะใส่ code javascript จะใส่แบบนี้

ใน jade จะมีการใส่ content ใน 2 รูปแบบคือ

ซึ่งเราจะได้ผลลัพธ์แบบบรรทัดเดียว ดังนี้

และอีกรูปแบบคือ

เราจะได้ผลลัพธ์แบบมีการขึ้นบรรทัดใหม่(ต้องใส่ -P เข้าไปตอนที่ พrun command ด้วย) ซึ่งเราจะได้ผลลัพธ์แบบนี้

เราเลยใส่ . ต่อท้าย script เพื่อให้มีการขึ้นบรรทัดใหม่ และนี่ก็เป็นรูปแบบในการเขียน jade แบบเบื้องต้น จะเห็นได้ว่าเราสามารถเขียน jade ได้ง่ายๆ ในบทความต่อไปเราจะทำความรู้จักกับ jade กันให้มากขึ้น

การใข้งาน Jade Template Engine

จริงๆถ้าพูดถึง Template Engine ที่มีอยู่มากมายนับไม่ถ้วน ทั้งแบบที่มากับ Framework(เช่น Razor, Twig, Blade) และมาแบบไม่สนใจใครแบบ jade จริงๆแล้วถ้าพูดถึงปริมาณการใช้งาน Template Engine ถือว่ายังน้อย แต่ก็ถือว่าเพิ่มจากเมื่อก่อนเยอะมาก ข้อดีของ Jade ก็คงจะเหมือนกับ Template Engine ตัวอื่นๆ ซึ่งหลักๆแล้วจะทำให้ Code ที่เป็น HTML นั้นอ่านง่ายขึ้น(เพราะมันเขียนสั้นลง) โดยเฉพาะ Jade เราจะเขียนแบบใช้ indention(การย่อหน้า)แทนการใช้ Tag เปิดและ Tag ปิด แบบที่เราใช้ใน HTML ซึ่งทำให้ Code ของ Jade นั้นอ่านง่ายกว่ามากๆ ลองดูตัวอย่าง Jade เมื่อ เทียบกีบ HTML แบบปกติ ตามรูป

jade

ยิ่งในปัจจุบันไฟล์ HTML มักจำมีขนาดมากขึ้นเรื่อยๆ ทำให้การ maintain ทำได้ลำบากมาขึ้น Template Engine จะมาช่วยแก้ปัญหานี้

คราวนี้เรามาดูวิธีการติดตั้งและใช้งาน Jade กัน โดยเริ่มจากการติดตั้ง เราจะใช้ node package manager(npm) เป็นตัวติดตั้ง ถ้าใครยังไม่มีก็ไปติดต้ัง nodejs กันก่อน แต่ถ้าติดตั้ง nodejs เรียบร้อย เราก็ทำการติดต้ัง jade โดยใช้คำสั่ง

หลังจากนั้นเราจะสามารถใช้งาน jade ในการ transpile(transform + compile) หรือพูดง่ายๆว่าเป็นการแปลงจาก jade ไปเป็น HTML นั่นแหละ โดยไปยัง folder ที่เราเก็บ jade อยู่ แล้ว run คำสั่ง

เราจะได้ ไฟล์ชื่อ index.html โดยไฟล์นี้จะอ่านไม่ค่อยออกเนื่องจาก ยังไม่ได้ทำการจัด format ให้เรา ถ้าเราอยากจะให้ jade จัด format ให้เรา ต้องใส่พารามิเตอร์ -P เข้าไปด้วย ตามนี้

และถ้าเราต้องการให้ทุกครั้งที่เรา save ไฟล์ index.jade ให้ทำการ transpile(แปลงไฟล์ index.html) ใหม่ทุกครั้ง ให้ใส่ -w เพิ่มเข้าไปด้วย

นอกจากนี้เรายังสามารถกำหนด destination folder หรือ folder ปลายทางสำหรับเก็บ ไฟล์ html ที่ได้จากการ transpile ด้วยคำสั่ง

ผลลัพธ์ที่ได้จะถูกนำไปเก็บไว้ที่ folder html ใน directory ปัจจุบัน และนี่ก็เป็นวิธีการติดตั้งและใช้งาน jade เบื้องต้น ในบทความต่อไปเราจะพูดถึงการเอา gulp เข้ามาช่วยให้การ transpile ง่ายขึ้น

จับคู่ Eloquent กับ Codeigniter

ถ้าพูดถึง Framework ที่ดังที่สุดในชั่วโมงนี้น่าจะเป็น Laravel แต่หัวใจหลักที่ทำให้ Laravel เป็นที่ได้รับความนิยมอย่างล้นหลาม ส่วนหนึ่งก็เพราะมี ORM(Object Relational Mapping) อย่าง Eloquent แต่ตัว Eloquent เองก็ไม่ได้จำกัดตัวเองอยู่กับ Coeigniter เท่านั้นเราสามารถเอา Eloquent ไปใช้งานโดยที่ไม่ต้องมี Framework เลยก็ได้ ลองอ่านดูได้จากบทความก่อนหน้านี้

ในบทความนี้เราจะเอาตัว Eloquent นี้มาใช้ใน framework ที่มีขนาดเล็กอย่าง Codeigniter กันดูบ้าง โดยเราจะต้องทำการติดตั้ง Eloquent เข้าไปใน Codeigniter ตามขั้นตอนต่อไปนี้

  1. download Eloquent ผ่านทาง composer ด้วยคำสั่ง

    ชื่อ package ของ Eloquent คือ illuminate/database ซึ่ง Core ของ Laravel จะมีชื่อเดียวกันคือ illuminate
  2. ทำการ require ไฟล์ autoload.php เข้ามา โดยเปิดไฟล์ index.php ใน folder ของ CodeIgniter

    ป้องกันการ Error แนะนำว่าวางไว้ก่อน บรรทัดที่ require ‘core/CodeIgniter.php’ เพื่อความชัวร์
  3. ทำการ load ตัว Eloquent ขึ้นมาใช้งานโดยไปที่ไฟล์ database.php(ที่เลือก database.php เพราะถ้าจะติดต่อ database ยังไงก็ต้อง load ไฟล์นี้ขึ้นมาทำงาน และไฟล์นี้ก็เกี่ยวข้องกับการติดต่อ database โดยตรง)

หลังจากนั้นเราจะสามารถเรียกใช้งาน Query Builder ผ่านทาง DB::(ตามด้วยชื่อ method ที่ต้องการ)
แต่ถ้าต้องการสร้าง Model(ใช้งานแบบ ORM) เราต้องให้ model ของเรา extend จาก Illuminate\Database\Eloquent\Model แทนที่จะเป็น CI_Model แบบของเดิม หลังจากนั้นเราจะสามารถเรียกใช้งานได้โดยใช้ (ชื่อ Model)::(ตามด้วยชื่อ method ที่ต้องการ)

ในรายละเอียดของ Eloquent สามารถเข้าไปอ่านได้ที่ document ของ Laravel หวังว่าคงจะถูกใจสาวก Codeigniter กันนะครับ