Month: January 2019

ทำ Route ใน Vue

บทความนี้ผมจะมาทำ Route ใน Vue.js กันแบบง่าย ๆ ครับ เพื่อจะสามารถนำไปต่อยอดได้ เริ่มด้วยไฟล์ main.js ครับ ตามโค้ดด้านล่าง จากนั้นก็ไฟล์ App.vue ครับ ตามโค้ดด้านล่าง จากโค้ดเรามีการ import router ดังนั้นใน Folder router ผมได้สร้าง index.js ไว้ตามตัวอย่างโค้ดด้านล่างครับ จากโค้ดผมจะทำการ route login หน้าแรก แล้วก็ 404 ไว้นะครับ ส่วนนอกเหนือจากนั้นผมจะให้มันทำการ redirect ไปที่ path 404 นะครับ จากนั้นเราไปดูที่ views กันต่อครับ ซึ่งผมได้สร้าง index.vue ไว้นะครับ เพื่อให้เป็นหน้าแรกที่เข้ามา โค้ดก็จะได้ตามด้านล่างครับ จากนั้นใน views login ผมก็จะเขียนโค้ดง่าย ๆ ไว้ดังนี้ครับ เพียงแค่นี้เราก็ได้ route แบบง่าย

Invalid Scopes: publish_actions. This message is only shown to developers

วันนี้ลองทำ facebook login ครับ แต่ลองแล้วกลับเกิด Error ว่า Invalid Scopes: publish_actions. This message is only shown to developers. Users of your app will ignore these permissions if present. Please read the documentation for valid permissions at: https://developers.facebook.com/docs/facebook-login/permissions ตามรูปด้านล่าง จากภาพนี้เกิดจากว่า publish_actions ไม่ได้รับการอนุญาตินะครับ แล้วก็ให้ลองไปดู permission ได้ที่ https://developers.facebook.com/docs/facebook-login/permissions ดังนั้นในบทความนี้ผมเลยแก้ด้วยวิธีการเอา publish_actions ออกไปก่อนครับ ซึ่งผมใช้ codeigniter แล้วใช้ตัวเสริมเป็นตัวนี้ครับ https://github.com/darkwhispering/facebook-sdk-codeigniter ดังนั้นผมเลยแก้โดยไปแก้ใน facebook.php แล้วเอา publish_actions

Add Vuetify ใน Vue project

Vuetify เป็น framework สำหรับ vue.js ถูกสร้างขึ้นมาเพื่อเป็น component สำหรับการออกแบบเป็น Material Design ดังนั้น บทความนี้ผมต้องการที่จะ add vuetify เข้าไปใน vue project ครับ ส่วนวิธีการนั้นผมจะใช้คำสั่ง ตามด้านล่าง เมื่อรันแล้วจะได้ดังตัวอย่างด้านล่าง ซึ่งตัวอย่างด้านล่างผมเลือกติดตั้งแบบ Default ไปนะครับ เมื่อได้แล้วลองใช้คำสั่ง npm run serve ดูครับ จะได้หน้าตาใหม่สวย ๆ ตามรูปด้านล่างครับ จาก console ตรงสีแดง ๆ จะเห็นว่ามันมีการเปลี่ยนแปลงแก้ไขไฟล์อะไรบ้าง ลองเข้าไปดูไฟล์แต่ละไฟล์ จะพบว่า โค้ดมีการแก้ไขครับ ซึ่งเป็นวิธีที่ง่ายมากในการติดตั้ง vuetify เพราะเราไม่ต้องไปแก้แต่ละไฟล์เอง

ติดตั้งและลองทดสอบ Vue.js

