พฤษภาคม 2016 - Page 4 of 4

3 แนวทางง่ายๆ เขียน PHP ให้ปลอดภัย แค่ใส่ใจกับอินพุต

14/05/201614/05/2016 โค้ชเอก Leave a comment

อย่าเชื่อ!! ว่าข้อมูลที่รับมาจากแหล่งที่เราควบคุมไม่ได้ ไม่ว่าจะเป็น $_GET,$_POST,$_REQUEST,$_COOKIE,$argv,file_get_contents(),Remote databases,Remote APIs และ ข้อมูลทุกอย่างที่มาจาก Client ว่าจะปลอดภัยครับ เราควรต้องกรอง และคอยตรวจสอบความถูกต้องของข้อมูลเสมอ ดังนี้

ควรกรองข้อมูลอักขระพิเศษต่างๆ จาก HTML ด้วย เช่น การใช้ฟังก์ชัน htmlentities() ตัวอย่าง

<?php 
$input = '<p><script>alert("ยินดีด้วยคุณถูกรางวัลที่ 1!");</script></p>'; 
echo htmlentities($input, ENT_QUOTES, 'UTF-8');
?>

<?php

$input = '<script>alert("ยินดีด้วยคุณถูกรางวัลที่ 1!");</script>';

echo htmlentities($input, ENT_QUOTES, 'UTF-8');

ฟังก์ชัน htmlentities() จะช่วยให้เรากรองและแปลง HTML ให้กลายเป็น string ที่ปลอดภัยครับ หรือใครอยากลองเล่น Html Purifier Libray ตามไปได้ที่ http://htmlpurifier.org

ถ้ารับข้อมูล input จาก user และมีการกรอกข้อมูล เช่น อีเมล์,โทรศัพท์,Urls ต่างๆ ก็ควรใช้ฟังก์ชัน filter_var() สำหรับกรองข้อมูลครับ ฟังก์ชันนี้จะช่วยกรองข้อมูล เช่น email,integers,floats,URLs และอื่นๆ ตัวอย่าง เช่น

<?php $email = 'codingthailand@gmail.com'; $emailSafe = filter_var($email, FILTER_SANITIZE_EMAIL); ?>

1
2
3
4

<?php
$email = 'codingthailand@gmail.com';
$emailSafe = filter_var($email, FILTER_SANITIZE_EMAIL);
?>

การกรองข้อมูลอีเมล์ตามตัวอย่างนี้ จะเอาอักขระต่างๆออกให้ทั้งหมด ยกเว้น ตัวอักษร,ตัวเลข และ !#$%&’*+-/=?^_`{|}~@.[] นอกจากอีเมล์ ก็มี Sanitize filters อีกหลายตัว เช่น FILTER_SANITIZE_NUMBER_INT,FILTER_SANITIZE_URL,FILTER_SANITIZE_NUMBER_FLOAT เป็นต้น

การตรวจสอบความถูกต้องข้อมูลเราสามาถใช้ฟังก์ชัน filter_var() เช่นเดียวกัน โดยสามารถตรวจสอบได้หลายอย่างเช่น Booleans, emails, floats, integers, IP addresses ฯลฯ ตัวอย่าง เช่น

<?php 
$input = 'codingthailand@gmail.com'; 
$isEmail = filter_var($input, FILTER_VALIDATE_EMAIL); 
if ($isEmail !== false) echo "Success"; } 
else 
{ echo "Fail"; }
?>

<?php

$input = 'codingthailand@gmail.com';

$isEmail = filter_var($input, FILTER_VALIDATE_EMAIL);

if ($isEmail !== false) echo "Success"; }

else

{ echo "Fail"; }

นอกจากนี้ก็มี Validate filters อีกหลายตัวเช่น FILTER_VALIDATE_FLOAT,FILTER_VALIDATE_IP,FILTER_VALIDATE_REGEXP เป็นต้น

ใส่ใจกับความปลอดภัยด้วยนะครับ 🙂

10 ข้อควรรู้ เขียน PHP ให้ถูกต้องและตรงตามมาตรฐาน

14/05/201614/05/2016 โค้ชเอก Leave a comment

