Bootstrap 4 beta มาแล้ว!! สรุปสั้นๆ 14 ข้อ เกี่ยวกับ Bootstrap 4 beta ครับ

bs4

Bootstrap 4 beta มาแล้ว!! มาอ่านสรุปสั้นๆเกี่ยวกับ Bootstrap 4 beta กันครับว่ามีอะไรใหม่ๆ หรือแตกต่างจากเวอร์ชัน 3 ยังไงบ้าง

.
1. เปลี่ยนจากใช้ Less มาเป็น Sass

2. ไม่มี thumbnails, wells และ panels แล้วนะครับ แต่จะมี Cards component ให้ใช้แทน (เขียนด้วย flexbox)

3. มีการใช้ HTML resets ชื่อว่า Reboot (cross-browser rendering) โดย forked จาก normalize.css อีกที

4. ไม่รองรับ IE8,IE9 แล้วนะครับ ถ้าใครจะใช้ก็ให้ไปใช้ Bootstrap เวอร์ชัน 3 แทน

5. สำหรับ javascript plugin เขียนใหม่ทั้งหมด ด้วย JavaScript ES6 ครับ

6. ใช้ Popper.js สำหรับช่วยทำ tooltips, popovers และ dropdowns ต่างๆ

7. build tools ตัวใหม่ ใช้ npm scripts แทน Grunt ครับ

8. เปลี่ยนขนาดฟอนต์แบบ global จาก 14px เป็น 16px

9. ไม่มี Glyphicons ติดมาให้แล้ว ถ้าอยากใช้ก็ให้นำเข้ามาใช้เอง

10. เปลี่ยน คลาสของปุ่ม จาก .btn-default ไปเป็น .btn-secondary

11. มีคลาส .table-inverse เพิ่มเข้ามาสำหรับตกแต่งตาราง

12. รองรับความกว้างของ .container 5 ขนาด (เพิ่มจาก bootstrap 3) ดังนี้
– Extra small
– Small
– Medium
– Large
– Extra large

13. ถ้าอยากได้ heading ที่ใหญ่และเด่นกว่าปกติ สามารถใช้ class display-* ได้ มี 4 ขนาด ดังนี้
<h1 class=”display-1″>Display 1</h1>
<h1 class=”display-2″>Display 2</h1>
<h1 class=”display-3″>Display 3</h1>
<h1 class=”display-4″>Display 4</h1>

14. การทำให้รูปภาพให้เป็น responsive ให้ใช้คลาส class=”img-fluid” (เดิมเป็น .img-responsive) ตัวอย่างเช่น
<img src=”myimage.jpg” class=”img-fluid” alt=”Responsive Image”>

เว็บของ Bootstrap 4 beta ถูกออกแบบใหม่เลยนะครับ เข้าไปดูได้ที่ : https://getbootstrap.com/

ส่วนใครอยากปรับจากเวอร์ชันเป็นตัวนี้ ก็ดูการเปลี่ยนแปลงต่างๆได้ที่ : https://getbootstrap.com/docs/4.0/migration/

.
—-
โค้ชเอก
Coding Mentor

สรุป 11 สิ่งใหม่ที่น่าสนใจใน “Laravel 5.5” ครับ

สรุป 11 สิ่งใหม่ที่น่าสนใจใน “Laravel 5.5” ครับ ปลายๆเดือน ก.ค. 60 นี้น่าจะได้ใช้กันแล้ว 

1. Hosting หรือ Server ที่ใช้ต้องรองรับ PHP 7.0 ขึ้นไปครับ ส่วน MySQL ถ้าให้ดีแนะนำเวอร์ชัน 5.7+ เลยครับผม

.
2. เป็น LTS (Long Term Support) ครับสำหรับเวอร์ชันนี้ จะมีการดูแล bug ต่างๆให้ 2 ปี และดูแลเรื่องความปลอดภัยให้ 3 ปี

.
3. กลับมาใช้ Whoops ซึ่งเป็น framework สำหรับแสดงและจัดการ errors ต่างๆ (เคยมีใช้ใน Laravel 4)

