แนวทางที่ดีในการเขียน PHP Framework แบบ MVC

แนวทางและข้อปฏิบัติในการเขียน PHP Framework แบบ MVC (กรณีศึกษา Yii Framework 2)


[Models]
Models เป็นศูนย์รวมเกี่ยวกับข้อมูลของระบบ มีกฎตรวจสอบความถูกต้อง และตรรกะเกี่ยวกับระบบของเรา ใช้สำหรับควบคุมและการทำงานของข้อมูลต่างๆ แน่นอนส่วนใหญ่แล้ว Models โค้ดมักเยอะกว่า Controllers มีแนวทางการเขียน ดังนี้

1. ควรประกอบไปด้วย attributes หรือคุณลักษณะของข้อมูล
2. มีส่วนในการตรวจสอบความถูกต้องของข้อมูล
3. ประกอบไปด้วย method ที่เกี่ยวกับ business logic
4. ไม่มีการเขียนเกี่ยวกับ request, session
5. ไม่มีการเขียนส่วนแสดงผล html แน่นอนให้ไปเขียนที่ views แทน
6. หลีกเลี่ยงการมีหลาย scenarios ใน 1 Models

 

[Views]
Views มีหน้าที่เกี่ยวกับการแสดงผลส่วนหน้าเว็บ ประกอบด้วยการจัดรูปแบบข้อมูล การแสดงผลตาม users ต้องการ มีแนวทางการเขียน ดังนี้
1. ประกอบไปด้วยโค้ดในส่วนของการแสดงผล เช่น HTML และโค้ด PHP สั้นๆ เกี่ยวกับกับการจัดรูปแบบข้อมูล หรือ render ข้อมูล
2. ไม่มีโค้ดเกี่ยวกับการจัดการ การ query ข้อมูลจากฐานข้อมูล ส่วนนี้ให้ไปเขียนที่ Models แทน
3. หลีกเลี่ยงการรับข้อมูลแบบ request เช่น $_GET,$_POST ส่วนนี้แนะนำให้ไปเขียนที่ Controller แทน
4. ให้อ่านและเรียกคุณลักษณะ (properties) ของโมเดล แต่ให้หลีกเลี่ยงการการแก้ไข
5. ถ้าส่วนแสดงผลมีการทำงานซ้ำๆ กัน ก็ควรแยกไปใช้ layout หรือสร้างและใช้งาน widgets ในการสร้าง views เป็น blocks แทน
6. สร้างและใช้งาน helper class ต่างๆ ในการจัดรูปแบบข้อมูล เช่น Html helper, Url Helper เป็นต้น

 

[Controllers]
Controllers มีหน้าที่เกี่ยวกับการประมวลผล requests และ responses เมื่อเขียน Controllers แล้วรู้สึกว่าโค้ดมันเริ่มเยอะ ควรแยกโค้ดบางส่วนแยกเป็นคลาสอื่นดีกว่า มีแนวทางการเขียน ดังนี้
1. มีไว้เขียนเกี่ยวกับ request ข้อมูล เช่น get, post, put
2. มีไว้เรียกเมธอดเกี่ยวกับ Models และ เรียก component ต่างๆ
3. มีไว้ส่งข้อมูลต่างๆ ไปให้ views เพื่อนำไปแสดงผล
4. ไม่ควรมีโค้ดการประมวลผลของ Models ถ้ามีให้ไปเขียนที่ Models ดีกว่า
5. หลีกเลี่ยงการเขียน HTML และโค้ดที่เกี่ยวข้องกับการแสดงผลข้อมูล ให้ไปเขียนที่ views ดีกว่า

 

[Security best practices]
(แนวทางการเขียนเพื่อความปลอดภัยของระบบ) มีแนวทางดังนี้

1. Filter input แน่นอนเราไม่สามารถไว้ใจ input ที่เข้ามาในระบบได้ เราควรเขียนโค้ดเพื่อกรองข้อมูลเหล่านี้โดยใน yii เราสามารถใช้ form validation ได้
2. ระวังเรื่อง SQL injections แน่นอนควรใช้การ prepared statements โดยใน yii มีส่วนจัดการฐานข้อมูลให้อยู่แล้ว ได้แก่ Active Record (มี prepared statements มาพร้อมแล้ว)
และมีในส่วนของ Database Access Objects และ Query Builder (อันนี้ต้องเขียนในส่วน prepared statements ระวังด้วยครับ)
3. ระวัง XSS หรือ cross-site scripting แนวทางการป้องกันมี 2 วิธีง่ายๆ ได้แก่
3.1 ใช้คลาส Html helper และเรียก method encode สำหรับการทุกๆการแสดงผล เช่น

<?= \yii\helpers\Html::encode($username) ?>

3.2 ถ้าส่วนเนื้อหามีโค้ด html ติดมาด้วยให้ใช้คลาส HtmlPurifier และเรียกใช้ method process เข้าช่วยครับ เช่น