หลายคนที่เขียน PHP อยู่ตอนนี้ รวมถึงตัวผมด้วย อาจยังเขียน php ไม่ถูกต้องตามมาตรฐานนัก อาจติดมาจากภาษาอื่นๆ หรือเขียนเองคนเดียว ถึงแม้ไม่ errors ทำงานได้ปกติ แต่เมื่อไหร่ที่เราต้องทำงานร่วมกับคนอื่น ผมว่ามีปัญหาแน่นอน ว่าแล้วก็มาฝึกเขียน PHP ให้ตรงตามมาตรฐานกันดีกว่าครับ

1. ไฟล์ PHP ต้องเปิดด้วยคำสั่ง <?php และ <?= เท่านั้น

2. ไฟล์ต้องมีการเข้ารหัสภาษาเป็น UTF-8 without BOM

3. การตั้งชื่อ Class และ Namespace ควรกำหนดให้เป็น StudlyCaps เช่น ConnectDatabase

4. การตั้งชื่อ Methods ควรกำหนดเป็นรูปแบบเป็น camelCase เช่น goDB()

5. เมื่อมีการเยื้องโค้ดต้องไม่ใช้ tabs แต่ให้เคาะช่องว่าง 4 เคาะ

6. โค้ดต่อ 1 บรรทัดควรไม่เกิน 80 ตัวอักษรหรือน้อยกว่านั้น อย่างมากไม่ควรเกิน 120 ตัวอักษร

7. เวลากำหนด namespace ให้เคาะเว้นบรรทัดเปล่าๆ 1 บรรทัดเสมอ และแน่นอนเมื่อใช้คำสั่ง use ก็เคาะเว้นบรรทัดเปล่า 1 บรรทัดเช่นเดียวกัน

8. เมื่อเขียน methods หรือ functions ต่างๆ เครื่องหมายปีกกาต้องเขียนอยู่ในบรรทัดถัดลงมา และปิดเครื่องหมายปีกกาในบรรทัดต่อไปของตัวเมธอด หรือฟังก์ชันด้วย เช่น

final public static function bar()
{
// method body
}

final public static function bar()

{

// method body

}

9. Visibility จะต้องถูกกำหนดให้กับทั้งหมดของ properties และ methods และ คีย์เวิร์ด abstract และ final จะต้องถูกกำหนดก่อน visibility ส่วน static นั้น จะต้องถูกกำหนดหลัง visibility ป.ล. visibility คือการกำหนดการเข้าถึงข้อมูลของ class ในส่วนของ properties และ methods ประกอบไปด้วย private , public, protected

10. คำสั่งในกลุ่มของ Control Structures เช่น if,switch,while,do while มีข้อกำหนดดังนี้

10.1 จะต้องเว้นวรรค 1 เคาะ หลังจากเขียนคำสั่งเหล่านี้

10.2 จะต้องไม่มีช่องว่างข้างในเล็บเปิด-ปิด

10.3 จะต้องมีช่องว่างอย่างละ 1 เคาะ ทั้งก่อนและหลังวงเล็บเปิด-ปิด

10.4 ในส่วนโครงสร้างของตัวคำสั่งให้เยื้อง 1 เคาะ

10.5 วงเล็บปีกกาตอนเปิดนั้นจะต้องอยู่บรรทัดเดียวกัน ยกเว้นตอนปิดอยู่คนละบรรทัด เช่น

if ($expr1) {
// if body
} elseif ($expr2) {
// elseif body
} else {
// else body;
}

if ($expr1) {

// if body

} elseif ($expr2) {

// elseif body

} else {

// else body;

}

ใครสนใจศึกษาเพิ่มเติม ศึกษาต่อได้ที่ http://www.php-fig.org/psr/psr-1/

ขอให้สนุกกับการเขียนโปรแกรมทุกวันครับ

แนวทางเขียน HTML 5 ที่ดี

14/05/201614/05/2016 โค้ชเอก Leave a comment