.
4. หากเราใช้คำสั่ง php artisan vendor:publish จะมีเมนูให้เลือกครับว่าจะ publish provider หรือ tag ตัวไหน

.
5. มี Email Themes มาให้เลยครับ (ยืดหยุ่นกว่าเดิม) เขียนส่งเมล์ปุ๊บ ผู้รับเตรียมรับอีเมล์สวยๆได้เลย แถม custom จัดการ theme ได้ยืดหยุ่นกว่าเวอร์ชันก่อนหน้านี้

.
6. เราสามารถทดสอบการแสดงผลของ template mail ต่างๆ ได้บน Browser แล้วครับ

.
7. มีคำสั่ง migrate:fresh มาให้ครับ คือจะ drop table ทุกตัว และ migrate อีกครั้ง (สะดวกมาก)

.
8. มี Automatic Package Discovery ให้ใช้ครับ สำหรับคนที่เขียน Package เอง ตัว Laravel จะ register Service Provider และ Facade ให้เราอัตโนมัติเลยครับ โดยให้เราตั้งชื่อเล่น (aliases) และ providers ให้กับ package ของเราได้ในไฟล์ composer.json ส่วนคนใช้ก็สบายเลยครับ ติดตั้ง package เสร็จก็ใช้ได้ทันที ไม่ต้องเพิ่มเองแล้ว

.
9. เพิ่ม Frontend Presets มาให้ด้วยครับ เราสามารถเลือกได้ว่าจะใช้ frontend ตัวไหน ได้แก่ Bootstrap (css) , Vue, React หรือจะ custom เองก็ได้ ปกติ default จะเป็น Vue.js นะครับ แต่หากต้องการใช้ react ก็ใช้ได้ด้วยคำสั่ง php artisan preset react หรือไม่ต้องการใช้อะไรเลยก็ใช้คำสั่ง php artisan preset none

.
10. สามารถสร้างหรือตั้งกฏการตรวจสอบความถูกต้องของข้อมูลขึ้นมาเองได้ และกำหนด message ที่จะแสดงได้ด้วยครับ (Custom Validation Rules)

.
11. สามารถ debug พวก collection ต่างๆ ที่ซับซ้อนได้ ด้วยคำสั่ง dump() และ dd() (สามารถต่อคำสั่ง dump() ระหว่าง method ที่เชื่อมกันได้)

.
ตอนนี้ผมลองติดตั้งทดสอบดูแล้วครับ ถ้าใครอยากลองก็ลงผ่าน composer ได้นะครับ ด้วยคำสั่ง

composer create-project laravel/laravel <ชื่อโปรเจค> dev-develop

โค้ชเอก

สรุป 13 คำสั่ง การใช้งาน Angular CLI ที่ใช้บ่อยๆ ครับ

Angular CLI เป็นเครื่องมือแบบ command line interface ช่วยให้เราเขียน Angular ได้ง่าย และยังช่วยจัดโครงสร้างและโค้ดให้ถูกต้องตามหลักของ Best Practices อีกด้วย ถ้าใครจะเริ่มเขียน Angular ก็แนะนำให้ใช้ และศึกษาได้เลยครับ 🙂

.
1. ติดตั้ง Angular CLI (แบบ global) ด้วยคำสั่ง
npm install -g @angular/cli

.
2. ดู help ทั้งหมดของ Angular CLI ด้วยคำสั่ง
ng help

.
3. ดูเวอร์ชัน Angular CLI ด้วยคำสั่ง
ng -v

.
4. เปิดดู doc และค้น keyword ในเว็บ angular.io ด้วยคำสั่ง
ng doc [คำที่ต้องการค้น]

.
5. สร้างโปรเจคใหม่ ด้วยคำสั่ง
ng new [ชื่อโปรเจค]
Options ที่น่าสนใจ
5.1 –skip-install หากยังไม่ต้องการติดตั้ง packages ต่างๆ
5.2 –skip-tests หากไม่ต้องการให้สร้างไฟล์ test (spec files)
5.3 –routing หากต้องการให้สร้าง routing module แยกต่างหาก
5.4 –prefix [ข้อความ prefix] ตั้ง default selector prefix ของทุก components
5.5 –skip-git หากไม่ต้องการเพิ่มโปรเจคเข้าไปใน git
ตัวอย่างการใช้
ng new MyProject –routing –style sass prefix hello –skip-git

