พฤษภาคม 2016 - Coding Thailand's Blog

6 ขั้นตอน การเตรียมตัวก่อนเขียน Angular 2 ครับ

30/05/201630/05/2016 โค้ชเอก Leave a comment

ความรู้พื้นฐานที่ต้องมี

HTML, CSS, Modern JavaScript (ES2015/ES6)
TypeScript https://www.typescriptlang.org/

การเตรียมเครื่องมือ

ติดตั้ง Node.js และ npm ดาวน์โหลด และติดตั้งได้ที่ https://nodejs.org/en/
ติดตั้ง Editor ในที่นี้จะยกตัวอย่าง Atom ครับ ดาวน์โหลดและติดตั้งได้ที่ https://atom.io/
ติดตั้ง package ชื่อว่า Atom TypeScript ให้กับ Atom Editor
(เข้าเมนู Settings -> Install พิมพ์ atom-typescript แล้วกด Install)
ติดตั้ง package ชื่อว่า Angular 2 TypeScript Snippets เพื่อช่วยประหยัดเวลาในการเขียนโค้ด
(เข้าเมนู Settings -> Install พิมพ์ angular-2-typescript-snippets แล้วกด Install)
ก่อนลงมือเขียน แนะนำให้อ่าน Angular 2 Style Guide เพื่อรูปแบบโค้ดที่ถูกต้อง และเป็นมาตรฐาน ได้ที่นี่
https://angular.io/docs/ts/latest/guide/style-guide.html
ทดลองลงมือเขียน Hello World ได้ที่คลิปด้านล่างนี้ แล้วต่อด้วยคู่มือ https://angular.io/docs/ts/latest/tutorial/

สุดท้าย ลองแวะเข้าไปดูแหล่งเรียนรู้ของ Angular 2 ได้ที่นี่ครับ

https://angular.io/resources/

ขอให้สนุกกับการเรียนรู้ครับ แล้วพบกันในบทความต่อไป 🙂

4 ขั้นตอน การแทรก Google reCAPTCHA และใช้งานร่วมกับ PHP

25/05/201625/05/2016 โค้ชเอก 1 Comment

ขั้นตอนการแทรก Google reCAPTCHA เพื่อป้องกัน robot และ spam ให้กับฟอร์มในเว็บไซต์

ล็อกอินเพื่อรับ API Key ก่อน ที่ http://www.google.com/recaptcha/admin
เสร็จแล้วให้กรอก Label และ Domains ของเราเอง ดังรูป
เราจะได้ Site key และ Secret key มา ดังรูป

ต่อมา จากภาพ (หมายเลข 1) ให้ copy โค้ดส่วนนี้ ไปวางไว้ในส่วน <head> ของ html และ (หมายเลข 2) ให้ copy โค้ดส่วนนี้ไปวางไว้ฟอร์ม <form> ที่ต้องการครับ

หมายเหตุ สำหรับคนที่อยากแสดงผลภาษาไทย ให้แก้โค้ดหมายเลข 1 ดังนี้

<script src='https://www.google.com/recaptcha/api.js?hl=th'></script>

1

<script src='https://www.google.com/recaptcha/api.js?hl=th'></script>

แค่นี้ฝั่ง client-side ก็เรียบร้อยแล้วครับ

ต่อมาฝั่ง php เราจะต้องติดตั้ง reCAPTCHA PHP client library ครับ รายละเอียดตามนี้
https://github.com/google/recaptcha (ไม่เข้าใจตรงนี้ถามได้ครับ) เมื่อติดตั้งเรียบร้อยให้เขียนโค้ดฝั่ง php ดังนี้

$secret = 'ตรงนี้ให้ copy  Secret key จากภาพข้อ 3 มาวาง';
			
$recaptcha = new \ReCaptcha\ReCaptcha($secret);

$resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
		
if ($resp->isSuccess()) {
 //ถ้า captcha ถูกต้องทำต่อตรงนี้ จะบันทึกฟอร์มอะไรก็ว่าไปครับ

else {
  $errors = "ลงทะเบียนไม่สำเร็จ กรุณาคลิกยืนยันว่าคุณไม่ใช่ robot!!";
  echo $errors;
}

$secret = 'ตรงนี้ให้ copy Secret key จากภาพข้อ 3 มาวาง';

$recaptcha = new \ReCaptcha\ReCaptcha($secret);

$resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);

