Coding Thailand's Blog

บอกเลย ปี 2016 เป็นปีทองของ Web Developer อย่างแท้จริง!

31/08/201631/08/2016 โค้ชเอก Leave a comment

ปี 2016 นี้ ถือเป็นปีที่เทคโนโลยีส่วนใหญ่จะใหม่ และเปลี่ยนจากเวอร์ชันก่อนหน้าค่อนข้างมากครับ ข่าวดี คือ เรากำลังเรียนรู้อะไรใหม่ๆพร้อมๆกับ Web Developer จากทั่วโลก และทุกคนก็เริ่มศึกษาจาก 0 คล้ายๆกัน 🙂

ยกตัวอย่าง ด้านล่างนี้ สามารถเริ่มเรียนรู้ได้เลยครับ แม้จะเป็นมือใหม่ก็แนะนำเริ่มจากจุดนี้ได้เลย
1. JavaScript ES2015/ES6, TypeScript
2. PHP 7
3. Yii Framework 2
4. Laravel 5.2
5. Angular 2, React
6. Ionic Framework 2, React Native, Xamarin
7. ASP.NET Core

ถ้าอยากเริ่มอัพเกรดตัวเอง ปีนี้แหละครับเหมาะสุดๆ เลย ลุยเลยครับ

เรื่องเล่า Angular 2 (RC5)

31/08/201631/08/2016 โค้ชเอก Leave a comment

ag2

สำหรับคนที่ตาม Angular 2 อยู่ ตอนนี้เป็นเวอร์ชัน RC5 (2.0.0-rc.5) ครับ

ใน RC5 นี้ได้เพิ่ม features ที่สำคัญมาก ได้แก่ Angular Modules (@NgModule)การมาของ Angular Modules ทำให้ angular libraies หลายๆตัวจะเริ่มทยอยกลายเป็น modules ครับ ไม่ว่าจะเป็น FormsModule, HttpModule, RouterModule เป็นต้น ทำให้โค้ดที่เคยเขียนต้องเขียนใหม่หลายจุดเลยทีเดียว

เช่นเดียวกันครับ พวก third party libraries ทั้งหลายก็จะเป็นกลายเป็น Modules เหมือนกัน เช่น Meterial Design, Ionic, AngularFire2 (Firebase) เป็นต้น

ข้อดีของ Angular Modules จะทำให้โค้ดในแต่ละ component ของเราดูสั้นลง สะอาด และอ่านง่ายขึ้น เพราะเราสามารถ import คลาส, Services หรือ Modules ต่างๆ เข้ามาได้ตั้งแต่ app เริ่มทำงานเลย ทำให้ component ที่เราเขียนไม่ต้อง import อะไรซ้ำๆ และนำไปใช้ได้ทันทีจากนี้ไปในทุกๆ App ที่เขียนด้วย Angular 2 จะมี root module ครับ หรือเรียกอีกอย่างหนึ่งว่า AppModule ก็ได้ อย่างน้อย 1 ตัวเสมอ (ในไฟล์ app.module.ts)

อีกอันหนึ่งที่มาใหม่คือ โหมด Just in Time (JIT) Compilation ที่จะช่วยให้เรา compile component และ modules ต่างๆได้ไวขึ้นขณะที่เรากำลังพัฒนา app อยู่ (development mode) และที่คู่กันคือโหมด Ahead of Time (AOT) Compilation ที่ช่วยเพิ่มประสิทธิภาพ และช่วยให้ app ของเราทำงานไวขึ้นมาก อันนี้แนะนำให้ใช้ตอนเป็น production mode

ตอนขึ้น production ก็อย่าลืมเปลี่ยนโหมด และ enable production กันด้วยนะครับ 🙂

ถามว่า Angular 2 จะออกตัวจริงเมื่อไหร่? การมาของ RC5 แสดงให้เห็นว่าคงใกล้มากๆแล้วครับ (เห็นบอกไม่กี่สัปดาห์)

ไว้มีอะไรใหม่ๆจะมาเล่าให้ฟังกันอีก

7 ข้อแนะนำสำหรับมือใหม่ที่กำลังจะศึกษา Angular 2

10/08/201610/08/2016 โค้ชเอก Leave a comment

ag222

1. Angular 2 มี style guide หรือคู่มือ/ข้อแนะนำ สำหรับการเขียนโค้ดที่ดีครับ แนะนำให้ศึกษาก่อนตามนี้ https://goo.gl/wW1wRf

หรือง่ายกว่านั้น เวลาสร้างโปรเจคใหม่ หรือเขียนโค้ด ผมแนะนำให้ใช้ Angular-cli ครับ (https://goo.gl/pA0K5q) นอกจากจะช่วยเรา gen code แล้ว โค้ดที่ gen มา จะได้โค้ดซึ่งตรงกับ style guide ที่ดีด้วย สบายเลย 🙂

ตัวนี้ https://goo.gl/WsGW7o เป็นคู่มือ Angular CLI อย่าลืมพิมพ์แปะฝาบ้านไว้ 55+

2. Editor เลือกตามใจชอบได้ เอาตัวที่ใช้กันบ่อยๆ ก็มี 3 ตัว ดังนี้

– Visual Studio Code (https://goo.gl/ex3TCL)

– Sublime Text (plugin สำหรับเขียน Angular 2 (TypeScript) ดูที่นี่https://goo.gl/ZBaVGk)

– Atom Editor (plugin สำหรับเขียน TypeScript ดูที่นี่
https://goo.gl/qdb78x)

3. แนะนำให้ติดตั้ง Augury เป็น Google Chrome extenson สำหรับ Debug Angular 2 ครับ (ขาดไมได้เลยตัวนี้)
https://goo.gl/QX98gz

4. อภิธานศัพท์ (Glossary) หรือศัพท์ที่เกี่ยวข้องกับ Angular 2 แนะนำว่าเราต้องรู้ที่มาที่ไปของศัพท์แต่ละคำครับ ว่ามันคืออะไร เพราะหลายคำเป็นพื้นฐานที่เราต้องรู้มาก่อน
https://goo.gl/5Pg8Yi

5. อีกอันที่ควร print แปะฝาบ้านไว้ คือ ANGULAR CHEAT SHEET ครับ เป็นแผ่นสรุปข้อแนะนำ และโค้ดที่ใช้บ่อยๆใน Angular 2
https://goo.gl/NazUZi

6. พื้นฐานที่หลายคนมองข้ามคือ การ set <title> ให้กับ web pages แนะนำให้ใช้ Title service แทนการ set ค่าเข้าไปตรงๆที่ tag html ครับ ไม่ยาก ตามไปดูเรื่องนี้ได้ที่
https://goo.gl/DMMS8r

7. ถ้าอยากทำเอกสารคู่มือเพื่อธิบายโค้ด หรือโปรเจคที่เราเขียน แนะนำให้ใช้ Documentation generator สำหรับ TypeScript ครับ ตามนี้
https://goo.gl/XlMsz7

การเริ่มต้นที่ดี ช่วยให้เราประหยัดเวลาชีวิตไปได้หลายนาทีแน่นอน 55+

ฝากมือใหม่ไว้ 7 ข้อก่อนนะครับ ถ้ามีอะไรเพิ่มเติมจะมาเล่าให้ฟังเรื่อยๆ

—-
โค้ชเอก

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 โค้ชเอก Leave a 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>
```
แค่นี้ฝั่ง 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;
}

แค่นี้ก็เสร็จเรียบร้อยครับ สำหรับการแทรก 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