.
6. หากต้องการ set ค่า config ต่างๆ ในภายหลัง (ในไฟล์ .angular-cli.json) ใช้คำสั่ง
ng set เช่น ng set defaults.styleExt sass
* ใช้ -g ต่อท้าย สำหรับ global set

.
7. ตรวจสอบความถูกต้อง และจัดการโค้ด typescript ที่เราเขียน ด้วยคำสั่ง
ng lint

.
8. สร้าง หรือ gen ไฟล์ blueprint ด้วยคำสั่ง
ng generate หรือ ng g
เช่น หากต้องการสร้าง component ก็ให้ใช้คำสั่ง ng generate component <ชื่อ component> หรือ ng g c <ชื่อ component>
หรือถ้าต้องการสร้าง module และ routing module ด้วย ก็ให้ใช้คำสั่ง ng g m <ชื่อ module> –routing
หรือต้องการสร้าง Routing Guard ก็ใช้คำสั่ง ng generate guard <ชื่อ guard>

.
9. Serve โปรเจค ด้วยคำสั่ง
ng serve
Options ที่น่าสนใจของ ng serve
9.1 –open หรือ -o ไว้เปิด default browser เช่น ng serve -o
9.2 –port หรือ -p ระบุ port ที่ต้องการ เช่น ng serve -p 8626

.
10. Build โปรเจค (Development Build) ด้วยคำสั่ง
ng build

.
11. Build โปรเจค (Production Build) ด้วยคำสั่ง
ng build –prod

.
12. Unit Tests (Karma) ด้วยคำสั่ง
ng test

.
13. End to End Tests (Protractor) ด้วยคำสั่ง
ng e2e

สรุป PHP Web Application Security

1. ต้อง Validate input หรือตรวจสอบความถูกต้องของข้อมูลทุกอย่างที่นำเข้ามา เช่น ต้องตรวจสอบว่ามีข้อมูล หรือใช่ข้อมูลที่เราต้องการจริงๆ หรือใหม่

เช่น การใช้ isset(), ?? operator, is_*() อาจเขียนเอง หรือใช้ ctype Extension หรือ ฟังก์ชัน filter_var, filter_input

ส่วนใน PHP 7 ให้ใช้ความสามารถของ Type Declarations โดยต้องประกาศคำสั่ง

declare(strict_types=1);

ไว้บนสุดของไฟล์ เพื่อ strict ชนิดของตัวแปรครับ
2. การป้องกัน Cross-site Scripting (XSS) ต้องมีการกรอง หรือ Filtering Input เสมอ เช่น

– ใช้คำสั่ง strip_tags($s) เพื่อเอาคำสั่ง HTML ออกไป
หรือจะใช้คำสั่ง filter_var($s, FILTER_SANITIZE_STRING) เพื่อเอาคำสั่ง HTML ออกก็ได้เหมือนกัน

– ใช้คำสั่ง preg_replace($, ‘/…/’, ”) เพื่อกรองและป้องกันด้วย regular expressions (เขียนเอง)

2.1 การป้องกัน Cross-site Scripting อีกอย่าง คือ การใช้ฟังก์ชัน htmlspecialchars($s) ยกตัวอย่างที่ควรทำ

เช่น

//ตัวอย่าง string
$s = ‘<p class=”c”>Let\’s go!</p>’;

//วิธีการเขียนที่ดี
echo htmlspecialchars($s);
echo htmlspecialchars($s, ENT_QUOTES);
echo htmlentities($s, ENT_QUOTES);
echo filter_var($s,FILTER_SANITIZE_FULL_SPECIAL_CHARS);

2.2 การป้องกัน Cross-site Scripting ด้วยการส่งไฟล์ชนิด JSON เข้ามา

$data = [
‘term’ => $_GET[‘q’]
];

header(‘Content-type: application/json’);

echo json_encode(
$data,
JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT |
JSON_HEX_AMP);
3. การป้องกัน SQL Injection