บทความนี้ผมจะมาลองติดตั้งและทดสอง Vue กันครับ ซึ่งผมจะทำไปด้วยเขียนไปด้วย ผิดพลาดประการใดก็ขออภัยไว้ ณ ที่นี้ด้วยครับ ผมจะทำการติดตั้ง Vue/cli โดยใช้คำสั่ง เมื่อติดตั้ง vue/cli ได้แล้วจะเป็นประมาณนี้ ต่อไปผมจะสร้าง app โดยใช้ vue โดยใช้คำสั่ง ตามด้านล่าง แต่ต้องเข้าไปใน Folder ที่เราต้องการสร้าง app ด้วยนะครับ ในที่นี้ผมอยู่ที่ easyloansystem ครับ จากนั้นก็รันเลย จากนั้นเมื่อได้แล้ว เราก็มาสร้างโปรเจ็คกัน โปรเจ็คที่ผมจะสร้างชื่อว่า easyloansystem ดังนั้นผมเลยสร้างโดยใช้คำสั่ง จากนั้นตรง option การติดตั้งผมเลือกเป็น Default ก่อนนะคับ เมื่อเสร็จแล้วก็จะได้ดังตัวอย่างด้านล่าง เมื่อลองไปดูโครงสร้างโพลเดอร์ก็จะได้ประมาณด้านล่าง จากนั้นเราลองไปรัน project เพื่อทดสอบดู ด้วยคำสั่ง เมื่อรันคำสั่งแล้วก็ได้ประมาณนี้ จาก console ข้างบน app จะรันอยู่ที่ port 8082 ดังนั้น ลองเข้าไปเช็คที่ http://localhost:8082/

‘Set-ExecutionPolicy’ is not recognized as an internal or external command

howto นี้เกิดขึ้นจากผมต้องการ update npm แล้วก็เกิด Error ดังนี้ ถ้าดูจากรูปก็ได้ดังนี้ วิธีการให้เราไปรันใน shell ครับ โดยวิธีการเปิด power shell นั้นให้คลิกขวา แล้วเลือก power shell ตามรูปด้านล่าง เมื่อกดเข้าเปิด จะปรากฎ windows power shell ขึ้นมา ให้เราลองรันคำสั่งใหม่ก็จะได้ ดังตัวอย่างรูปด้านล่าง

Update node version

สวัสดีครับ บทความนี้ผมจะทำการ Update node version ครับ ซึ่งตอนแรกผมต้องการจะติดตั้ง vue/cli แต่กลับปรากฎ Error ดังตัวอย่างด้านล่าง ถ้าดูจาก Error ข้างบน จะพบว่า ติดตั้ง vue/cli version 3.3.0 ไม่ได้ เพราะต้องการ node version >=8 แต่พบว่า node เป็น version 6.11.3 ผมลองไปเช็ค node ดูก็จะได้ดังรูปด้านล่าง node version ของผมเป็น version 6.11.3 ดังนั้นผมจะอัพเดทเป็น version ใหม่ โดยวิธีการอัพเดทนั้นผมจะไปดาวน์โหลดมามาใหม่ที่เว็บ https://nodejs.org/en/ แล้วก็ติดตั้งใหม่ครับ พอได้แล้วผมก็ทำการ check ดูอีกรอบก็เปลี่ยนเป็น version ใหม่แล้วครับ ตามรูปด้านล่าง

ลองใช้ JWT แบบง่าย ๆ ใน CodeIgniter

บทความนี้ผมจะมาลองใช้ jwt ใน CodeIgniter แบบง่าย ๆ กันครับ ก่อนอื่นเราก็ต้องมาติดตั้ง jwt กันก่อน ซึ่งวิธีการติดตั้งผมจะใช้การ add library ไว้ใน CodeIgniter ครับ ซึ่งวิธีการผมได้เขียนไว้แล้วในบทความ Add Library ใน CodeIgniter ให้ทำตามนี้ครับ พอได้แล้วเราก็พร้อมสำหรับใช้งาน jwt แล้วละ ต่อไปผมจะลองใช้ jwt ดูครับ อันดับแรกเราก็ต้องไปกำหนดโค้ดว่าให้ใช้ jwt ก่อนโดยเขียนโค้ดด้านล่าง ต่อไปก็ไปลองสร้าง encode กับ decode กันดูครับ ตามตัวอย่างโค้ดด้านล่าง ลองนำไปรันดูก็จะได้ผลลัพธ์ดังตัวอย่างด้านล่าง จากผลลัพธ์ที่ได้ จะมีส่วนแรกเป็น ส่วนที่ encode แล้ว จากนั้นส่วนด้านล่างจะเป็นข้อมูลที่เราได้ decode ออกมา ลองนำไปปรับใช้กันดูครับ