<?= \yii\helpers\HtmlPurifier::process($description) ?>

3.3 ให้เปิดในส่วนของ CSRF เพื่อป้องกันการปลอม request
3.4 อย่าลืมปิดเครื่องมือเกี่ยวกับการ debug เมื่อจะเอาขึ้นใช้งานจริง (กำหนด YII_DEBUG ให้เป็น false)

 

เป็นไงกันบ้างครับ ลองเอาไปใช้ดูได้นะครับ 🙂

20 แนวทางการเขียน JavaScript ที่ดี

javascript-736400_640

1. ใช้เครื่องหมาย === และ !== แทนการใช้ == และ != เมื่อมีการเปรียบเทียบเสมอ

2. ปิดท้ายคำสั่งด้วยเครื่องหมาย ; ทุกครั้ง

3. ใช้ JSLint (http://www.jslint.com) ในการหาตรวจสอบคุณภาพโค้ด และตรวจดู errors ต่างๆ

4. ถ้ามีการเปิด blocks ของโค้ด ให้เขียนวงเล็บปีกกาในบรรทัดเดียวกัน เช่น

if (findSite === 'codingthailand.com')  {
console.log('free programming courses!!');
}

5. การประกาศตัวแปร (Variables) ให้ประกาศบรรทัดแรกทุกครั้งโดยเฉพาะฟังก์ชันเพื่อป้องกันปัญหาเรื่อง global variable เช่น

function showSkills() {
var yourSkill = 'JavaScript'; //ประกาศบรรทัดบนสุดตรงนี้
console.log(yourSkill);
}

6. การประกาศตัวแปรให้ขึ้นต้นด้วย var ทุกครั้ง

7. ใช้วงเล็บปีกกา {} เสมอในกรณีที่ประกาศบล็อกมากกว่าหนึ่งบล็อก (blocks) ถ้ามี 1 บล็อกก็ให้อยู่บรรทัดเดียวกัน เช่น

if (someVar) 
x = false //ไม่ดี
ให้เขียนเป็น
if (someVar) x = false; //ดี
หรือ
if (someVar) {
x = false; //ดี
y = true; 
}

8. การ embed โค้ด แทรกโค้ด javascript ให้แทรกด้านล่างของหน้าเว็บเสมอ (ก่อน tag body)

9. ประกาศตัวแปรต่างๆ ไว้นอกคำสั่ง for เสมอ เมื่อประกาศแล้ว ค่อยนำมาใช้ใน for เช่น

var userName = document.getElementById('user');
for (var i = 0, len = someArr.length; i < len; i++) {
userName.innerHtml += 'my number: ' + i; //เรียกใช้ userName แบบนี้
console.log(i);
}

10. อย่าเอาคำสั่งที่เป็นตัวอักษร (String) ไปไว้ในคำสั่ง “SetInterval” หรือ “SetTimeOut” เช่น

setInterval("document.getElementById('container').innerHTML += 'My new number: ' + i", 3000);

ให้เขียนเป็นฟังก์ชันแล้วเรียกใช้ดีกว่า

setInterval(someFunction, 3000);

11. ถ้าจะสร้าง Object ใหม่ให้ใช้ {} ปีกกา แทนการใช้ New Object() เช่น

var obj = {
name: 'Akenarin',
lastName: 'Komkoon',
showSkill : function() {
console.log(this.name);
}
}

12. Arrays ก็เช่นกันให้ใช้ [] แทน New Array()

13. ลบคำว่า “language” ออกจากคำสั่ง script เพราะมันไม่จำเป็นแล้ว
จาก

<script type="text/javascript" language="javascript">
....
</script>

เขียนแค่นี้พอ

<script type="text/javascript">
....
</script>

หรือ

<script>
....
</script>

14. ถ้าประกาศ Objects อย่าใช้คำสงวน เป็นคีย์ (key) เพราะมันจะใช้ไม่ได้ใน IE8

15. ใช้ฟังก์ชัน push ของ Array ในการกำหนดค่าเข้าไปในแทนการใส่ค่าโดยตรง เช่น

var someArr = [];
someArr.push('hello');
หลีกเลี่ยง
someArr[0] = 'hello';

16. ใช้เครื่องหมาย Single quotes (‘) สำหรับสตริง (String) เช่น

var myweb = 'codingthailand.com';
console.log('My website is ' + myweb);

17. ใช้เครื่องหมายจุด . ในการเข้าถึงพรอพเพอร์ตี้ (properties) ของ Objects เช่น

var programmer = {
name : 'akenarin',
skill : 'html'
}

ตอนเข้าถึง properties ให้เรียกแบบนี้

programmer.name;
programmer.skill;

18. ใช้หนึ่ง var หรือหนึ่ง let ต่อหนึ่งตัวแปร เพราะดูง่าย และป้องกันความผิดพลาด เช่น

var items = getItems();
var goSportsTeam = true;
var dragonball = 'z';

19. ตัวแปรที่ยังไม่มีค่า ให้ประกาศไว้ข้างหลังสุดของการประกาศตัวแปรทั้งหมด เช่น

var items = getItems();
var goHome = true;
var football;
var car;

20. ใช้การเขียนโค้ดแบบ camelCase คือ ขึ้นต้นด้วยตัวเล็กและคำต่อไปขึ้นต้นด้วยตัวใหญ่ เมื่อต้องการตั้งชื่อออบเจ็กต์, ฟังก์ชัน, และ อินสแตนซ์ และ ใช้ PascalCase คือ ขึ้นต้นทุกคำด้วยตัวใหญ่ เมื่อต้องการตั้งชื่อ constructor หรือ คลาส

แน่นอนทั้ง 20 ข้อนี้บางข้อเป็นเพียงข้อแนะนำ ก็ลองปรับให้เข้ากับตัวเองดูนะครับ 🙂

6 เทคนิคการเขียนคำสั่ง PHP ให้ทำงานเร็วขึ้น

1. ใช้เครื่องหมายคอมม่า (,) แทนเครื่องหมายจุด (.) ในการเชื่อมต่อ string เช่น

<?php
echo "สวัสดี "."ชาวไทย. "."สบาย "."ดีไหม?"; //ช้า 
echo "สวัสดี ","ชาวไทย. ","สบาย ","ดีไหม?"; //เร็วขึ้น

2. เมื่อต้องการแสดงตัวแปรให้ใช้เครื่องหมาย Double Quotes ครอบไว้เร็วกว่า เช่น

<?php
$name = "Akenarin Komkoon";
echo 'สวัสดี '.$name; //ช้า
echo "สวัสดี $name"; //เร็วขึ้น

3. ถ้าแสดงผลเฉพาะ string อย่างเดียวไม่มีตัวแปรข้างใน ใช้ single quotes ( ‘ ‘ ) เร็วกว่า double quotes(“”) นะ เช่น

<?php
echo "Akenarin Komkoon"; //ช้ากว่า
echo 'Akenarin Komkoon'; //เร็วขึ้น

4. ถ้ามี array เยอะๆ การวนลูปแนะนำให้ใช้ foreach (เร็วที่สุด) ตามด้วย while และ for ตามลำดับ

5. การอ่านหรือเปิดไฟล์ ฟังก์ชัน file_get_contents() เร็วกว่า fread() ทั้งไฟล์เล็กและไฟล์ขนาดใหญ่<br />

6. เลิกใส่เครื่องหมาย @ ไว้หน้าคำสั่ง เพื่อหยุด Error มันทำให้การทำงานช้าลงนะ<br />

อันนี้เน้นเฉพาะการเขียนโค้ดนะ จริงๆต้องปรับส่วนอื่นๆด้วยนะครับ เช่น Web Server, Database เป็นต้น 🙂

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

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

  1. ควรกรองข้อมูลอักขระพิเศษต่างๆ จาก HTML ด้วย เช่น การใช้ฟังก์ชัน htmlentities() ตัวอย่าง
    <?php 
    $input = '<p><script>alert("ยินดีด้วยคุณถูกรางวัลที่ 1!");</script></p>'; 
    echo htmlentities($input, ENT_QUOTES, 'UTF-8');
    ?>

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

     

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

  3. การตรวจสอบความถูกต้องข้อมูลเราสามาถใช้ฟังก์ชัน 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"; }
    ?>

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

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

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

หลายคนที่เขียน 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
}

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;
}

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

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

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

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

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

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