3.1 อย่างแรกให้ escape string ที่เข้ามา ยกตัวอย่าง เช่น

//สำหรับ MySQL/MariaDB
mysqli_real_escape_string($db, $value);
หรือ $db->real_escape_string($value);

//สำหรับ PostgreSQL
pg_escape_string($db, $value);

//สำหรับ SQLite
SQLITE3::escapeString($value);

3.2 ใช้ Prepared Statements ของ PDO (PHP Data Objects) ตัวอย่าง เช่น

$db = new PDO(…);
$sql = ‘INSERT INTO searches (term) VALUES (:term)’;
$cmd = $db->prepare($sql);
$cmd->bindParam(‘:term’, $term);
$cmd->execute();

3.3 ใช้ Prepared Statements ของ MySQLi

$db = new MySQLi(…); //mysqli_connect()
$sql = ‘INSERT INTO searches (term) VALUES (?)’;
$cmd = $db->prepare($sql); //mysqli_prepare()
$cmd->bind_param(‘s’, $term); //mysqli_stmt_bind_param()
$cmd->execute(); //mysqli_stmt_execute()

ป.ล. สำหรับคนที่ไม่ได้เขียนในแนว OOP ลองค้นเพิ่มได้ครับ วิธีการคำสั่งคล้ายกัน
4. เพิ่มความปลอดภัยให้กับ Cookies แนะนำให้ใช้ HTTPS และใช้ฟังก์ชัน setcookie ให้ถูกต้อง ด้วยการ set ค่าพารามิเตอร์ secure ให้เป็น true (กรณีใช้ https) และค่า httponly ให้เป็น true
ดูฟังก์ชัน setcokkieได้ที่นี่ http://goo.gl/4QulZg

ตัวอย่างการเขียน
//ปลอดภัย
setcookie(‘Cookie1’, rand(100, 999), 0, ‘/’, ”, true, true);

//ไม่ปลอดภัย
setcookie(‘Cookie2’, rand(100, 999), 0, ‘/’, ”, false, false);
5. การป้องกัน Cross-site Request Forgery (CSRF)

5.1 สร้างและเก็บค่า token โดยการสุ่มขึ้นมา
$name = ‘token-‘ . mt_rand();
$token = random_bytes(32);

$_SESSION[$name] = $token;

5.2 นำค่าตัวแปร token ไปใส่ไว้ในทุกๆฟอร์ม เช่น

<input type=”hidden” name=”_csrfname” value=”token-123456″>
<input type=”hidden” name=”_csrfvalue” name=”a1b2c3d4e5f6″>

5.3 จากฟอร์มข้อ 5.2 เมื่อผู้ใช้คลิก Submit ฟอร์มแล้วก็อย่าลืม isset เช็คตัวแปร และค่าด้วยนะครับว่าตรงกันกับที่ส่งมามั้ย

ป.ล. จากข้อ 5.2 นี้ถ้าใครเคยเขียน Framework จะเห็นว่าเกือบทุก Framework จะมีมาให้แล้ว
6. เข้ารหัส Password ด้วยวิธีที่ถูกต้อง

6.1 Hash passwords ทุกครั้ง

6.2 อย่าใช้ algorithms เช่น MD5 หรือ SHA1 (มันเก่าแล้ว และไม่ปลอดภัย)

6.3 ให้ใช้ Password Hashing API ของ PHP เช่น
password_hash(), password_get_info(), password_needs_rehash(), password_verify()

Laravel 5.3 มาแล้วครับ!

53

ใน Laravel 5.3 คร่าวๆ จะมี Features ใหม่ ที่น่าสนใจ ดังนี้

