สอน Laravel 5 ตอนที่ 1 ดาวน์โหลดและติดตั้ง

     บทความนี้เป็นบทความแรกในรอบ 2 ปีที่หายไป อ่านเหตุผลที่หายไปที่นี่ >> http://php-for-ecommerce.blogspot.com/2016/02/im-come-back.html ตอนนี้เริ่มมีไฟที่อยากจะเขียนบทความอีกครั้ง แต่ก็ไม่รู้ว่าจะหมดไฟตอนไหนเหมือนกันครับ 55 ตอนนี้เทคโนโลยีการเขียนเว็บเริ่มเปลียนแปลงไปบ้างแล้ว เช่น  Yii เวอร์ชั่น 2 , Bootstrap 4 ก็จะมาแล้ว,UTF8MB4 จะถูกนำมาใช้แทนที่ UTF8 ใน MySQL แล้ว เป็นต้น
     รวมถึง PHP Framework เริ่มมีการเปลี่ยนแปลงความนิยม จากที่เมื่อก่อนฮิตไล่มาตั้ง CakePHP, Yii Framework กัน แต่ตอนนี้ Laravel เริ่มมาแรงแล้ว เหตุผลหลักๆคือเรื่องของความปลอดภัย และความยืดหยุ่นในการทำงานเป็นทีม เพราะโค๊ดสะอาด อ่านง่ายเข้าใจง่าย ตามสโลแกน Love beautiful code? We do too.
     นอกเรื่องไปเยอะแล้ว บทความนี้จะสอนวิธีดาวน์โหลดและติดตั้ง Laravel 5 กันครับ เมื่อกี้เพิ่งติดตั้งเสร็จไป สรุปก็คือติดตั้งง่ายมากครับ โดยเราจะติดตั้งผ่านโปรแกรม Composer ครับ แต่ต้องใช้คำสั่ง Command Line เป็นหลักครับ โดยให้ทำตามนี้