**HTML 5** ได้ทำการปรับปรุงภาษา HTML ครั้งล่าสุดเพื่อเพิ่มอิลิเมนต์ในด้านภาษาและฟีเจอร์ใหม่ๆ พร้อมกับปรับปรุงฟีเจอร์เดิมที่มีอยู่แล้ว รวมถึง API ต่างๆ มากมายให้เราเลือกใช้ สำหรับแนวทางที่เราควรพิจารณาและเขียนโค้ด HTML 5 มี 5 ข้อดังนี้

1. ใช้ตัวอักษรตัวเล็กกับทุกอิลิเมนต์และแอตทริบิวต์

2. แม้ว่าบางอิลิเมนต์จะไม่จำเป็นต้องใส่แท็กปิด ก็ควรจะปิดถ้ามีเนื้อหาอยู่ข้างใน เช่น

<p>hello</p>

1	<p>hello</p>

3. บางแอตทริบิวต์แม้ว่าเราสามารถละไม่ใส่เครื่องหมายคำพูด แต่ก็ควรจะใส่เครื่องหมายคำพูดเสมอเพื่อความสอดคล้องกัน

4. ควรละไม่ใส่เครื่องหมายแสลช (/) ที่ใช้ปิดอิลิเมนต์ที่ไม่มีเนื้อหา เช่น

<input type="text" name="user">

1	<input type="text" name="user">

5. หลีกเลี่ยงการกำหนดค่าที่ซ้ำซ้อนสำหรับแอตทริบิวต์แบบบูลีน เช่น ให้ใช้

input type="checkbox" checked>

1	input type="checkbox" checked>

แทนที่จะใช้

<input type="checkbox" checked="checked">

1	<input type="checkbox" checked="checked">

5 ข้อที่ว่ามาข้างต้นอาจไม่ได้เป็นสากล แต่จะทำให้โค้ดของเราดูสะอาด เป็นระเบียบ ง่ายต่อการอ่าน และง่ายต่อการแก้ไขในอนาคตนั่นเอง มาเปลี่ยนเว็บไซต์ของเราเป็น HTML 5 กันครับ!!

3 ข้อแนะนำสำหรับโปรแกรมเมอร์มือใหม่

14/05/201614/05/2016 โค้ชเอก Leave a comment

1. พิมพ์ด้วยมือของคุณเอง เพราะการพิมพ์จะทำให้คุณเกิดทักษะมากขึ้น เมื่อมีทักษะมากขึ้นจะทำให้การเขียนโปรแกรมได้ดีและเร็วขึ้น

2. ข้อความ error เกิดขึ้นได้เสมอและมีสาเหตุ ไม่ใช่อยู่ดีๆมันจะเกิดขึ้นมาเอง ตรวจสอบให้ดีว่าพิมพ์ถูกต้องหรือไม่ แก้ไขข้อผิดพลาดอย่างมีเหตุผล เมื่อเกิด error 1,000 ครั้ง แสดงว่าคุณรู้วิธีแก้ error ใหม่ๆ เพิ่มอีก 1,000 วิธี

3. อ่านหนังสือหลายๆเล่ม เพราะแต่ละเล่มเขียนจากผู้เขียนคนละคนกัน มีประสบการณ์แตกต่างกัน แม้เรื่องเดียวกันยังมีการยกตัวอย่างไม่เหมือนกัน มันจะทำให้คุณได้ไอเดียใหม่ๆ แนะนำให้อ่านทั้งภาษาไทยและอังกฤษ

ข้อคิด “ความผิดพลาดของคนส่วนใหญ่ คือ เขาไม่เข้าใจว่าความสำเร็จนั้นเกิดจากการพยายามทีละเล็กทีละน้อย และมันไม่มีทางลัด”

12 ข้อแนะนำการเขียน CSS ที่ดีสำหรับมือใหม่

14/05/201614/05/2016 โค้ชเอก Leave a comment

1. ไม่เขียนคำสั่งให้ซ้ำซ้อน ควรแยกคำสั่งให้อ่านง่ายในแต่ละบรรทัด

2. เขียนและตั้งชื่อให้สื่อความหมาย เช่น การตั้งชื่อคลาสต่างๆให้ดูแล้วรู้เลยว่าเอาไว้ทำอะไร

3. ใช้การ Reset CSS เพราะ reset css จะช่วยลดความไม่เข้ากันของแต่ละ Browsers ได้