– Laravel Scout เป็นระบบค้นหา (รองรับ full-text search) สำหรับ Eloquent ไม่ต้องเขียนเองแล้ว และมาพร้อมกับ Pagination ด้วย
– Laravel Mailable เป็นคลาสใหม่ สำหรับใช้ส่งเมล แน่นอนง่ายกว่าเดิม
– Laravel Passport เป็น package สำหรับ OAuth 2 สำหรับทำล็อกอินเชื่อมต่อ facebook, twitter และอื่นๆ
– Laravel Notifications เป็นระบบแจ้งเตือน ไว้แจ้งเตือน SMS, Email หรือ Slack ก็ได้
– Rollback one migration สามารถ rollback migration ทีละ step ได้แล้ว
– Customize simple pagination สามารถ Custom View ของการแบ่งหน้าได้แล้ว
– Blade Loop Variable ทำให้เราเข้าถึงและเขียนเกี่ยวกับตัวแปรภายใน Loop ได้ง่ายขึ้น เช่น count, first, last เป็นต้น
– Storing Uploaded Files สามารถอัพโหลดไฟล์แบบง่ายๆได้เพียงบรรทัดเดียว!

ตัวอย่างโค้ด

$request->file(‘inputfile’)->store(‘images’);

และก็มี method storeAs() ให้เรา custom ได้ด้วย จะ save ลง disk หรือ Amazon S3 ก็ได้ ด้วยการเขียนโค้ดเพียง 2-3 บรรทัดครับ

ดู features ทั้งหมด ได้ที่นี่
https://laravel.com/docs/5.3/releases

สำหรับคนที่ใช้ Laravel 5.2 อยู่ ดูการอัปเกรดได้ที่นี่
https://laravel.com/docs/master/upgrade#upgrade-5.3.0

แนะนำ package CKEditor กับ File Manager สำหรับ Laravel 5.2

แนะนำ package CKEditor กับ File Manager (ใช้ร่วมกัน) สำหรับคนที่เขียน Laravel 5.2 ครับ เท่าที่ผมลองใช้ดู คิดว่ามือใหม่ติดตั้งได้ไม่ยากเลย🙂

1. ให้ติดตั้ง CKEditor ก่อน รายละเอียด
https://goo.gl/ZQBvN7

2. แล้วต่อด้วย File Manager ตามนี้
https://goo.gl/E05NBS

config ให้ดูตามคู่มือของแต่ละตัวนะครับ ไม่ยาก ลองดูครับผม

PrimeNG เป็น UI components สำหรับ Angular 2

PrimeNG เป็น UI components สำหรับ Angular 2 ครับ เผื่อใครอยากลอง สวยและน่าใช้ทีเดียว
รายละเอียด: http://goo.gl/4pChbo

อีกตัวสำหรับคนที่คุ้นเคย Bootstrap อยู่แล้ว ก็แนะนำตัวนี้เลยครับ เป็น native คือ ไม่ต้องเพิ่ม jQuery หรือ JS ของ Bootstrap เข้ามา
รายละเอียด: http://goo.gl/UwQpC2

สำหรับคนที่รอคอร์ส Angular 2 อยู่ ช่วงนี้ขอเคลียร์งานค้างก่อนนะครับ ไว้ผมจะแจ้งในเพจอีกที

อยากเป็น Full-Stack Web Developer เริ่มต้นเรียนที่นี่ครับ

1. คอร์สเรียนพื้นฐาน และภาพรวมสำหรับการเป็น Web Developer
http://goo.gl/oDFrIW

2. คอร์สเรียน PHP AJAX เรียนรู้การเขียน jQuery โดยใช้เทคนิค AJAX ร่วมกับ PHP
http://goo.gl/Xyci6q

3. คอร์สเรียน การเขียนโปรแกรมเชิงวัตถุด้วย PHP (PHP OOP)
http://goo.gl/AoKllp

4. คอร์สเรียน Yii Framework 2 พื้นฐาน
http://goo.gl/4BY8fA

5. คอร์สเรียน Yii Framework 2 ฐานข้อมูล และการทำรายงาน
http://goo.gl/tAw1mk

6. e-Book “Yii 2: Database and Report” ฉบับภาษาไทย
http://goo.gl/WKgtJw

———-
7. คอร์สเรียน Laravel 5.2
http://goo.gl/jkkcGS

8. e-Book Laravel 5.2 ฉบับภาษาไทย
http://goo.gl/DbGSpf

———-
9. พื้นฐาน JavaScript ES6/ES2015 เพื่อต่อยอด Node.js, Angular 2 หรือ Ionic 2
http://goo.gl/0Qp4VB

10. สร้าง Mobile App ด้วย Ionic Framework 2
http://goo.gl/aA4Bk2