กลับมาแล้วครับ (I'm come back)

    ห่างหายจากการเขียนบทความไปนานเลยครับ  ไม่ได้เกิดจากปัญหาสุขภาพหรือหมดไฟแต่อย่างใด เกิดจากความอินดี้ของผมเองครับ 555 ไม่ได้เลิกเขียนบทความเพื่อไปทำอะไรที่ยิ่งใหญ่อะไรหรอก ผมหยุดพัฒนาตัวเองไปปีนึงครับ ช่วง 1 ปีที่หายไป ไม่ค่อยได้ศึกษาด้านการพัฒนาโปรแกรม หรือพัฒนาเว็บไซต์อะไรเพิ่มเติมซักเท่าไหร่ และยังเป็นพนักงานออฟฟิศกินเงินเดือน ทำงานเป็นโปรแกรมเมอร์เหมือนเดิม พัฒนาเว็บไซต์ธรรมดาทั่วไป ใช้ PHP Framework ของบริษัท
      แต่สิ่งที่เป็นสาเหตุที่ผมหายไปจริงๆ ก็คือ.. ผมขายของออนไลน์ครับ 555 ทำให้มีรายได้มากกว่าเป็นพนักงานกินเงินเดือนประจำ หรือรับทำเว็บ แก้ไขเว็บไซต์ทั่วไปมากกว่า 3 เท่าเลยทีเดียว แต่ไม่ถึงขนาดต้องลางานประจำเพื่อมาค้าขายครับ ผมก็ยังทำงานประจำกินเงินเดือนไปด้วย และขายของออนไลน์ไปด้วยครับ
     ต่อไปท่านจะได้อ่านบทความสอน PHP อีกแน่นอน แต่อาจจะใช้เวลาคลอดนานหน่อยครับ 55 เพราะยุ่งอยู่กับงานประจำและขายของครับ
    สุดท้ายนี้ อยากจะบอกว่า จงทำในสิ่งที่ตนเองถนัดและมีความสุขกับมัน ครับ ทุกวันนี้ผมทำงานเขียนโปรแกรมไปด้วยและขายของออนไลน์ไปด้วย ...โครตมีความสุขเลยครับ

jQuery กับการเลือก CheckBox ทั้งหมด

    วันนี้จะขอแนะนำโค๊ดของ jQuery ที่เกี่ยวข้องกับการเลือก CheckBox ทั้งหมด (Select All) โดยโค๊ดที่ผมนำเสนอนี้ จะมี 2 ส่วน คือ สำหรับ jQuery เวอร์ชั่นต่ำกว่า 1.6 กับเวอร์ชั่น 1.6 หรือสูงกว่า
    เพราะ jQuery ตั้งแต่ 1.6 ขึ้นไปจะมีฟังก์ชั่นที่ว่า prop เข้ามาเพื่อตรวจสอบการกระทำกับเหตุการณ์ ที่เกิดขึ้น 2 เหตุการณ์ เช่นการติ๊กเลือกที่ CheckBox หรือ ไม่ติ๊กเลือก CheckBox ทำให้การเขียนคำสั่งกับ jQuery 1.6 หรือเวอร์ชั่นที่สูงกว่า ไม่ซับซ้อน และได้ผลลัพธุ์ที่รวดเร็วยิ่งขึ้นครับ

มาดูโค๊ดกันเลยครับ
1. สำหรับ jQuery เวอร์ชั่นต่ำกว่า 1.6 ซึ่งไม่มีฟังก์ชั่น prop เราจะใช้คำสั่งเหล่านี้แทนครับ

$(function() {
     $('#selectAll').change(function () {
  //ใช้ได้กับ jQuery เวอร์ชั่นต่ำกว่า 1.6
  if($(this).attr('checked')){//ตรวจสอบว่า checkbox  id=selectAll ถูกเช็คอยู่หรือไม่ ถ้าถูกเช็คอยู่
  $('.product_select').each(function() {//วนลูป checkbox class=product_select  ทั้งหมด
   $(this).attr('checked','checked'); //กำหนด class=product_select ให้ถูกเช็ค(checked)ทั้งหมด
   //โดยเพิ่ม attribute คือ checked="checked" เข้าไปทั้งหมด
  });
  }else{//ถ้าไม่ถูกเช็ค หรือติ๊กออก
   $('.product_select').each(function() {//วนลูป checkbox class=product_select ทั้งหมด
   $(this).removeAttr('checked');//ลบ attribute checked="checked" ออกจาก checkbox class=product_select ทั้งหมด
  });
  }
       });
});

2. สำหรับ jQuery เวอร์ชั่น 1.6 หรือสูงกว่า โดยใช้ฟังก์ชั่น prop เราจะใช้คำสั่งสั้นๆดังนี้

PHP การใช้ Regex แทนที่ link ให้กับข้อความที่เป็น URL

บทความนี้ไม่ได้เรียกว่าสอนครับ แค่อยากนำโค๊ดPHPจากเว็บต่างประเทศมาดัดแปลงให้รองรับ URL ภาษาไทย มาแจกเท่านั้น
    เรื่องของเรื่องคือ ผมทำเว็บอยู่เว็บนึง โดยให้ลูกค้ากรอกรายละเอียด ซึ่งในรายละเอียดลูกค้าอาจนำ URL มาใส่เช่น http://www.lazada.co.th แต่ผมอยากให้มันสามารถคลิกที่ URL แล้ว link ไปที่เว็บนั้นๆเลย ด้วยความขี้เกียจก็เลยลองเสิร์ทดูวิธีทำ ก็เจอเว็บนี้ครับ http://snipplr.com/view.php?codeview&id=36992
     โค๊ดค่อนข้างสมบูรณ์ แต่รองรับเฉพาะภาษาอังกฤษ ไม่รองรับชื่อ โดเมน หรือ URL ภาษาไทย และผมเองก็พอมีความรู้เรื่องของ Regular Expression (Regex) อยู่บ้าง ก็เลยนำมาดัดแปลงนิดหน่อย ก็เลยได้ URL ที่รองรับทั้งภาษาไทยและภาษาอังกฤษ โดยใช้คำสังดังนี้

function link($text) {
    return preg_replace('@((https?://)+([-\w]+\.[-\w\.]*[ก-๙]*)+\w(:\d+)?(/([-\w/_\.]*[ก-๙]*(\?\S+)?)?)*)@', '<a href="$1" target="_blank">$1</a>', $text);
}

วิธีใช้งาน เช่น

 <?php
       $txt='http://lazada.co.th,http://รับทำเว็บ.com/ราคา';
       echo link($txt);
?>

ลองRUNดูผลลัพธุ์เอาเองนะครับ รับรองว่า แจ่ม!!!!
ปล.ถ้าไม่ใส่ http:// link จะไม่แสดงนะครับ

AngularJs ใช้งามร่วมกับ PHP + MySQL : การค้นหาและแสดงข้อมูลจากฐานข้อมูล

     บทความนี้จะสอนเรื่องการทำงานของ AnularJs ร่วมกับภาษา PHP และฐานข้อมูล MySQL โดยจะทำงานแบบ AJAX กันครับ โดยผลลัพธุ์ที่เราต้องการคือ เมื่อเพจถูกโหลดขึ้นมา ให้ AngularJs ไปดึงข้อมูลจากไฟล์ php แบบ AJAX แล้วไฟล์ PHP มีหน้าที่ดึงรายการสินค้าจากฐานข้อมูล MySQL ทั้งหมดไปแสดงหน้าแสดงรายการสินค้า
     ส่วนการค้นหาสินค้า เราจะใช้ Filter ของ AnularJs ซึ่งคือ คอมโพเน้นท์ตัวนึง ที่มีหน้าที่กรองข้อมูลก่อนนำมาแสดงผล โดย Filter Component จะต้องผูกกับ ng-model ของช่องค้นหา และผมใช้ Theme จาก Bootstrap นะครับ เพื่อให้แสดงผลได้ทุกอุปกรณ์เช่น PC,มือถือ,แท็บเลต

มาดูโค๊ดกันครับ

1.ไฟล์ showpd.html หน้าหลักสำหรับแสดงรายการสินค้า โดยเราจะให้ AnglarJs ทำงานจากหน้านี้ โดยการไปร้องขอไปยังไฟล์ showpd.php เพื่อนำข้อมูลจากไฟล์มาแสดงจากหน้านี้ เราจะใช้คำสั่งดังนี้

<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://bootswatch.com/yeti/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript" src="dbcontroller.js"></script>
<title>แสดงข้อมูลจากฐานข้อมูล MySQL ด้วย Angular Js + PHP</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8  col-md-offset-2">
<div ng-controller="showdatacontroller ">
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">AngularJs + PHP + MySQL</a>
    </div>
    <div class="collapse navbar-collapse">
  
      <ul class="nav navbar-nav navbar-right">
        <li>
      <form class="navbar-form" role="search">
        <div class="form-group">
                <input ng-model="sData"  class="form-control"  placeholder="ค้นหา"/> 
        </div>
      </form>
      </li>
      <li><a href="#"><span class="glyphicon glyphicon-plus"></span> เพิ่ม</a></li>
</ul>
    </div>
    </div>
</nav>
<table class="table table-striped">
<thead><tr><th>ชื่อสินค้า</th><th  style="width:10%;text-align:center">จัดการ</th></tr></thead>
<tbody><tr ng-repeat="c in showData| filter : sData"><td >{{c.name_pd}}</td>
<td>
<a href="#edit{{c.id_pd}}">แก้ไข</a> | <a href="#del{{c.id_pd}}"> ลบ</a>
</table>
</div>
</div>
</div>
</div>
</body>
</html>

AngularJS คือ

     AngularJs คือ Javascript Framework ที่พัฒนาโดย Google แต่ที่แตกต่างจาก Javascript Framework รูปแบบอื่นเช่น jQuery คือ AngularJs เป็น Javascript แบบ MVC ทำให้พัฒนาได้สะดวกรวดเร็ว ง่ายต่อการเรียนรู้ เพราะมีการแยกส่วนการทำงานที่ชัดเจน เพราะอาศัยหลักการแบบ MVC นั้นเองครับ
     ตอนนี้ผมสนใจจาวาสคริปต์ เฟรมเวิร์ค ตัวนี้อยู่ครับ ถือว่าเป็นมือใหม่อยู่ครับ ตอนนี้กำลังเริ่มศึกษา เพราะมีความยืนหยุ่นสูง เพราะสามารถนำไปประยุกต์ใช้กับ mobile app ผ่าน ionicframework (mobile template)

1.เพิ่ม Attribute ng-app ไว้ที่ tag <html> เช่น
<html ng-app="myapp">

2.เรียกใช้งาน AngularJs ก่อนครับ โดยพิมพ์คำสั่งเหล่านี้ส่วนของ <head>   
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

3.สร้างไฟล์นามสกุล .js ซึ่งจะเป็นส่วนของ controller ให้ชื่ออะไรก็ได้ เช่น mycontroller.js และพิมพ์คำสั่งเหล่านี้ในส่วนของ <head> ต่อจากข้อ 2
<script type="text/javascript" src="mycontroller.js"></script>

4.เพิ่ม tag ng-controller ในส่วนของTagที่อยู่ภายใต้ <body> ซึ่งจะเป็นจุดไหนก็ได้ของ DOM ที่ต้องการให้ครอบคลุม เช่นจะกำหนดในส่วนของ tag body เลยก็ได้
เช่น <body ng-controller="mycontroller as mycon" > หรือใน tag div เช่น <div  ng-controller="mycontroller as mycon">
สำหรับค่า mycontrolelr as mycon ที่อยู่ใน tag ng-controller คือการสร้าง object เพื่อผูกกับส่วนของ template นั่นเองครับ เราจะได้ค่า mycon ไปผูกกับ input ต่างๆ เช่น textfiled ปุ่มต่างๆ ร่วมถึงการแสดงผลลัพธุ์ออกทางหน้าจอผ่านเครื่องหมาย bracket syntax {{}}

การสร้าง webboard ด้วย PHP MySQL ตอนที่ 6 การแก้ไข-ลบกระทู้ และ การแก้ไข-ลบความคิดเห็น

     ต่อจากบทความความตอนที่ 5 ที่ผมได้สอนทำการตั้งกระทู้และการตอบกระทู้หรือความคิดเห็น บทความนี้จะสอนในส่วนของการแก้ไขกระทู้และลบกระทู้ รวมถึงการแก้ไขและลบความคิดเห็นด้วย โดยผู้สามารถแก้ไขกระทู้ได้ต้องเป็นแอดมินและสมาชิก โดยที่สมาชิกสามารถแก้ไขกระทู้ของตัวเองได้เท่านั้น ไม่สามารถแก้ไขของคนอื่นได้ ส่วนแอดมินสามารถทำได้ทั้งหมดครับ แต่สำหรับการแก้ไขหรือลบความคิดเห็น สมาชิกสามารถแก้ไขและลบได้เฉพาะของตัวเอง ส่วนแอดมินสามารถแก้ไขหรือลบได้ทั้งหมดเช่นกัน

Javascript นับตัวอักษร แบบรวมช่องว่างและไม่รวมช่องว่าง

     วันนี้มีโค๊ดของ Javascript ที่ฝึกทำเล่นๆมานำเสนอครับ เป็นโค๊ดง่ายๆที่เอาไว้ใช้ตรวจนับจำนวนตัวอักษรที่เรากรอก หรือข้อความต่างๆที่เราต้องการรู้จำนวนตัวอักษรที่แท้จริง เผื่อเอาไว้เป็นเครื่องมือสำหรับทำ SEO ครับ เพื่อจะได้ตรวจสอบบทความของเรามีขนาดตัวอักษรตรงกับทาง Google กำหนดหรือป่าว โค๊ดไม่มีอะไรมากครับ  ท่านสามารถนำไปประยุกต์ได้ตามต้องการ

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>นับจำนวนตัวอักษรด้วย Java Script แบบรวมช่องว่างและไม่รวมช่องว่าง</title>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px; 
}
</style>
<script type="text/javascript">
 function countTextJs1(){//ฟังก์ชั่นนับจำนวนตัวอักษรรวมช่องว่าง
  var txtForJs1=document.getElementById('txtForJs1').value;
  var countTxt=txtForJs1.length;
    document.getElementById('rs_txtForJs1').innerHTML=countTxt
 }
 function countTextJs2(){//ฟังก์ชั่นนับจำนวนตัวอักษรไม่รวมช่องว่าง
  var txtForJs2=document.getElementById('txtForJs2').value;
  var countTxtNull=0;
  var countTxt=0;
  try{
   countTxtNull=txtForJs2.match(/\s/g).length;//นับจำนวนช่องว่าง
  }catch(e){}
  countTxt=txtForJs2.length-countTxtNull;//จำนวนตัวอักษรทั้งหมด-จำนวนช่องว่าง=จำนวนตัวอักษรไม่รวมช่องว่าง
    document.getElementById('rs_txtForJs2').innerHTML=countTxt
 }