if ($resp->isSuccess()) {

//ถ้า captcha ถูกต้องทำต่อตรงนี้ จะบันทึกฟอร์มอะไรก็ว่าไปครับ

else {

$errors = "ลงทะเบียนไม่สำเร็จ กรุณาคลิกยืนยันว่าคุณไม่ใช่ robot!!";

echo $errors;

}

แค่นี้ก็เสร็จเรียบร้อยครับ สำหรับการแทรก Google reCAPTCHA กับภาษา PHP ไว้พบกันอีกในโอกาสต่อไป

รวม 19 Extensions ของ Yii Framework 2 ที่น่าใช้

23/05/201623/05/2016 โค้ชเอก Leave a comment

1. Bx Slider Widget for Yii 2
https://github.com/yii2mod/yii2-bx-slider

2. Star Rating Widget for Yii 2
https://github.com/yii2mod/yii2-star-rating

3. jQuery countdown widget for Yii2
https://github.com/russ666/yii2-countdown

4. Sweet Alert Widget for Yii 2
https://github.com/yii2mod/yii2-sweet-alert

5. Yii 2 Tree (jsTree)
https://github.com/arogachev/yii2-tree

6. Infinite AJAX scrolling for Yii2
https://github.com/kop/yii2-scroll-pager

7. Yii2 Toastr Notification
https://github.com/odai-alali/yii2-toastr

8. Yii 2 widget for jQuery Timepicker Addon
https://github.com/janisto/yii2-timepicker

9. DropzoneJs Extention for Yii2
https://github.com/perminder-klair/yii2-dropzone

10. Yii2 extension for Mobile-Detect library
https://github.com/alexandernst/yii2-device-detect

11. Yii 2 imagine extension
https://github.com/yiisoft/yii2-imagine

12. Google Maps API library for Yii2
https://github.com/2amigos/yii2-google-maps-library

13. Bootstrap DatePicker Widget for Yii2
https://github.com/2amigos/yii2-date-picker-widget

14. QrCodes for Yii2
https://github.com/2amigos/yii2-qrcode-helper

15. Integration of materializecss into Yii2
https://github.com/MacGyer/yii2-materializecss

16. SB Admin Theme for Yii2
https://github.com/p2made/yii2-sb-admin-theme

17. Yii2 extension to generate auto number
https://github.com/mdmsoft/yii2-autonumber

18. LinkPager widgets for Yii Framework 2.0
https://github.com/phpyii/yii2-widget-linkpager

19. Asset Bundle for Yii2 with Socicon
https://github.com/rmrevin/yii2-socicon

แนะนำ 5 PHP Class ช่วยในการเขียนอัพโหลด และจัดการไฟล์

15/05/201615/05/2016 โค้ชเอก Leave a comment

1. Upload
https://github.com/brandonsavage/Upload

2. PHP-file-upload-class
https://github.com/aivis/PHP-file-upload-class

3. class.upload.php
https://github.com/verot/class.upload.php

4. upload
https://github.com/siriusphp/upload

5. stapler
https://github.com/CodeSleeve/stapler

รวมลิงก์เว็บ ฟรี! Open source themes และ templates ของ Bootstrap

15/05/201615/05/2016 โค้ชเอก Leave a comment

รวมลิงก์เว็บ ฟรี! Open source themes และ templates ของ Bootstrap ครับ

Start Bootstrap
http://startbootstrap.com/

Bootswatch
http://bootswatch.com/

Black Tie
http://www.blacktie.co/

Bootstrap Zero
http://bootstrapzero.com/

Bootplus
http://aozora.github.io/bootplus/

Fbootstrapp
http://ckrack.github.io/fbootstrapp/

Bootmetro
http://aozora.github.io/bootmetro/
หรือลองค้นได้ที่

GetTemplate
http://www.gettemplate.com/

Cardeostrap
http://cardeostrap.cardeo.ca/

VegiThemes
http://vegibit.com/vegithemes-twitter-bootstrap-themes/

Bootstrap Taste
http://bootstraptaste.com/

แนะนำ Blur Admin เป็น Admin HTML template ที่น่าใช้ดี

15/05/201615/05/2016 โค้ชเอก Leave a comment

แนะนำ Blur Admin เป็น Admin HTML template ที่น่าใช้อีกตัวครับ มีการผสมผสานเทคโนโลยีใหม่ๆ เข้ามาใช้ และลงตัวดีทีเดียว

คุณสมบัติ
————————-

Responsive layout
High resolution
Bootstrap CSS Framework
Sass
Gulp build
AngularJS
Jquery
Jquery ui
Charts (amChart, Chartist, Chart.js, Morris)
Maps (Google, Leaflet, amMap)

รายละเอียด
https://goo.gl/pfBpt5Demo:
http://akveo.com/blur-admin/

แนะนำ Leaflet.js ไว้จัดการและทำแผนที่

15/05/201615/05/2016 โค้ชเอก Leave a comment

แนะนำ Leaflet.js เป็น JavaScript library เกี่ยวกับการจัดการแผนที่อีกตัวที่น่าใช้มากๆครับ น้ำหนักเบาเพียง 33KB ฟีเจอร์เพียบ โค้ดสั้นกระชับ เหมาะกับมือถืออีกด้วย ลองใช้กันได้ครับ

รายละเอียด
http://leafletjs.com/

อันนี้ e-Book ฟรี (สมัครสมาชิก แล้วโหลด)
http://goo.gl/bU5Epg

วิดีโอสอนฟรี

https://sirensoft.github.io/#free

แนะนำ Guzzle สำหรับทำ RESTful APIs (PHP)

15/05/201615/05/2016 โค้ชเอก Leave a comment

สำหรับคนที่เขียน PHP อยากเขียนต่อกับ RESTful APIs หรือ Web Services แนะนำตัวนี้ครับ “Guzzle”

รายละเอียด
http://goo.gl/BKjZXv

– Guzzle เป็น PHP HTTP client ที่ใช้สำหรับส่ง HTTP requests และเชื่อมต่อกับ web services ครับ

– สามารถดึงข้อมูล เพิ่ม แก้ไข ลบ หรืออัพโหลดไฟล์ไปที่ web services ได้ง่ายมากเพียงใช้โค้ดไม่กี่บรรทัด

– สามารถเขียนเชื่อมกับ APIs เจ้าดังๆ ได้ไม่ว่าจะเป็น Twitter, Facebook, GitHub ได้สบายๆ

แน่นอนมันติดตั้งผ่าน Composer เราสามารถใช้ได้ทั้ง เขียน PHP แบบปกติ หรือใช้ PHP framework ก็ได้

ถ้าง่ายหน่อยสำหรับคนใช้ Yii Framework 2 ดูที่นี่
https://goo.gl/PLq6gg

สำหรับคนใช้ Laravel 5 ดูที่นี่
https://goo.gl/4kq0PT

ลองใช้ดูกันได้ครับ

แนะนำ package สำหรับ Atom Editor มีไว้ค้นคำถามจากเว็บ Stack Overflow

15/05/201615/05/2016 โค้ชเอก Leave a comment

แนะนำ package สำหรับ Atom Editor มีไว้ค้นคำถามจากเว็บ Stack Overflow เราสามารถ copy หรือ แทรกโค้ดคำตอบ ลงไปใน Editor ได้เลยครับ สบายสุดๆ 55+

ลิงก์: https://atom.io/packages/ask-stack

วิธีการใช้ แค่กด CTRL + ALT + A แล้วพิมพ์ Ask Stack ใช้ง่ายมากๆ 🙂

แนะนำ Sails.js MVC Framework สำหรับ Node.js

15/05/201615/05/2016 โค้ชเอก Leave a comment

แนะนำ Sails.js MVC Framework สำหรับ Node.js ที่ครบเครื่อง ใช้งานง่าย และมี features ครบถ้วน ครับ

จุดเด่น
1. เหมาะสำหรับทำ RESTful APIs มาก เพราะมีตัว genereate โค้ดอัตโนมัติภายในบรรทัดเดียว!
2. เหมาะสำหรับงานแบบ Realtime โค้ดที่ใช้เขียนง่าย และสั้นมาก! (เขียนครอบ socket.io อีกที)
3. มี ORM ให้ใช้ สามารถติดต่อฐานข้อมูลได้หลายตัว เช่น MySQL, PostgreSQL, MongoDB, SQLite3, Redis เป็นต้น (ใช้ Waterline ORM)

————————
เว็บไซต์
http://sailsjs.org/

https://goo.gl/2Krndf

สอนใช้งานบน Youtube
https://goo.gl/OwtRIR

โค้ดตัวอย่าง
https://github.com/sails101

ใครที่เคยเขียนแนว MVC อยู่แล้วคงจะชอบมาก ลองใช้ดูได้ครับ