<p>hello</p>

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

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

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

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

input type="checkbox" checked>

แทนที่จะใช้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>

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

margin: 8px 7px 0px 5px;

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

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

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

"margin: 0 auto;"

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

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

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>

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>

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

 

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

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

ng2

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


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

<p>{{ ‘Coding Thailand’ | uppercase }}</p>

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

 

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

<p>{{ ‘Coding Thailand’ | lowercase }}</p>

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

 

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

<p>{{ 12345 }}</p>

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

 

<p>{{ 12345 | number }}</p>

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

 

<p>{{ 12345 | number:’6.’ }}</p>

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

 

<p>{{ 12345 | number:’.2′ }}</p>

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

 

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

<p>{{ 0.8 | percent }}</p>

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

 

<p>{{ 0.8 | percent:’.3′ }}</p>

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

 

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

<p>{{ 10.6 | currency:’EUR’ }}</p>

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

 

<p>{{ 10.6 | currency:’USD’:true }}</p>

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

 

<p>{{ 10.6 | currency:’USD’:true:’.2′ }}</p>

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

 

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

 

<p>{{ birthday | date:’ddMMyyyy’ }}</p>

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

 

<p>{{ birthday | date:’longDate’ }}</p>

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

 

<p>{{ birthday | date:’HHmmss’ }}</p>

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

 

<p>{{ birthday | date:’shortTime’ }}</p>

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

 

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