11. e-Book สร้าง Mobile App ด้วย Ionic Framework 2 (ฉบับภาษาไทย)
http://goo.gl/Bm1kJ3

———-

คอร์สพิเศษ Visual Basic.NET Programming
http://goo.gl/zXKOja

สำหรับคนที่สนใจสามารถดูรายละเอียด ลงทะเบียนได้ในลิงก์ของแต่ละคอร์สได้เลยครับ อย่าลืมเรียนเรียงตามลำดับด้วยนะครับ เพราะพื้นฐานสำคัญมันสำคัญสุดๆ 🙂

คอร์สเรียนฟรี เราก็มี ดูได้ที่นี่
https://goo.gl/fFlmaE

การเขียน Angular 2 เชื่อมต่อกับ Facebook

สำหรับคนที่กำลังศึกษา Ionic 2 หรือ Angular 2 อยู่ อยากทำระบบล็อกอิน Facebook หรือเชื่อมต่อ Facebook ลองตัวนี้ได้ครับ ใช้ง่ายทีเดียว โค้ดสั้นมาก

 

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

สรุปการเขียน Classes ใน TypeScript

tscript
มาลองดูรูปแบบการเขียน Classes ใน TypeScript กัน จริงๆ แล้วรูปแบบและแนวทางการเขียนก็เขียนเหมือนกันกับ JS ES6 นั่นเองครับ

การสร้าง class เราจะใช้คีย์เวิร์ด class ตามด้วยชื่อคลาส ดังนี้

class Book {
}

คลาสประกอบด้วย properties, methods และ consturctors

1. การเขียน Properties

class Person {
firstName: string;
lastName: string;
age: number;
}

2. การเขียน Methods

class Person {
firstName: string;
lastName: string;
age: number;
//method
greet() {
console.log(“Hello”, this.firstName);
}
}

3. ตัวอย่างการใช้งานคลาส Person

// ประกาศตัวแปร มี type เป็น Person
let p: Person;
//สร้าง instance ใหม่
p = new Person();
//กำหนดค่าให้กับ first_name
p.firstName= ‘Akenarin’;
//เรียกใช้ method ชื่อว่า greet()
p.greet();
Note: เราสามารถสร้าง instance ใหม่ได้ด้วยบรรทัดเดียว ดังนี้
let p: Person = new Person();

4. การเขียน Constructors

constructor เป็น method พิเศษที่จะทำงานเมื่อมีการสร้าง instance ใหม่ โดยทั่วไปเรามักใช้สำหรับกำหนดค่าเริ่มต้นให้กับ object ครับ

ตัวอย่างการเขียน constructor แบบที่ 1

class Person {
firstName: string;
lastName: string;
age: number;
constructor(firstName: string, lastName: string, age: number) {
this.firstName= firstName;
this.lastName= lastName;
this.age = age;
}
greet() {
console.log(“Hello”, this.firstName);
}
}

ตัวอย่างการเขียน constructor แบบที่ 2 [เพิ่มเติมจาก @ Tan Tanangular ]

แบบที่ 2 นี้เราสามารถละไม่เขียน properties ได้โดยให้ระบุ access modifier เข้าไป เช่น private, public เป็นต้น ตัวอย่าง
class Person {
//ตรงนี้ไม่ต้องเขียน properties
constructor(public firstName: string, public lastName: string, public age: number) {
//ตรงนี้สามารถละ ไม่เขียนได้ //this.firstName= firstName;
//this.lastName= lastName;
//this.age = age;
}
} จากโค้ดด้านบนจะถูก compile เป็น ดังนี้
var Person = (function () {
function Person(firstName, lastName,age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
return Person;
}());

ด้านซ้ายเป็น .ts ส่วนด้านขวาหลัง compile เป็น .js

การใช้ constructor

let p: Person = new Person(‘Akenarin’, ‘Komkoon’, 20);
p.greet();
ถ้าใครมีพื้นฐานการเขียน JAVA, C#, PHP OOP มา รับรองว่าทำความเข้าใจ TypeScript ได้ไม่ยากครับ ลองดูๆ 🙂