Kotenarok

   ในบางสถานการณ์ที่เราต้องการจะใส่ tag script (หรือ tag อื่น ๆ ที่อยากจะ escape ไม่ให้ Vue.js render) ภายใต้ template ของ Vue.js โดยเฉพาะเวลาทำงานกับ Payment gateway มักจะต้องใส่ script เพิ่มเข้ามา <component is="script" src="https://www.example.com/script.js" ></component> ให้ใช้ฟีเจอร์ Dynamic Components เข้ามาช่วย ใส่ script เข้าไปใน attribute is ได้เลย

 วิธีดึงเฉพาะชื่อ branch ปัจจุบันที่เราอยู่มาดูโดยใช้ git cmd git rev-parse --abbrev-ref HEAD อ้างอิง:  How to get the current branch name in Git? - Stack Overflow

 สมมติเรามี getter ชื่อ foo ตามโค้ดด้านล่างที่รับ argument 1 ตัว getters: { foo: (state) => (bar) => {      return bar; } } เราสามารถประกาศใน computed ได้แบบนี้ computed: { ...mapGetters([ 'foo', //ส่งชื่อ getter ที่ต้องการใช้เข้าไปตรง ๆ ได้เลย ]) } จากนั้นเวลาเรียกใช้ก็สามารถเรียกใช้ได้เหมือน getter ปกติเลย created() { console.log(this.foo('hello')); // logs "hello" } อ้างอิง:  https://stackoverflow.com/questions/43807123/pass-params-to-mapgetters

 การส่งข้อมูล raw JSON body (แบบที่ใช้ใน Postman) ด้วย Guzzle $url = 'https://www.example.com'; $client = new \GuzzleHttp\Client(); $data = [//ข้อมูลที่ต้องการส่ง 'foo' => 'bar', 'name' => 'test', ]; $response = $client->request("POST", $url, [ 'json' => $data, 'headers' => [ 'Content-Type' => 'application/json; charset=utf-8', 'Accept' => 'application/json', ], ]);

 ในบางโปรเจ็กต์เราอาจจะต้องแยก site ภายในโปรเจ็กต์เดียวกันเป็นหลาย ๆ site เช่น หน้าบ้านให้ user ใช้ site นึง และสำหรับ admin ใช้อีก site นึงในโปรเจ็กต์เดียวกัน อาจะเกิดปัญหาว่าต้องเขียน webpack.mix.js หลายร้อยบรรทัดจนลายตา มันอาจจะดีกว่าถ้าสามารถแยกเป็น webpack.mix.front.js และ webpack.mix.admin.js ได้ เพื่อง่ายต่อการจัดการ ซึ่งในบทความนี้เราจะมาสอนวิธีแยกไฟล์กันครับ สิ่งที่ต้องเตรียม ต้องโหลด minimist  มาใช้สำหรับจัดการ argument ที่เราจะส่งผ่านเข้าไปทาง command line ลงมือทำกันเลย สร้างไฟล์ขึ้นมาตาม site ที่เราต้องการ ในตัวอย่างนี้จะขอแบ่งเป็น admin กับ front 2 ไฟล์ รวมถึงต้องมีไฟล์หลักคือ webpack.mix.js 1 ไฟล์ตามนี้นะครับ ไฟล์ webpack.mix.js เนื้อหามีดังนี้ const { env } = require('minimist')(process.argv.slice(2));//รับ aurgument หลัง -- มา ซึ่งรับแต่ชื่อ env if (env && env.site) { require(`${__dirname}/webpack.mix.${env.site}.js`); } โค้ดตามนี้จะรับค่า env.site มาจาก command line เวลาเราสั่ง yarn prod หรือ yarn dev แล้วตามด้วย --env.site={ชื่อ site ที่

v-model เป็นพื้นฐานสำคัญของ Vue.js ที่ใช้เพื่อผูกข้อมูลกับตัวแปร เมื่อ user กรอกข้อมูลเข้ามาจะทำให้ตัวแปรที่ผูกนั้นได้รับ value จาก user ด้วย หรือในทางกลับกันถ้าหาก โค้ดของเราแก้ไขค่าตัวแปรนั้น user ก็จะเห็นค่าที่เปลี่ยนไปตามที่โค้ดเราเขียนเช่นกัน เรียกว่า "two-way data binding" v-model สามารถใช้งานได้กับ input พื้นฐานทั้งหมด ดูโค้ดตัวอย่างได้ตามนี้ Input Text <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> จากตัวอย่างด้านบนเราผูก value กับตัวแปรชื่อ message ผ่าน v-model เมื่อ user กรอกข้อมูลเข้ามาที่ input ข้อความที่แสดงตรง <p> ก็จะอัพเดทตามไปด้วย ตัวอย่างอื่น ๆ Textarea <span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines"></textarea> Checkbox <input type="checkbox" id="checkbox" v-model="checked

 Trait ใน PHP จะเหมือนกับเป็นลูกผสมระหว่าง class แม่ที่ทำมาให้ extends และ interface โดยที่ trait นั้นสามารถถูกเรียกใช้ได้หลาย trait ใน class เดียวกัน เหมือนการ implements interface แต่ตัว trait นั้นไม่ต้องประกาศ function เป็น abstract เลย ประโยชน์ของ trait คือการที่เรารวมเอา "ลักษณะ" ของโค้ดที่ใช้งานบ่อยมาไว้ในที่เดียวเพื่อให้สะดวกต่อการนำไปใช้ซ้ำ คุณสมบัติของ Trait เรียกใช้ได้มากกว่า 1 trait เหมือนการ implements interface อยากประกาศ function หรือ property ก็ทำได้หมด ทั้ง public, protected, private หรือ static (ข้อนี้จะให้ความรู้สึกเหมือน extends class) การเรียกใช้ trait จะเสมือนกับการก๊อปโค้ดทั้งยวงใน trait ไปแปะใน class ที่เรียกใช้ และใช้งานได้ตามนั้นเลย โดยเฉพาะ scope หากประกาศเป็น private ไว้ ก็จะใช้ได้เฉพาะภายใน class ที่เรียกใช้ trait <?php trait ExampleTrait { private privateFunc() { echo 'This is private function'; } } class ParentClass { use ExampleTrait; //เรียกใช้ trait หากมีมากกว่า 1 ขั้นด้วย , public function parentFunc() {

Recursive function คือการที่ function เรียกใช้ตัวมันเองวนไปเรื่อย ๆ จนกว่าจะถึง break case คือหยุดเรียก function โดยมันเป็นรูปแบบการ loop รูปแบบหนึ่ง ซึ่ง recursive function จะพบเห็นได้ในทุกภาษาคอมพิวเตอร์ แต่ในบทความนี้จะขอเขียนโค้ดตัวอย่างแบบไม่ยึดติด syntax ของภาษาใดภาษาหนึ่งละกัน ตัวอย่างที่ 1: Factorial ตัวอย่างแรกขอยกอะไรง่าย ๆ อย่าง factorial  ละกัน function factorial(n) { if (n <= 1) { return 1; } return n * factorial(n - 1); } จากตัวอย่างโค้ดจะเห็นว่า function มีการเรียกตัวมันเอง หากเราเรียก function โดยส่งเลข 5 ให้ไป การทำงานจะเป็นดังรูปนี้ จะสังเกตเห็น if statement ตรงนี้คือ break case จะไม่เรียก function ต่อแล้วเพื่อให้จบการทำงาน ตัวอย่างที่ 2: Fibonacci Fibonacci จะเจอบ่อยมากในโจทย์จำพวก recursive function หน้าตาโค้ดจะเป็นตามด้านล่างนี้ function fib(n) { if (n <= 1) { return n; } return fib(n - 1) + fib(n - 2); } อันนี้จะเริ่มยากขึ้นมานิดนึง เพราะแบ่งการเรียก function ออกมาเป็น 2 ตัวด้วยกัน ถ้าเราส่งเลข 5 เข้าไปจะได้ตามภาพนี้ สรุป Recursiv

 บทความนี้ผมจะถือว่าผู้อ่านมีความรู้เรื่อง Vue.js มาแล้วในระดับหนึ่ง เนื่องจากไม่ใช่บทความสอนการเขียน Vue.js แต่เป็นส่วนเสริมเรื่องการทำ component ขึ้นมาเองแล้วรองรับการใช้งาน v-model (ถ้ายังไม่รู้ว่า v-model คืออะไร แนะนำให้ศึกษาเพิ่มเติมมาก่อน) ทำให้รองรับ v-model ยังไง? v-model มันคือการส่งข้อมูลไปกลับระหว่าง parent component และ child component ซึ่งถูกเรียกว่า two-way binding คือค่าของตัวแปรจะถูกส่งไปกลับระหว่าง 2 component นี้ ค่าตั้งต้นของการทำ v-model คือ component จะรับค่าผ่าน props ที่ชื่อว่า value และส่งค่ากลับไปด้วย event ที่ชื่อ input ขอยกตัวอย่างโค้ดง่าย ๆ เป็น EmailInput.vue ตามนี้ละกันครับ <template> <input type="email" @input="handleInput" /> </template> <script> export default { props: ['value'], data: () => ({ email: null }), created() { if (this.value) { this.email = this.value; } }, methods: { handleInput (e) { this.email = e.target.value; this.$em

มาถึงคราวของ Interface หลังจากจบบทความ Abstract class ไป โดยตัว Interface จะมีความแตกต่างตรงที่ function ทุกตัวที่อยู่ในนี้ต้องเป็น public และ abstract function ทั้งหมด ซึ่งหน้าที่ของ Interface คือการกำหนดความสามารถบางอย่างให้กับ Class ที่ implements Interface ไปใช้ ซึ่งสามารถ implements ได้มากกว่า 1 Interface มาดูตัวอย่างโค้ดกัน โค้ดชุดนี้นำมาจากเว็บ  W3Schools Online Web Tutorials  โดยในโค้ดจะเป็น class เกี่ยวกับสัตว์ Interface Animal บอกว่า สัตว์สามารถทำเสียงได้ แต่จะทำเสียงอะไรก็ขึ้นกับ class ของสัตว์ที่ implements ไปนั่นเอง <?php // Interface สัตว์บอกว่าสัตว์ทำเสียงร้องได้ interface Animal { public function makeSound(); } // Class definitions class Cat implements Animal { public function makeSound() { echo " เมี้ยว "; } } class Dog implements Animal { public function makeSound() { echo " โฮ่ง "; } } class Mouse implements Animal { public function makeSound() { echo " จี๊ด "; } } // สร้าง object ของ class สัตว์ต่าง ๆ

 บทความนี้จะออกแนววิชาการหน่อย ส่วนตัวคิดว่ามีโอกาสน้อยที่เราจะได้เขียน Abstract class ไว้ใช้เอง ส่วนมากจะเจอตาม library หรือ framework ต่าง ๆ ที่ทำมาให้คนอื่นใช้เสียมากกว่า Abstract Class คืออะไร Abstract class คือ class ที่"ไม่สมบูรณ์" กล่าวคือมี abstract function ประกอบอยู่ (จริง ๆ ถึงไม่มีก็ประกาศเป็น Abstract class ได้ แต่มักไม่ทำกัน แต่ถ้ามี abstract function เมื่อไหร่ compiler จะบังคับให้เราประกาศเป็น Abstract class ทันที) โดย abstract function จะเป็น function ที่ถูกบังคับให้ class ลูก override function ทับเมื่อ extends abstract class มาใช้ ประโยชน์ของมันคือการวาง guideline ให้คนอื่นมาใช้เพื่อพัฒนาโค้ดของเราต่อไป อาจจะมีบาง function ที่ต้องโดนเรียกใช้แน่ ๆ แต่ content ของ function จะขึ้นอยู่กับ class ลูกที่ extends ไป ยกตัวอย่าง <?php abstract class LivingThings { protected $scientificName;//สิ่งมีชีวิตมีชื่อวิทยาศาสตร์ abstract public function hasLegs() : boolean; abstract public function canFly() : boolean; } // Child classes class Cobra extends Living

 async, await เป็นตัวช่วยจัดการ Promise ให้ดูอ่านง่ายขึ้น จะเห็นผลมากหากเราต้องจัดการกับ Promise มากกว่า 1 ตัว การใช้ async มีข้อจำกัดว่าต้องใช้กับ function เท่านั้น เราจะลองแปลงโค้ดจากบทความที่แล้ว ให้อยู่ในรูปของ async / await async function test() { let myPromise = new Promise((resolve, reject) => { let x = 0; //ลองสลับเลขเพื่อดูผลลัพธ์เมื่อสำเร็จและล้มเหลว if (x == 0) { resolve("OK"); } else { reject("x must be 0"); } }); try { let msg = await myPromise;//await เพื่อรอรับผลลัพธ์จากกรณีที่สำเร็จ console.log("Success: " + msg); } catch (msg) { console.log("Error: " + msg);//ใช้ try / catch ดักกรณีที่ล้มเหลว } } test();//เรียกใช้ function ให้ทำงาน อ้างอิง: async function - JavaScript | MDN (mozilla.org) Async/await (javascript.info)

 ก่อนจะไปเริ่มกัน เราต้องเข้าใจคำว่า asynchronous ก่อนเป็นอันดับแรก asynchronous คือการทำงานแบบไม่ต้องการรอผลลัพธ์ ยกตัวอย่างง่าย ๆ เช่น การรอคิวเข้าร้านอาหาร ถ้าเป็น synchronous คือเราต้องรอจนกว่าจะได้คิว (เหมือนรอผลลัพธ์) ถึงจะเข้าไปในร้านได้ แต่ถ้าเป็นการทำงานแบบ asynchronous เราจะไม่ยืนรอคิวหน้าร้าน เราจะไปเดินเล่นเตร็ดเตร่ หรือทำธุระอย่างอื่น จนกว่าร้านค้าจะโทรมาตามเรา (ร้านค้าบอกผลลัพธ์เราว่าได้คิวแล้ว) แล้วจึงค่อยกลับมาเข้าร้าน หมายเหตุ: เหมือนเคย หากใครยังไม่เข้าใจ arrow function แนะนำให้กดกลับไปอ่านก่อนนะครับ Promise คืออะไร? Promise คือ object ตัวนึ่งที่ใช้จัดการการทำงานแบบ asynchronous โดยตัว Promise จะมีการให้เราจัดการด้วยว่าถ้าการทำงานสำเร็จให้ return  อะไร หรือถ้าล้มเหลวให้ return อะไร  การจัดการกับงานที่สำเร็จเราจะใช้ .then ในการจัดการ ส่วนงานที่ล้มเหลวเราจะจัดการด้วย .catch  const promiseA = new Promise( (resolve, reject) => { setTimeout(() => {//ให้ทำงานส่วนนี้หลังจาก 1 วินาที (1000 millsec) resolve(777); //ใช้ resolve บอกว่างานสำเร็จ และคืนค่า 777 ไ

 Array.sort() โดย default ของมันคือการแปลงค่าใน array เป็น string แล้วจับมาเรียงลำดับตามตัวอักษร แต่ก็รองรับการทำ custom sorting แบบอื่น ๆ ซึ่งอยู่ที่เราเขียนเลยว่าจะให้มันทำงานยังไง บทความนี้ตัวอย่างผมจะเน้นเขียนแบบ Arrow function หากใครยังไม่เข้าใจให้ลองอ่านวิธีการเขียนก่อนนะครับตาม link ตัวอย่างการใช้แบบ default const months = ['March', 'Jan', 'Feb', 'Dec']; months.sort();//เรียกแบบนี้ได้เลย console.log(months); // ค่าที่ได้: Array ["Dec", "Feb", "Jan", "March"] const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1); // ค่าที่ได้: Array [1, 100000, 21, 30, 4] จะเห็นว่ามันไม่มองค่าตัวเลขเป็นตัวเลข แต่เป็นการเทียบ string แทน โครงสร้างโค้ดการทำ custom sorting ในตัวอย่างด้านล่างจะเป็น callback function ที่ใช้สำหรับโยนให้ .sort() โดยค่า a และ b จะตั้งชื่อยังไงก็ได้ และเราจะทราบแค่ว่าเป็นค่า 2 ค่าที่มาเทียบกันเท่านั้น โดยเบื้องหลังการทำงานก็ขึ้นอยู่กับ compiler ของแต่ละ browser หรือ platform ว

 .reduce() เป็น built-in function ของ Array ใน JavaScript ใช้งานเพื่อที่จะจัดการกับ array ก้อนนั้นเพื่อให้ได้ค่า ๆ นึงออกมา ยกตัวอย่างเช่น การทำ function sum เพื่อบวกรวมตัวเลขที่อยู่ใน array ทั้งหมดออกมาเป็นค่า sum ค่าเดียว โดย function นี้จะมี syntax หน้าตาแบบนี้ arr.reduce(callback ( accumulator, //ผลจากแต่ละรอบ loop currentValue, //ค่าของสมาชิก array ปัจจุบัน [, index //(optional) index ของ array ปัจจุบัน [, array]] //(optional) เป็น callback ของก้อน array ที่เรานำมาใช้เรียก .reduce โดยปกติมักไม่ได้ใช้ค่านี้ ) [, initialValue] //(optional) ค่าตั้งต้นของ function ซึ่งถ้าเราไม่ใส่ function จะใช้สมาชิกตัวแรกของ array เป็นค่าตั้งต้น //สังเกตดี ๆ คือค่าตั้งต้นนี้จะอยู่นอก callback function ) ขอใช้ตัวอย่าง function sum จากบทความ " Rest parameters คืออะไร " มาเป็นตัวอย่างอีกครั้งละกัน ตัวอย่างแรกลองเขียน callback function ทั่วไปก่อน function sum(...args) { return args.reduce(function(accumulator, currentValue) { return accumulator + currentValue

 บทความที่ก่อนได้เคยพูดถึง Spread syntax (...)  ไปแล้ว รอบนี้มาพูดถึงสิ่งที่หน้าตาเหมือนกันแต่ใช้งานแตกต่างกันโดยสิ้นเชิงคือ Rest parameters (Rest syntax) เป็นการประกาศ function ขึ้นมาให้สามารถรับ arguments "เท่าไหร่ก็ได้" โดยค่า arguments ที่ถูกส่งมาจะถูกรวบเป็น array ก้อนเดียว แล้วนำไปใช้ต่อ ซึ่งโดยปกติจะพบเห็นได้ทั่วไปใน built-in function ที่มีมาให้ใช้อยู่แล้ว ยกตัวอย่างเช่น Math.max(arg1, arg2, ..., argN); //หาค่าสูงสุด console.log(arg1, arg2, ..., argN); // log ตัวแปรออกมาดูค่าในหน้าต่าง Console แต่เราเองก็สามารถนำมาใช้ประโยชน์ในการสร้าง function เพื่อไว้ใช้งานเองหรือเผื่อให้คนอื่นนำไปใช้งานได้สะดวกขึ้นก็ได้ ขอยกตัวอย่างเป็น function sum ไว้ใช้บวกรวมตัวเลขทั้งหมดที่ส่งเข้ามาใน function function sum(...args) { let total = 0; for (let num of args) { total += num; } return total; } console.log(sum(1, 2)); //3 console.log(sum(1, 2, 3)); //6 console.log(sum(1, 2, 3, 4, 5)); //15 แต่ function ด้านบนจะเจอปัญหาว่าถ้าค่าที่ส่งเข้ามาไม่ใช่ตัวเลขล่ะ? บางค่

 Arrow function expressions คือการเขียน function ในรูปแบบอย่างย่อ ทำให้สะดวกในการเขียนมากขึ้น web browser ยุคใหม่ก็ support กันหมดแล้ว แต่จะเห็นว่าใช้แพร่หลายคือกับ node.js หรือกับ JavaScript framework ตัวใหม่ ๆ ซึ่งส่วนมากจะใช้กับ closure function แปลง function ปกติเป็น Arrow function // function แบบปกติทั่วไป function (a){ return a + 100; } // แปลงเป็น Arrow Function // 1. ลบ "function" และใส่ => เข้าไปแทนระหว่างวงเล็บของ argument และปักกาเปิด { (a) => { return a + 100; } // 2. ลบปีกกาและคำว่า "return" ออก (a) => a + 100; // 3. ลบวงเล็บของ argument ออก a => a + 100; ถ้า argument มีหลายตัว // Traditional Function function (a, b){ return a + b + 100; } // Arrow Function (a, b) => a + b + 100; // เอาวงเล็บ argument ออกไม่ได้ ถ้า function ไม่มี argument // Traditional Function (no arguments) let a = 4; let b = 2; function (){ return a + b + 100; } // Arrow Function (no arguments) let a = 4; let b = 2; () => a + b + 100; //ใ

 Spread syntax คือการนำค่าของตัวแปรที่มีลักษณะเป็น collection ไม่ว่าจะ array หรือ object มาแจกแจงกระจายออกมาใช้งาน ซึ่งจะคนละอย่างกับ Rest syntax (แต่ใช้ ... เหมือนกัน) โดย Rest syntax จะเป็นการประกาศให้ function รับ argument กี่ตัวก็ได้ ซึ่งจะเขียนในบทความถัดไป Spread syntax จะมีการใช้งานหลัก ๆ อยู่ 3 รูปแบบดังนี้ ใช้ส่ง arguments ให้ function ยกตัวอย่าง function sum ตามภาพ รับ argument 3 ตัว เราสามารถโยน array ที่มีสมาชิก 3 ตัวด้วย Spread syntax เข้าไปใน function ได้เลย function sum(x, y, z) { return x + y + z; } let numbers = [1, 2, 3]; console.log(sum(...numbers)); // 6 และหากเรานำไปใช้กับ function ที่ประกาศด้วย Rest syntax จะมองเห็นความเจ๋งของ Spread syntax ได้ชัดขึ้น function sum(...theArgs) { //theArgs รับเข้ามาจะเป็น array return theArgs.reduce((previous, current) => { return previous + current; }); } let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(sum(...numbers)); // 55 ใช้งานกับ array array ใน JavaScript จะมีความพิเศษอยู่อย่างหนึ่

 ในบทความนี้ผมจะถือว่าทุกคนมีความรู้พื้นฐานเกี่ยวกับ Laravel Framework มาแล้วระดับนึงในเรื่องของโครงสร้างไฟล์ แต่อย่างไรก็ตาม หากสงสัยก็คอมเม้นท์ถามไว้ได้ครับ มาเริ่มกันเลย ก่อนอื่นผมจะสร้าง folder ชื่อ Helpers ไว้ภายใต้ folder app ของ framework เพื่อง่ายจ่อการจำแนกไฟล์ จากนั้นสร้างไฟล์ขึ้นมา ตั้งชื่อตามหน้าที่ของ function ด้านในไฟล์นั้น ๆ ในตัวอย่างนี้ผมจะสร้างไฟล์ชื่อว่า NumberHelper.php ไว้จัดการกับตัวเลขต่างๆ ต่อมาผมจะสร้าง function ชื่อว่า numberInRange ไว้ตรวจเช็คว่าตัวเลขที่ใส่เข้ามามีค่าระหว่าง(between)อีก 2 ตัวเลขหรือไม่ โดยมีเนื้อหาของ function ดังนี้ if (! function_exists ( 'numberInRange' )) {      function numberInRange ( $val , $min , $max ) {          return ( $val >= $min && $val <= $max );     } } function_exists มีไว้เพื่อป้องกันการทับซ้อน function ที่มีอยู่แล้วในโปรเจ็กต์ของเรา หากไม่มี function จึงค่อยประกาศ function ถัดมาให้เปิดไฟล์ที่ชื่อว่า composer.json ซึ่งอยู่ที่ root ของโปรเจ็กต์ ในไฟล์ เลื่อนลงจนถึงส่วนของ autoload เพิ่มโค้ดส่วนนี