Add Library ใน CodeIgniter

บทความนี้เป็นบทความสั้น ๆ เกี่ยวกับการ Add Library ใน codeIgniter ครับ ซึ่ผมต้องการ Add jwt ใน CodeIgniter เรามาเริ่มกันเลยครับ เริ่มแรกเราก็ไปดาวน์โหลด jwt มาก่อนครับ จากในเว็บ https://jwt.io/ ผมจะเลือกส่วนของ php firebase/php-jwt ซึ่งต้องใช้คำสั่ง ตามด้านล่าง เมื่อเสร็จแล้วเราก็จะได้โค้ดของ jwt ให้เราก็อปโพลเดอร์ verdor ไปไว้ในส่วนของ system/libraries/ หรือว่าจะเอาไว้ใส่ส่วนของ application/libraries/ นี้ก็ได้ จากนั้นผมจะสร้าง Library ขึ้นมาชื่อว่า JWTVendor.php จากนั้นข้างในผมจะทำการเรียก jwt ที่ดาวน์โหลดมา ตามตัวอย่างโค้ดด้านล่าง เราได้ Library แล้ว ต่อไปเราก็ไปเพิ่มใน config/autoload.php เพื่อเรียกใช้ library ที่เราได้สร้างขึ้นมา ตามตัวอย่างโค้ดด้านล่าง เพียงแค่นี้เราก็ได้ Library ที่ CodeIgniter สามารถเรียกใช้งานได้แล้ว

Validate Form ง่าย ๆ โดยใช้ Bootstrap Validator

สวัสดีครับ บทความนี้ผมจะมาใช้ Bootstrap Validator ในการ validate form กันครับ Form ที่ผมจะ Validate นี้จะเป็น Form สำหรับ Register ครับ ก่อนอื่นเราก็ไปดาวน์โหลดและติดตั้ง Bootstrap Validator กันก่อนครับ ซึ่งวิธีที่ผมจะใช้ติดตั้งผมจะใช้ bower ในการติดตั้งนะครับ โดยผมจะพิมพ์คำสั่ง ส่วนใครที่ยังไม่ได้ติดตั้ง bower ก็ให้ไปติดตั้งได้นะครับ โดยใช้คำสั่ง ส่วนใครอยากติดตั้งโดยใช้วิธีอื่นเช่น การดาวน์โหลด หรือติดั้งโดย npm หรือจะใช้แบบ cdn ก็ใช้ได้เลยครับ สามารถดูรายละเอียดอื่น ๆ ได้ที่ https://github.com/1000hz/bootstrap-validator จากนั้นใน Form ให้เราใส่ data-toggle=”validator” ไปด้วย ดังตัวอย่างโค้ด ในส่วนของ lib ก็แอดเพิ่มไปด้วยนะครับ แค่นี้เราก็พร้อมแล้ว ต่อไป เราไปดูตัวอย่างโค้ดที่ผม validate กันครับ ซึ่งฟอร์ม Register

ใส่ encode ใน password ตอน login กับ logout

จากบทความก่อน ๆ เราได้สร้าง register ในชื่อบทความ ทำระบบ Register แบบง่าย ๆ โดยใช้ CodeIgniter และได้สร้าง login ในบทความชื่อ ทำระบบ login แบบง่าย ๆ โดยใช้ CodeIgniter แต่ระบบยังไม่ค่อยสมบูรณ์เพราะยังไม่ได้ encode password เวลาเก็บเข้าฐานข้อมูลตอน register กับตอน login ดังนั้นบทความนี้ เราเลยยกตัวอย่างโค้ดในการ encode password แบบง่าย ๆ กันครับ ตัวอย่างโค้ด register กับ login อยู่ใน Controller ที่ชื่อว่า Authen ดังนั้นผมจะ encode ที่ไฟล์นี้เลย ตัวอย่างโค้ด register กับ login ก่อน encode ตามตัวอย่างด้านล่าง ต่อไปผมจะเขียนฟังก์ชันขึ้นมาชื่อว่า encodePassword แล้วในนี้