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 ได้ไม่ยากครับ ลองดูๆ 🙂

การประกาศตัวแปร และชนิดข้อมูลของ TypeScript

tscript

สำหรับคนที่เตรียมตัวศึกษา Angular 2 คงหนีไม่พ้นต้องศึกษา TypeScript ด้วย มาดูตัวอย่างการประกาศตัวแปร และชนิดข้อมูลของ TypeScript ง่ายๆกันครับ (Built-in types)

รูปแบบ

let ชื่อตัวแปร: ชนิดข้อมูล;

– String

var name: string = ‘CodingThailand’;

– Number

let age: number = 20;

– Boolean

let married: boolean = true;

– Array

let jobs: Array<string> = [‘IBM’, ‘Microsoft’, ‘Google’];
let jobs: string[] = [‘Apple’, ‘Dell’, ‘HP’];
หรือ
let jobs: Array<number> = [1, 2, 3];
let jobs: number[] = [4, 6, 8];

Enums

enum Role {Employee, Manager, Admin};
let role: Role = Role.Employee;

Any (เป็น default type เก็บอะไรก็ได้)

let thing: any = ‘Akenarin Komkoon’;
thing = 1;
thing = [1, 2, 3];

Void (ใช้สำหรับฟังก์ชันที่ไม่มีการคืนค่ากลับ)

function setTitle(name: string): void {
this.name = name;
}

ไอคอนแบบ Material Design แนะนำเว็บนี้

ใครที่ทำเว็บอยู่ อยากได้ไอคอนแบบ Material Design แนะนำเว็บนี้ครับ ไอคอนสวยๆเยอะเลย 🙂

รายละเอียด: https://goo.gl/R9QpiZ

ใช้ร่วมกับ Bootstrap ก็ได้ครับ ลองดูที่นี่

https://goo.gl/NWa5Uj

หรือจะใช้ของ google ก็มีด้วยตามนี้ครับ
https://goo.gl/VALOrW

แนะนำ Chartist.js ใช้กับ Angular 2 และ Ionic 2

สำหรับคนที่กำลังมองหา Chart เพื่อนำมาทำรายงาน ลองใช้ตัวนี้ได้ครับ จริงๆก็ใช้ได้ทั้งฝั่ง JS/Node.js และ PHP แต่ตัวนี้จะพิเศษหน่อย สำหรับคนที่กำลังศึกษา Angular 2 หรือ Ionic 2 อยู่ สามารถติดตั้งแล้ว import เข้ามาใช้ในโปรเจคได้เลย สะดวกมากๆ ลองๆ

เว็บไซต์หลัก:

http://goo.gl/z6ge5C

สำหรับ Angular 2 และ Ionic 2:
https://goo.gl/By5xi1

แนะนำ 6 เว็บไซต์ ไว้เขียนส่งอีเมล สำหรับ Web Developer ครับ

สำหรับคนที่มีปัญหาเขียน PHP แล้วส่งเมลได้บ้างไม่ได้บ้าง หรือส่งเมลไปแล้วไม่เข้า inbox ผมแนะนำให้ใช้บริการ SMTP Service ดีกว่าครั

ใครอยากใช้อันไหนก็ลองดูได้เลยครับ ที่สำคัญทุกเจ้าที่แนะนำมีบริการฟรีด้วย งั้นแนะนำแบบฟรีมากไปหาฟรีน้อยแล้วกันนะ 55+

1. ElasticEmail ฟรี 25,000 ฉบับ/เดือน
เว็บไซต์: https://elasticemail.com/
คู่มือ PHP : https://goo.gl/Z4zUwl

2. Postmark ฟรี 25,000 ฉบับ/เดือน
เว็บไซต์: https://postmarkapp.com/
คู่มือ PHP: http://goo.gl/GG1Fki

3. SendGrid ฟรี 12,000 ฉบับ/เดือน
เว็บไซต์: https://sendgrid.com
คู่มือ PHP: https://goo.gl/sznb8g

4. MailGun ฟรี 10,000 ฉบับ/เดือน
เว็บไซต์: https://www.mailgun.com
คู่มือ PHP : https://goo.gl/Q0M8z0

5. SendInBlue ฟรี 9,000 ฉบับ/เดือน
เว็บไซต์: https://www.sendinblue.com/
คู่มือ PHP: https://goo.gl/usctco

6. MailJet ฟรี 6,000 ฉบับ/เดือน
เว็บไซต์: https://www.mailjet.com/
คู่มือ PHP: http://goo.gl/RnKqRA

ขอให้สนุกกับการเขียนส่งเมลนะครับ