</script>
</head>

<body>
<div>
ป้อนตัวอักษร (รวมช่องว่าง) <input name="txtForJs1" id="txtForJs1" type="text" size="100" onkeyup="countTextJs1()" /> <span id="rs_txtForJs1">0</span>
</div>
<br />
<div>
ป้อนตัวอักษร (ไม่รวมช่องว่าง) <input name="txtForJs2" id="txtForJs2" type="text" size="100" onkeyup="countTextJs2()" /> <span id="rs_txtForJs2">0</span>
</div>
</body>
</html>

SQLite เจอปัญหา database disk image is malformed

     ผมเจอปัญหานี้ใน SQLite ครับ เพราะใช้คำสั่ง Insert Multi Record (เพิ่มข้อมูลหลายๆเรคคอร์ด โดยการวนลูป) พอจะแก้ไขข้อมูล ทำไม่ได้ขึ้นเออเร่อ database disk image is malformed  ทำเอางงอยู่เหมือนกัน เป็นงานเร่งซะด้วย ทำให้ไม่สามารถแก้ไขหรือลบข้อมูลเดิมได้ แต่สามารถเพิ่มข้อมูลใหม่ แก้ไขข้อมูลใหม่ ลบข้อมูลใหม่ได้ ข้อมูลเก่าหรือข้อมูลเดิมที่เพิ่มเข้าก่อนหน้าจะเจอปัญหานี้ ไม่สามารถแก้ไขหรือลบได้
     วิธีแก้ไขปัญหาก็เสิร์ทดูในเว็บต่างประเทศ เห็นเขาบอกให้ใช้คำสั่ง .mode insert ฯลฯ ก็ใช้ไม่ได้ผล ลองมาหมดทุกวิธี จนต้องคิดวิธีแก้ปัญหาด้วยตัวเอง คิดไปคิดมา วิธีแก้ปัญหามันช่างง่ายแสนง่าย เพราะไปเสียเวลากับวิธีแก้ปัญหาของคนอื่น