4. ในไฟล์ css ควรออกแบบจากบนลงล่างให้สอดคล้องกับโครงสร้างหน้าเว็บที่เป็น HTML

5. ควรรวม หรือจัดกลุ่ม elements html ที่มีค่าเหมือนๆกันไว้ด้วยกัน เช่น

h1,h2,h3 {
font-size: 20px;
color: red;
}

h1,h2,h3 {

font-size: 20px;

color: red;

}

6. ควรออกแบบและเขียนโครงสร้าง HTML ก่อน ค่อยสร้างไฟล์ CSS ทีหลัง

7. ใช้ DOCTYPE ของเอกสาร HTML ให้ถูกต้อง เช่น HTML5 จะเป็น

<!DOCTYPE html>

1	<!DOCTYPE html>

8. ควรใช้การเขียนแบบ Shorthand เพื่อให้โค้ดสั้นลง
เช่น

margin: 8px 7px 0px 5px;

1	margin: 8px 7px 0px 5px;

9. ใส่ comment หรือหมายเหตุด้วย เพื่อตัวเราเองหรือคนอื่นมาพัฒนาต่อจะได้เข้าใจได้ง่าย

10. ใช้ CSS compressors เพื่อช่วยลดขนาดไฟล์ให้น้อยลง ทำให้โหลดได้เร็วขึ้น

11. ถ้าอยากจัดกึ่งกลางให้ layouts ควรใช้

"margin: 0 auto;"

1	"margin: 0 auto;"

12. ลองใช้ CSS Framework เพื่อลดระยะเวลาพัฒนา จะได้เอาเวลาไปคิดไอเดียอื่น

3 ขั้นตอน ง่ายๆ config XAMPP ให้สามารถเข้าถึงจากเครื่องอื่นได้

14/05/201614/05/2016 โค้ชเอก 2 Comments

1. เปิดไฟล์ http-xampp.conf ขึ้นมาโดยเข้าไปที่ C:\xampp\apache\conf\extra ครับ

2. เมื่อเปิดไฟล์แล้ว เลื่อนลงมาล่างสุด ในส่วนของ LocationMatch เลือกตั้งค่าได้ดังนี้

2.1 ถ้าอยากให้เข้าถึงได้จากทุกเครื่องให้ config ดังนี้

<LocationMatch "^/(?i:(?:xampp|security|licenses|phpmyadmin|webalizer|server-status|server-info))">
Allow from all
‪#‎Require‬ local
ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
</LocationMatch>

Allow from all

‪#‎Require‬ local

ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var

</LocationMatch>

2.2 แต่ถ้าอยากให้สามารถเข้าถึงได้เฉพาะบางไอพี หรือเครื่อง ก็ให้ config ดังนี้

<LocationMatch "^/(?i:(?:xampp|security|licenses|phpmyadmin|webalizer|server-status|server-info))">
Order deny,allow
Deny from all
Allow from ::1 127.0.0.0/8 192.168.1.3 192.168.1.4
‪#‎ไอพีเครื่องในเครือข่ายที่อนุญาตให้พิมพ์เว้นวรรคได้ครับ‬
#Require local
ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
</LocationMatch>

Order deny,allow

Deny from all

Allow from ::1 127.0.0.0/8 192.168.1.3 192.168.1.4

‪#‎ไอพีเครื่องในเครือข่ายที่อนุญาตให้พิมพ์เว้นวรรคได้ครับ‬

#Require local

ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var

</LocationMatch>

3. Save ไฟล์ แล้ว Restart Apache อีกครั้ง ลองทดสอบโดยเข้าด้วยไอพีของเครื่องที่ติดตั้ง XAMPP ดูครับ
เช่น http://192.168.1.3/phpmyadmin

แค่นี้ก็เรียบร้อย 🙂

สาระน่ารู้เกี่ยวกับ Angular 2 เรื่อง Pipes

14/05/201614/05/2016 โค้ชเอก 1 Comment

Pipes ใน Angular 2 มีไว้สำหรับ transform, filter หรือไว้จัดรูปแบบข้อมูลต่างๆ เราสามารถแทรก | เข้าไปใน html ได้เลย