วิธีแก้ปัญหานะครับ

1.Export Database ที่มีปัญหาออกมาก่อน โดยใช้โปรแกรม SQLite Manager ซึ่งเป็น AddOn ของ Firefox ให้ติดตั้งให้เรียบร้อย วิธีใช้งานก็ดูตามนี้ http://php-for-ecommerce.blogspot.com/2013/06/sqlite-php.html  ให้เปิด Database เจ้าปัญหาออกมาก่อน และไปที่เมนู Database เลือก Export Database ดังรูป

จะได้ไฟล์ .sql ให้เราSaveเก็บไฟล์ไว้ตรงไหนก็ได้ ดังรูป

Reset Dreamweaver ให้เป็นค่าเริ่มต้น

ปัญหานี้เจอมากับตัวเลยครับ ทำให้เข้าใจผิดว่าไปเผลอกดSetค่าอะไรกับDramweaverของเราหรือป่าว ทำให้ไม่สามารถSaveไฟล์งาน สร้างไฟล์ใหม่ (New...) หรือใช้คุณสมบัติ Undo,Redo ไม่ได้
ปัญหานี้เกิดจากความผิดพลาดของ Cache Dramweaverเองครับ วิธีแก้ก็คือ

1.ถ้าหากคุณกำลังเปิดโปรแกรมDreamweaverอยู่ ให้ปิดโปรแกรมDramweaverก่อนครับ
2.เปิดFolderที่เก็บไฟล์ cache ของDreamweaver ตามPathนี้
C:\Documents and Settings\ชื่อUserของคุณ\Application Data\Adobe\Dreamweaver CS4\en_US\Configuration (ผมใช้ Dreamweaver เวอร์ชั่น 4 ครับ) จะเห็นไฟล์ชื่อ  WinFileCache-xxx.dat ในเครื่องของเรา (xxx คือรหัสที่ Dreamweaver กำหนดให้ครับ )
3. ลบไฟล์ WinFileCache-xxx.dat แล้วเปิด Dreamweaver อีกครั้งก็ใช้งานได้ปกติแล้วครับ

เพิ่มเติมสำหรับผู้ที่ใช้งานระบบปฏิบัติการ Window 8,8.1 ให้เปิด Folder Options เป็น Show hiden files, Folder  and drives ก่อนนะครับ แล้วเข้าไปที่ C:\Users\ชื่อ user\AppData\Roaming\Adobe\โฟลเดอร์ Dreamweaver ของคุณ \en_US\Configuration  แล้วลบไฟล์ WinFileCache-xxx.dat ออก หรือจะลบโฟลเดอร์ Dreamwearver ทิ้งทั้งหมดก็ได้ครับ แล้วมันจะสร้างโฟลเดอร์ให้เราใหม่ แต่เวลาเปิดเข้า Dreamweaver ครั้งแรกจะโหลดช้านิดหน่อย เพราะต้องรอให้Updateแคชก่อนครับ