1. uppercase มีไว้แปลงตัวอักษรให้เป็นตัวพิมพ์ใหญ่ทั้งหมด

{{ ‘Coding Thailand’ | uppercase }}

<!– ผลลัพธ์ คือ CODING THAILAND –>

2. lowercase มีไว้แปลงตัวอักษรให้เป็นตัวพิมพ์เล็กทั้งหมด

{{ ‘Coding Thailand’ | lowercase }}

<!– ผลลัพธ์ คือ coding thailand –>

3. number ใช้สำหรับจัดรูปแบบของตัวเลขต่างๆ เช่น

{{ 12345 }}

<!– ผลลัพธ์ คือ ‘12345’ –>

{{ 12345 | number }}

<!– ผลลัพธ์ คือ ‘12,345’ –>

{{ 12345 | number:’6.’ }}

<!– ผลลัพธ์ คือ ‘012,345’ –>

{{ 12345 | number:’.2′ }}

<!– ผลลัพธ์ คือ ‘12,345.00’ –>

4. percent จัดรูปแบบข้อมูลในรูปแบบ %

{{ 0.8 | percent }}

<!– ผลลัพธ์ คือ ‘80%’ –>

{{ 0.8 | percent:’.3′ }}

<!– ผลลัพธ์ คือ ‘80.000%’ –>

5. currency ใช้สำหรับจัดรูปแบบในรูปสกุลเงิน

{{ 10.6 | currency:’EUR’ }}

<!– ผลลัพธ์ คือ ‘EUR10.6′ –>

{{ 10.6 | currency:’USD’:true }}

<!– ผลลัพธ์ คือ ‘$10.6′ –>

{{ 10.6 | currency:’USD’:true:’.2′ }}

<!– ผลลัพธ์ คือ ‘$10.60’ –>

6. date ใช้สำหรับจัดรูปแบบวันที่และเวลา

{{ birthday | date:’ddMMyyyy’ }}

<!– ผลลัพธ์ คือ ’07/16/1986′ –>

{{ birthday | date:’longDate’ }}

<!– ผลลัพธ์ คือ ‘July 16, 1986′ –>

{{ birthday | date:’HHmmss’ }}

<!– ผลลัพธ์ คือ ’15:30:00′ –>

{{ birthday | date:’shortTime’ }}

<!– ผลลัพธ์ คือ ‘3:30 PM’ –>

ป.ล. เราสามารถใช้ความรู้ตรงนี้กับ Ionic Framework 2 ได้ด้วยนะครับ

ป.ล. 2 เราสามารถสร้าง Pipes แบบ custom ของเราเองได้ด้วยนะครับ เช่น อยากเอา Moment.js มาใช้สำหรับจัดรูปแบบหรือจัดการเกี่ยวกับวันที่ก็ได้ 🙂

4 แนวทางการเขียนโค้ดให้อ่านง่าย ไม่เป็นภาระของตัวเอง และผู้อื่น

14/05/201614/05/2016 โค้ชเอก Leave a comment

picjumbo.com_HNCK2364 (1)

1. อย่าใช้ตัวย่อกับตัวอักษรทุกอย่างที่เขียน ให้เขียนแบบเต็ม เช่น

ถ้าจะเขียน class เกี่ยวกับการสั่งซื้อ ก็อย่าย่อ ใช้แบบเต็มสื่อความหมายไปเลยครับ เช่น

//ไม่ควรเขียนย่อเอง
class Odr {

}
 
//ควรเขียนเป็น
class Order {

}

//ไม่ควรเขียนย่อเอง

class Odr {

}

//ควรเขียนเป็น

class Order {

}

2. ตัวแปร ตั้งให้สื่อความหมาย

3. ตั้งชื่อ method ให้สื่อความหมายเต็มๆเลยว่ามันเอาไว้ทำอะไรกันแน่

แบบนี้ไม่ควรตั้ง

public function fetch($BillId) {

}

public function fetch($BillId) {

}

ตั้งแบบนี้ดีกว่า รู้เลยว่า พารามิเตอร์คืออะไร (เคลียร์)

public function fetchByBillId($id) {

}

public function fetchByBillId($id) {

}