วันพุธที่ 24 กันยายน พ.ศ. 2557

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 เราจะใช้คำสั่งสั้นๆดังนี้
อ่านเพิ่มเติม »
เขียนโดย ที่ ไม่มีความคิดเห็น : ป้ายกำกับ:

วันจันทร์ที่ 22 กันยายน พ.ศ. 2557

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 จะไม่แสดงนะครับ
เขียนโดย ที่ ไม่มีความคิดเห็น : ป้ายกำกับ: ,

วันอาทิตย์ที่ 14 กันยายน พ.ศ. 2557

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>

อ่านเพิ่มเติม »
เขียนโดย ที่ 5 ความคิดเห็น : ป้ายกำกับ: , ,

วันพุธที่ 3 กันยายน พ.ศ. 2557

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 {{}}
อ่านเพิ่มเติม »
เขียนโดย ที่ 7 ความคิดเห็น : ป้ายกำกับ:

วันเสาร์ที่ 30 สิงหาคม พ.ศ. 2557

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


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

อ่านเพิ่มเติม »
เขียนโดย ที่ 4 ความคิดเห็น : ป้ายกำกับ: , , ,

วันศุกร์ที่ 22 สิงหาคม พ.ศ. 2557

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>
อ่านเพิ่มเติม »
เขียนโดย ที่ ไม่มีความคิดเห็น : ป้ายกำกับ: ,

วันพฤหัสบดีที่ 14 สิงหาคม พ.ศ. 2557

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แคชก่อนครับ
เขียนโดย ที่ ไม่มีความคิดเห็น : ป้ายกำกับ:

วันอังคารที่ 12 สิงหาคม พ.ศ. 2557

การสร้าง Webboard ด้วย PHP MySQL ตอนที่ 5 แสดงกระทู้,ตั้งกระทู้,ตอบกระทู้

 
     หลังจากที่เราได้หน้าโฮมเพจมาแล้ว จากที่ได้สอนในบทความก่อนหน้า (สอนทำ Webboard ด้วย PHP MySQL ตอนที่ 4 เพิ่ม/แสดง/ลบ/แก้ไข หมวดกระทู้ และแสดงหมวดกระทู้ในหน้าโฮมเพจ  ) ต่อไปจะเป็นส่วนหน้าแสดงกระทู้ต่อจากหน้าหลักที่แสดงหมวดของกระทู้ก่อน ซึ่งหน้าแสดงกระทู้จะแสดงกระทู้ในหมวดนั้นๆที่เราคลิกเลือกจากหน้าหลักครับ จากนั้นในหน้าแสดงกระทู้ สามารถให้สมาชิกเข้าไปตั้งกระทู้หรือตอบกระทู้ได้ สำหรับบุคคลทั่วไป สามารถเข้ามาอ่านเนื้อหาของกระทู้ได้เท่านั้น

     สำหรับไฟล์ที่ใช้ในบทความนี้ จะมีอยู่ 3 ไฟล์ คือ showboard.php (แสดงกระทู้จากหมวดกระทู้ที่เลือกจากเว็บหลัก (Home Page)) , board_add.php (ตั้งกระทู้) , viewboard.php (แสดงเนื้อหากระทู้ และสามารถแสดงความคิดเห็น(ตอบกระทู้)ได้จากหน้านี้)

อ่านเพิ่มเติม »
เขียนโดย ที่ 3 ความคิดเห็น : ป้ายกำกับ: , , ,

วันพฤหัสบดีที่ 7 สิงหาคม พ.ศ. 2557

สอนทำ Webboard ด้วย PHP MySQL ตอนที่ 4 เพิ่ม/แสดง/ลบ/แก้ไข หมวดกระทู้ และแสดงหมวดกระทู้ในหน้าโฮมเพจ

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

1.เริ่มกันที่ไฟล์แรกคือ ไฟล์ category_add.php  เป็นไฟล์สำหรับให้แอดมินเพิ่มข้อมูลหมวดกระทู้  ให้สร้างไฟล์นี้ไว้ตำแหน่งเดียวกับไฟล์ index.php ให้พิมพ์คำสั่งดังนี้

<?php
session_start();
require('check_admin.php');
if(!empty($_POST['btSave'])){//มีการคลิกที่ปุ่มบันทึก
    require('bin/connectdb.php');//เรียกไฟล์เชื่อมต่อกับฐานข้อมูล
    $msgError='';
    if(!empty($_POST['cg_name'])){
        $cg_name=$_POST['cg_name'];//ชื่อหมวด
        $cg_des=$_POST['cg_des'];//คำอธิบายหมวด
  $cg_order=$_POST['cg_order'];//เรียงลำดับการแสดงผล
  mysql_query("INSERT INTO tbl_category(cg_name,cg_des,cg_order) VALUES('$cg_name','$cg_des','$cg_order')");              
    }else{
        $msgError.="กรุณากรอกชื่อหมวดกระทู้ด้วย <br>";
    }
    if(empty($msgError)){
  //หากสมาชิกพิมพ์ข้อมูลถูกต้อง ให้Redirect หน้าไปที่ไฟล์ category.php
        header("Location:category.php");
    }else{
  //หากกรอกข้อมูลไม่ถูกต้อง ให้สร้างตัวแปร session มารับค่าเพื่อแจ้งให้ทราบถึงปัญหาที่เกิดขึ้น
        $_SESSION['message_error']=$msgError;
    }
}
?>
<html>
<head>
        <?php require('head.php'); ?>
        <link rel="stylesheet" type="text/css" href="btvalidate/dist/css/bootstrapValidator.min.css"/>
        <script type="text/javascript" src="btvalidate/dist/js/bootstrapValidator.min.js"></script>
        <title>เพิ่มหมวดกระทู้</title>
    </head>
    <body>
        <?php require('menu.php'); ?>
        <div class="container">
            <?php require('header.php'); ?>
            <div class="row ws-content">
                <div class="col-md-4  col-sm-4 col-md-offset-4 col-sm-offset-4">
                    <h1>เพิ่มหมวดกระทู้</h1>
                    <?php
                    if (!empty($_SESSION['message_error'])) {
      //แสดงปัญที่เกิดขึ้นจากการไม่กรอกชื่อหมวดกระทู้
                        ?>
                        <div class="alert alert-danger" role="alert">
                            <?php echo $_SESSION['message_error']; ?>
                        </div>
                        <?php
                        $_SESSION['message_error'] = '';
                    }
                    ?>
                    <form  method="post" enctype="multipart/form-data" id="categoryForm" name="categoryForm" action="">
                        <div class="form-group">
                            <label for="Category Name">ชื่อหมวดกระทู้</label>
                            <input type="text" class="form-control" id="cg_name" name="cg_name" placeholder="ชื่อหมวดกระทู้">
                        </div>
                        <div class="form-group">
                            <label for="Category Description">คำอธิบาย</label>
                            <textarea class="form-control" id="cg_des"  name="cg_des" placeholder="คำอธิบายหมวดกระทู้" rows="5"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="Category Order">เรียงลำดับ</label>
                            <input type="text" class="form-control" id="cg_order" name="cg_order" style="width:20%;" value="1">
                        </div>
                       
                        <div class="form-group">
                        <input type="submit" class="btn btn-primary" name="btSave" value="บันทึก" >
                        </div>
                    </form>
                </div>
            </div>
            <?php require('footer.php'); ?>
        </div>
        <script>
           $(document).ready(function() {//คำสั่งเช็ค การกรอกชื่อหมวดกระทู้ ภาษา Javascript โดยใช้ BootstrapValidator ปลั๊กอิน
                $('#categoryForm').bootstrapValidator({
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        cg_name: {
                            validators: {
                                notEmpty: {
                                    message: 'กรุณากรอก ชื่อหมวดกระทู้ ด้วย'
                                }
                            }
                        }
                    }
                });
            });
        </script>    
    </body>
</html>


อ่านเพิ่มเติม »
เขียนโดย ที่ 4 ความคิดเห็น : ป้ายกำกับ: , ,

วันพุธที่ 30 กรกฎาคม พ.ศ. 2557

การสร้าง Webboard ด้วย PHP MySQL ตอนที่ 3 ทำระบบสมัครสมาชิก(Register)/เข้าสู่ระบบ(Login)/ออกจากระบบ(Logout)

     คราวนี้จะเข้าสู่ส่วนของการ Codding จริงๆแล้วครับ หลังจากที่สอนไปแล้ว 2 บทความเรื่องของการออกแบบหน้าจอของWebboard ออกแบบฐานข้อมูล และแยกส่วนของเว็บไซต์/คำสั่งเชื่อมต่อกับฐานข้อมูล เพื่อง่ายต่อการเรียกใช้หรือแก้ไขข้อมูลในภายหลัง

     บทความนี้จะสอนในส่วนของระบบสมาชิก ซึ่งจะมีการสมัครสมาชิก (Register) การเข้าสู่ระบบ (Login) และการออกจากระบบ (Logout) บทความนี้จะต่อเนื่องจากบทความตอนที่ 2 นะครับ เพราะจะมีคำสั่งหรือโค๊ดบางส่วนที่อาจจะทำให้งง ไม่รู้ที่มาของมัน ให้กลับไปศึกษาตอนที่ 2 ให้หายงงก่อนครับ

    อันดับแรก ก่อนที่เราจะสร้างฟอร์มสำหรับกรอกข้อมูล การลงทะเบียนสมาชิก และฟอร์มเข้าสู่ระบบ เราจะต้องมีปลั๊กอินสำหรับเป็นผู้ช่วยในการตรวจสอบความถูกต้องของข้อมูล ซึ่ง Bootstrap เองก็มีปลั๊กอินตัวหนึ่งให้สามารถเรียกใช้งาน และมีคุณสมบัติที่เจ๋งฝุดๆเลยครับ ให้ดาวน์โหลดจากเว็บนี้ครับ http://bootstrapvalidator.com/

     ให้ Extact ไฟล์แล้วเปลี่ยนชื่อโฟลเดอร์ว่า btvalidate แล้วเอาไปไว้ในตำแหน่งเดียวกับไฟล์ index.php ดังรูป ให้สังเกตุโฟลเดอร์ที่ 3 ชื่อ btvalidate นะครับ ให้ทำตามนี้เลย (ขออนุญาติรีไซเคิลรูปจากบทความก่อนมาลงประกอบ เพื่อช่วยGoogleประหยัดพื้นที่จัดเก็บรูปครับ อิอิ)



เท่านี้ก็ถือว่าเรามีเครื่องมือสำหรับก้าวไปสู่ Step ต่อไปครบแล้วครับ

     เราจะเริ่มที่ไฟล์ register.php ก่อนครับ ให้สร้างไฟล์ register.php ไว้ข้างนอกสุด ในตำแหน่งเดียวกับไฟล์ index.php  ดูตามรูปข้างบนก็ได้คับ  จากนั้นเราจะพิมพ์คำสั่งดังนี้

อ่านเพิ่มเติม »
เขียนโดย ที่ 3 ความคิดเห็น : ป้ายกำกับ: , , , ,

วันศุกร์ที่ 25 กรกฎาคม พ.ศ. 2557

การทำ Webboard ด้วย PHP MySQL ตอนที่ 2 การแยกส่วนต่างๆของเว็บดีไซน์และการเชื่อมต่อกับฐานข้อมูล

     หลังจากที่ได้Designเว็บเสร็จแล้ว ต่อไปผมจะสอนแยกส่วนต่างๆของเว็บที่เราดีไซน์ให้ออกเป็นส่วนๆ เพื่อง่ายต่อการแก้ไขการดีไซน์หรือข้อมูลในอนาคต เราจะแยกส่วนออกเป็นดังนี้

1.โฟลเดอร์ css ให้สร้างไฟล์ main.css  ให้พิมพ์โค๊ดดังนี้
body{
    background:#E8E8E8; 
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
 color:#828282;
}
.ws-content h1{   
    font-size:14px;
    line-height: 1;
    border-bottom:1px dashed #0075EA;
    padding:5px;
    margin:5px 0px 10px 0px;
    font-weight:bold;
 color:#0075EA;
}
.container{
    margin-top:2px;
    color:#646464;
}
.ws-name{
    font-size:3em;
}
.ws-head{
    margin-top:50px;
    padding-bottom:5px;
    background:#DBDBDB;
    color:#666;
}

.ws-footer{
    color: #666666;
    font-size: 0.8em;
    text-align:center;
    margin-top:10px;
}
.ws-content{
    margin-top:3px; 
}
table{
 font-size:14px;
}
table th{
 color:#666666; 
}

2.footer.php เป็นไฟล์ส่วนท้ายของเว็บ  ให้พิมพ์โค๊ดดังนี้
<div class="row"><div class="ws-footer">Copy Right 2014 MyWebboard By php-for-ecommerce.blogspot.com</div></div>

อ่านเพิ่มเติม »
เขียนโดย ที่ ไม่มีความคิดเห็น : ป้ายกำกับ: ,

วันอังคารที่ 22 กรกฎาคม พ.ศ. 2557

การทำ Webboard ด้วย PHP MySQL ตอนที่ 1 เตรียมความพร้อม/ออกแบบหน้าจอ/ออกแบบฐานข้อมูล

     บทความต่อจากนี้ไป ผมจะสอนทำ Webboard กันครับ โดยใช้ภาษา PHP กับ โปรแกรมฐานข้อมูล MySQL เป็นตัวหลักในการพัฒนาโปรแกรม และที่พิเศษคือ ผมจะให้ Webboard สามารถแสดงผลแบบ Responsive โดยใช้ Bootstrap เพื่อให้รองรับการแสดงผลบนอุปกรณ์จำพวก Smart Device เช่น มือถือ แท็บเลต และผมเอง เพิ่งเริ่มต้นศึกษา Bootstrap อยู่เหมือนกัน และต้องการให้ Webboard ที่ผมสอนมีความแปลกใหม่ รองรับเทคโนโลยีใหม่ๆ ที่ค่อนข้างที่จะเปลี่ยนแปลงไวมาก และต้องตามให้ทันอยู่เสมอ
     เว็บบอร์ดที่สอนจะเป็นเว็บบอร์ดแบบง่ายๆ ไม่มีOptionมากมายแบบ Smf หรือ phpbb จะมีเพียงการใช้งานหลักๆที่จำเป็นเท่านั้น เช่น การตั้งกระทู้/แสดง/ตอบกระทู้/ปักหมุด ,  มีระบบหมวดกระทู้ , มีระบบสมัครสมาชิก สมาชิกสามารถลงทะเบียน//Login เข้าสู่ระบบ เป็นต้น

การออกแบบฐานข้อมูล
     ให้สร้างฐานข้อมูลชื่อ db_wb และให้สร้างเทเบิลตามนี้ครับ (จะขอข้ามเรื่องของการวิเคราะห์ระบบด้วยDiagramแบบต่างๆนะครับ เพราะระบบไม่ได้ซับซ้อนอะไรมากครับ)


อ่านเพิ่มเติม »
เขียนโดย ที่ 6 ความคิดเห็น : ป้ายกำกับ: , , ,

วันศุกร์ที่ 18 กรกฎาคม พ.ศ. 2557

Bootstrap คือ


     Bootstrap คือ Framwork สำหรับการแสดงผลของเว็บไซต์ โดยใช้ Css เวอร์ชั่น 3 และคำสั่ง Javascript บางส่วน ที่ถูกออกแบบเป็นเครื่องมือให้นักพัฒนาเว็บไซต์สามารถออกแบบการแสดงผลได้แบบง่ายๆ และมีความสวยงาม ทันสมัย และรองรับการแสดงผลบนหน้าจอขนาดต่างๆได้ เช่น อุปกรณ์ Smart Device อาทิ iPhone,iPad,Tablet,Android Phone ต่างๆ รวมถึงการแสดงผลบนหน้าจอขนาดใหญ่ อย่างเช่น Smart Tv เป็นต้น
     เราเรียกการแสดงผลแบบนี้ว่า Responsive Web Design นักพัฒนาเว็บไซต์จะเรียก Bootstrap ว่าเป็น Front-end Framework
ตอนนี้ Bootstrap พัฒนาถึงเวอร์ชั่นที่ 3 (Bootstrap 3) แล้วครับ โดยมีการเปลี่ยนแปลง Grid Layout ให้สามารถแสดงผลบนอุปกรณ์ Smart Device ที่หลากหลาย
ให้ศึกษาจาก -> http://getbootstrap.com/css/#grid

อ่านเพิ่มเติม »
เขียนโดย ที่ ไม่มีความคิดเห็น : ป้ายกำกับ: ,

วันจันทร์ที่ 14 กรกฎาคม พ.ศ. 2557

ตรวจสอบหน้าจอแบบ Responsive ด้วย Chrome Dev Tool




    ในเวลาที่เราได้ออกแบบหน้าจอของเว็บไซต์ ให้แสดงผลแบบ Responsive อาจจะใช้ front-end framework อย่าง Bootstrap ช่วยสร้างสรรค์หน้าจอแบบ Resposive ขึ้นมา หรือเขียนขึ้นมาเองโดยใช้ Css3+Html 5 เพื่อสำหรับแสดงผลบนอุปกรณ์ Smart Device อย่าง Smart Phone,Tablet  ซึ่งเวลาออกแบบนั้นเราจะพัฒนาบนโน๊ตบุคหรือพีซี ทำให้ไม่สะดวกต่อการนำไปทดสอบบนอุปกรณ์ Smart Device
     Google Chrome จึงมีสิ่งที่เรียกว่า Chrome Dev Tool เพื่อช่วยให้นักพัฒนาสามารถดูผลลัพธุ์ของหน้าจอที่เราได้ออกแบบ ผ่านทางหน้าจอของ Google Chorme ได้เลย

    วิธีใช้งาน  Chrome Dev Tool เพื่อดูการแสดงผลแบบ Responsive

- เปิด Browser ของ Google Chrome ขึ้นมา แล้วไปที่เว็บของเราหรือเว็บตัวอย่างที่ออกแบบหน้าจอแบบ Responsive
จากนั้นให้คลิกขวา เลือก ตรวจองค์ประกอบ ดังรูป

อ่านเพิ่มเติม »
เขียนโดย ที่ ไม่มีความคิดเห็น : ป้ายกำกับ: ,

วันอังคารที่ 20 พฤษภาคม พ.ศ. 2557

Google Maps Api V3 สอนสร้าง Polyline หาระยะทาง


     ได้เวลาอัพเดทบทความอีกครั้งครับ หลังจากห่างหายไปเกือบสองเดือน บทความนี้จะสอนเรื่องของ Polyline ของ Google Map API V.3 กันต่อครับ ซึ่งเนื้อหาจะเป็นระดับAdvandceมากขึ้น
เพราะผมจะสอนเรื่องของการหาระยะทางของเส้น Polyline กันครับ บทความก่อนหน้าผมก็ได้สอนสร้างเส้น Polyline มาบ้างแล้ว คือ Google Maps Api V3 กับการสร้าง Polyline แบบง่ายๆ
     สำหรับโค๊ดตัวอย่างในบทความนี้ ผมค่อนข้างตั้งใจอยากนำเสนอมากครับ เพราะใช้เวลาค่อนข้างนาน  (ประมาณเกือบอาทิตย์) ในการพัฒนาตัวอย่างโปรแกรมนี้ขึ้นมา เนื่องจากผมอยากให้มีการเคลียร์หรือลบจุดพิกัดได้ ในกรณี ที่เราได้สร้างMarkerจุดพิกัดไปแล้ว แต่อยากคืนค่ากลับไปยังค่าเดิม หรือคืนค่ากลับไปยังจุดก่อนหน้า ในกรณีที่เราสร้างตัวMarkerผิด

อ่านเพิ่มเติม »
เขียนโดย ที่ 3 ความคิดเห็น : ป้ายกำกับ:

วันจันทร์ที่ 24 มีนาคม พ.ศ. 2557

Google Maps Api V3 กับการสร้าง Polyline แบบง่ายๆ



    ผมได้สอนใช้งาน Google map api เวอร์ชั่น 3 มาบ้างแล้ว ศึกษาบทความที่เกี่ยวข้องได้จาก Google Maps API คราวนี้ผมจะสอนสร้างเส้น Polyline บ้างครับ และมีสมาชิกหลายท่าน อยากให้ผมสอนเรื่องนี้เหมือนกัน บทความนี้จะสอนทำ Polyline ให้กับแผนที่แบบง่ายๆกันก่อนครับ
     Polyline จะมีลักษณะเป็นเส้นที่ลากไปเป็นจุดๆ มีประโยชน์ต่อการหาระยะทาง หรือเป็นไกด์บอกเส้นทางไปยังจุดหมายที่เราต้องการ โดยเราสามารถลากเส้นไปตามแผนที่ เพื่อบอกที่อยู่ ที่เราต้องการเดินทางไปได้

    มาดูตัวอย่าง การสร้าง Polylines แบบง่ายๆ กันเลยครับ
อ่านเพิ่มเติม »
เขียนโดย ที่ 1 ความคิดเห็น : ป้ายกำกับ:

วันพฤหัสบดีที่ 13 มีนาคม พ.ศ. 2557

สอนทำระบบสมัครสมาชิกด้วย Yii Framework ตอนที่ 2 (จบ) บันทึกข้อมูลสมาชิกและอัปโหลดรูปสมาชิก

     ต่อเนื่องจากบทความก่อนหน้านี้ที่ผมได้สอน คือ สอนทำระบบสมัครสมาชิกด้วย Yii Framework ตอนที่ 1 การ Validation Form บทความนี้ผมจะสอนใช้ Yii Framework ทำการเขียนคำสั่งบันทึกข้อมูลของสมาชิกลงฐานข้อมูลกับการเขียนคำสั่งอัปโหลดรูปประจำตัวของสมาชิก ไปเก็บไว้ในโฟลเดอร์สมาชิกที่เราสร้างไว้

1.อันดับแรก เข้าไปเปลี่ยนชื่อไฟล์ users.php ใน โฟลเดอร์ models ให้ชื่อ user.php ออกก่อนครับ เพราะผมเจอปัญหาในส่วนของการเซต Scenario ดังนั้นสรุปได้ว่า การตั้งชื่อ model ไม่ควรมี s ต่อท้ายครับ ให้แก้ไขดังรูป


2.ต่อมาเราไปสร้างโฟลเดอร์สำหรับเก็บรูปของสมาชิกครับ ผมจะสร้างในโฟลเดอร์ images ครับ ตั้งชื่อโฟลเดอร์ว่า users ดังรูป

3.สุดท้าย เราจะเข้าไปที่ controllers ชื่อว่า UsersController.php เราจะแก้ไขคำสั่งเดิมในเมธอดชื่อ actionRegister ให้ใช้คำสั่งดังนี้
public function actionRegister() {
        $model = new User;
          $model->setScenario('register');
        if (isset($_POST['Users'])) {
            $model->attributes = $_POST['Users'];
            $userPicFile = CUploadedFile::getInstance($model, 'user_pic'); //สร้าง Instance ให้กับรูปภาพ โดยเรียกใช้คลาส CUploadedFile ที่ Yii สร้างไว้ให้แล้ว
            if (!empty($userPicFile)) {
                $rnd = date('dmYHis'); //สำหรับใช้เป็นชื่อของรูปภาพและสามารถป้องกันการอัปโหลดภาพชื่อซ้ำกัน
                $pictype = end(explode('.', $userPicFile)); //ตัดให้เหลือแต่นามสกุลไฟล์ เช่น jpg ,png,gif
                $picName = "{$rnd}.{$pictype}"; //เอาชื่อกับนามสกุลไฟล์มาเรียงกันใหม่ จะได้ชื่อไฟล์ที่ไม่ซ้ำกับของคนอื่น สามารถป้องกันการอัปโหลดภาพทับกัน
                $model->user_pic=$picName;//Set ชื่อรูปภาพให้กับตัวแปร user_pic เพื่อบันทึกลงในฐานข้อมูล
                $pathUpload = Yii::app()->basePath . '/../images/users/' . $picName;//กำหนด path สำหรับเก็บไฟล์รูปประจำตัว
                $userPicFile->saveAs($pathUpload);//อัปโหลดรูปประจำตัวของสมาชิกไว้ในพาธ images/users/
            }
            if ($model->save()) {//บันทึกลงฐานข้อมูล
               //เมื่อบันทึกข้อมูลเสร็จจะให้ทำอะไรต่อไป ก็แล้วแต่ปุ๊!!! ส่วนผมจะใช้คำสั่ง redirect ไปยังหน้า index ผมใช้คำสั่ง
               $this->redirect(array('index'));
               //exit(); //จบการทำงาน
            }
        }
        $this->render('register', array('model' => $model));
    }

เท่านี้ก็เสร็จสมบูรณ์แล้วครับ ให้ทดสอบโดยพิมพ์ต่อท้าย URL ว่า  index.php? r=users/register และลองกรอกข้อมูลให้ครบถ้วนแล้วกดปุ่ม Submit ดูครับ ข้อมูลจะต้องถูกเก็บไว้ในเทเบิลชื่อ users และรูปภาพจะเก็บไว้ใน images/users

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

วันพฤหัสบดีที่ 6 มีนาคม พ.ศ. 2557

Yii Framework กับการเปลี่ยนข้อความต่างๆให้เป็นภาษาไทย

     ภาษาเริ่มต้นของ Yii Framework จะเป็นภาษาอังกฤษครับ จะแสดงเป็นข้อความแจ้งเตือนต่างๆ เช่น ข้อความแจ้งเตือนจากการกรอกข้อมูล (Form Validate) , Error 404 , ข้อความ Error ต่างๆ เพื่อแจ้ง Bug ของโค๊ดที่เราเขียนให้ทราบ
     บทความที่ผมได้สอนไปก่อนหน้านี้ คือ สอนทำระบบสมัครสมาชิกด้วย Yii Framework ตอนที่ 1 การ Validation Form เราจะเห็นข้อความแจ้งเตือนจากการกรอกข้อมูลในฟอร์ม ซึ่งจะแสดงเป็นภาษาอังกฤษ เพราะเรายังไม่ได้กำหนดภาษาไทยให้กับ Yii Framework นั่นเองครับ ดังรูป

เราสามารถเปลี่ยนข้อความเหล่านี้ให้เป็นภาษาไทยได้ง่ายๆครับ ให้ทำตามรูปดังนี้

 ไปที่ Yii Projectของท่าน >> เลือก protected >> เลือก config >> เปิดไฟล์ main.php เพิ่มค่าอาเรย์ 'language'=>'th' ดังรูปข้างบน

จะได้ผลลัพธ์ดังนี้
1.ข้อความแจ้งเตือนการกรอกข้อมูลจากฟอร์มที่เป็นภาษาไทย

2.หน้าที่เกี่ยวข้องกับการแสดงผลของหน้าเว็บ เช่น Error 404 , สิทธิการเข้าถึงหน้าเว็บไซต์ เป็นต้น
เขียนโดย ที่ 1 ความคิดเห็น : ป้ายกำกับ: , ,

วันเสาร์ที่ 1 มีนาคม พ.ศ. 2557

สอนทำระบบสมัครสมาชิกด้วย Yii Framework ตอนที่ 1 การ Validation Form


     หลังจากที่ได้สอนพื้นฐานการสร้างฟอร์มคร่าวๆไปแล้ว ในบทความก่อนหน้านี้ ว่าด้วยเรื่องของ การสร้าง Form ใน Yii Framework
     คราวนี้จะสอนการตรวจสอบข้อมูลจากฟอร์มหรือ Form Validation กันบ้างครับ และจะทำให้เราเห็นการทำงานของ MVC ของ Yii Framework ได้ชัดเจนยิ้งขึ้น เพราะจะต้องใช้ทั้งสามส่วนเพื่อทำงานร่วมกันครับ สำหรับการ Validation ข้อมูล จะเป็นหน้าที่ Model ครับ โดย Controller จะทำหน้าที่รับข้อมูลจากฟอร์ม    ที่ได้จากส่วนของ Views แล้วส่งไปให้ Class Validation ของ model ตรวจสอบอีกที
      Validate ของ Yii Framework จะมีการตรวจสอบที่ค่อนข้างจะยืนหยุ่นเป็นอย่างมาก รองรับการตรวจสอบแบบ Pattern โดยใช้ Regular Expression เข้ามาช่วยก็ได้ การตรวจสอบไฟล์หรือรูปภาพที่อัพโหลดเข้ามา เช่น ตรวจสอบนามสกุลไฟล์ , ขนาดของไฟล์ , ชื่อไฟล์ซ้ำ ฯลฯ โดยที่เราไม่ต้องเขียนโค๊ดเองเลย ทำให้สะดวกเป็นอย่างมาก และที่ผมชอบที่สุด คือ การกำหนดอ็อพชั่นที่ชื่อว่า on เช่น array('product_image','required',on=>'forInsert');  จะหมายถึงให้ตรวจสอบรูปสินค้าตอนเพิ่มสินค้าเท่านั้น  ว่ามีรูปสินค้าหรือป่าว เหมือนบังคับว่าต้องเลือกรูปสินค้าด้วยนะ ส่วนตอนอัพเดทสินค้าก็ไม่จำเป็นต้องตรวจสอบรูปสินค้า เพราะลูกค้าอาจไม่ต้องการเปลี่ยนรูปสินค้า แต่เราจะตรวจสอบอย่างอื่นเกี่ยวกับรูปภาพแทน เช่น ตรวจนามสกุล ในกรณีที่ลูกค้าต้องการอัพเดทรูป

1.อันดับแรก เราจะสร้างฐานข้อมูลกันก่อนครับ ผมจะสร้างเทเบิลชื่อ users และฐานข้อมูลชื่อ db_yii ดังรูป


2.เมื่อเราสร้างฐานข้อมูลและเทเบิล users เสร็จแล้ว เราจะเข้าไปในส่วนของ Yii Code Generator โดยพิมพ์ต่อท้าย URL ว่า index.php?r=gii แล้วใส่รหัสผ่านให้เรียบร้อย ศึกษาเพิ่มเติมจาก -> Yii Framework กับการเชื่อมต่อกับฐานข้อมูล MySQL และการใช้งาน Gii Generator
เราจะสร้างส่วนของ model ให้กับ yii ก่อนครับ โดยไปที่เมนู  Model Generator กำหนดค่าดังรูป



Table Name หมายถึงให้เรากรอกชื่อเทเบิลในฐานข้อมูลของเราเข้า ซึ่งเทเบิลที่ผมสร้างชื่อ users นั่นเอง
อ่านเพิ่มเติม »
เขียนโดย ที่ 1 ความคิดเห็น : ป้ายกำกับ: , ,

วันอาทิตย์ที่ 23 กุมภาพันธ์ พ.ศ. 2557

CSS กับการตัดคำจากประโยค

      บทความนี้จะสอนใช้คำสั่งสำคัญของ CSS ที่ผมเพิ่งรู้มาไม่นานนี่เองครับ นึกไม่ถึงว่าการตัดคำหรือตัดข้อความในประโยคจะต้องใช้ในภาษาเซิร์ฟเวอร์ อย่างเช่น PHP หรือ JSP อย่างเดียวซะอีก CSS ก็ทำได้ครับ แต่ยังมีข้อจำกัดอยู่ ซึ่งก็คือ ตัดตามความกว้างของ Tag HTML ที่เรากำหนดเท่านั้น และทำงานเพียงบรรทัดเดียวเท่านั้น เช่น เรากำหนดขนาดของ Tag H1 ให้กว้าง 100px (width:100px) ถ้าข้อความยาวเกินขนาดที่กำหนดคือ 100px มันจะตัดคำที่เกินนั้นออกไป ความจริงแล้วจะเรียกว่า ซ่อนคำมากว่า เพราะพอผมลอง View Code ของเว็บไซต์ดูแล้ว ข้อความยังอยู่ครบครับ เหมือนกับว่าคำที่เกินขนาดนั้นถูกซ่อนเอาไว้ไม่ให้มองเห็นผ่าน Web Browser เท่านั้นเอง ทำให้ไม่มีผลกระทบต่อ SEO เลย เพราะ Google ยังมองเห็นเป็นประโยคเต็มทั้งหมดครับ

     เราจะใช้คำสั่ง 3 คำสั่งควบคู่กันครับ คือ white-space:nowrap,text-overflow:ellipsis และ overflow:hidden เช่น
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS กับการตัดคำจากประโยค</title>
</head>
<body>
<h1 style="width:100px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:12px;">
นี่คือข้อความที่ถูกคำสั่ง CSS ตัดคำตามขนาดความกว้างของ Tag HTML ที่เรากำหนด</h1>
</body>
</html>

จะได้ผลลัพธ์ดังนี้ครับ
     ข้อความจะถูกตัดตามขนาดของ Tag H1 ที่ผมกำหนดขนาดความกว้างเป็น 100 พิกเซล นั้นเองครับ นอกจากนี้เราสามารถเปลี่ยน Tag H1 เป็น Tag HTML อื่นก็ได้ เช่น div,p,span,h2,h3 เป็นต้น
เขียนโดย ที่ ไม่มีความคิดเห็น : ป้ายกำกับ:

วันจันทร์ที่ 10 กุมภาพันธ์ พ.ศ. 2557

การสร้าง Form ใน Yii Framework

     คราวนี้เราจะกลับไปในส่วนของ views ของ Yii Framework (PHP Framework) อีกครั้งครับ ซึ่งเป็นส่วนแสดงผลและส่วน GUI ของ Web Application ของเราครับ
ดังนั้นเราจะต้องสร้างส่วนโต้ตอบกับผู้ใช้งาน เราจะต้องสร้างช่องกรอกข้อมุล textfield,texarea , ปุ่มบันทึกข้อมูล ,เช็กบ๊อก,ลิสต์เมนู (Select/List Menu) ฯลฯ ได้จากตรงส่วนนี้ครับ
     บทความนี้ผมจึงอยากจะสอนการสร้างแท็กคอนโทรลต่างๆ โดยจะเรียกใช้ widget CActiveForm ซึ่งถูก Extend จากคลาส CHtml อีกที

1.การสร้าง form จากคลาส CActiveForm โดยเราจะเรียกผ่าน beginWidget ด้วยคำสั่งเช่น

<?php $form = $this->beginWidget('CActiveForm', array(
'id'=>'user-form',
'enableAjaxValidation'=>true,
'enableClientValidation'=>true,
'focus'=>array($model,'firstName'),
'clientOptions' => array('validateOnSubmit' => true),
'htmlOptions' => array(
'enctype' => 'multipart/form-data',
)
)); ?>


user-form คือแอททิบิว id ของ แท็ก form เราสามารถกำหนดชื่อได้จากตรงนี้
enableAjaxValidation คือการตรวจสอบข้อมูลแบบ AJAX ซึ่งจะมีประโยชน์ตอนที่เราต้องการตรวจสอบข้อมูลบางอย่างที่ต้องพึ่่งการประมวลจาก Server โดยไม่ต้องการให้หน้าเว็บไซต์รีเฟรช เช่น การตรวจสอบรหัส Captcha,Username หรือ Email เพื่อป้องกันการซ้ำกันของข้อมูล เป็นต้น เราจะใช้ true หรือ false เพื่อเปิดหรือปิดการทำงาน
enableClientValidation คือการตรวจสอบข้อมูลจากฝั่ง Client หรือพูดง่ายๆคือใช้ Javascript ตรวจสอบนั้นเอง สำหรับตรวจสอบข้อมูลแบบง่ายๆ โดยที่ไม่จำเป็นต้องส่งไปให้ Server หรือ Host ตรวจสอบ เช่น เช็คช่องว่างของ textfield,ตรวจสอบจำนวนข้อมูลว่ากรอกสั้นหรือยาวเกินไปหรือป่าว เป็นต้นเราจะใช้ true หรือ false เพื่อเปิดหรือปิดการทำงานเช่นกัน
focus คือจุดที่เคอร์เซอร์ (Cursor) แสดงจุดแรกในขณะเว็บถูกโหลดเสร็จ เราจะเรียกว่า จุดโฟกัส นั่นเองครับ จากตัวอย่าง เราจะส่งตัวแปร $model ซึ่งจะถูก render จาก controller และ firstName คือชื่อของ textfield ที่เราจะโฟกัส
clientOptions คือการกำหนดการทำงานบางอย่างในส่วนของ Client เช่น validateOnSubmit' => true หมายถึงให้ตรวจสอบข้อมูลในขณะที่กดปุ่ม submit
htmlOptions คือการกำหนดการทำงานของแท็ก form ว่าให้สามารถส่งค่าอะไรได้บ้าง เช่น 'enctype' => 'multipart/form-data' หมายถึงสามารถส่งข้อมูลจำพวกไฟล์ต่างๆ เพื่อสามารถอัปโหลดไปไว้บน server ได้
อ่านเพิ่มเติม »
เขียนโดย ที่ 3 ความคิดเห็น : ป้ายกำกับ: , ,

วันอาทิตย์ที่ 26 มกราคม พ.ศ. 2557

สอนใช้งาน Model ใน Yii Framework



     บทความนี้จะสอน วิธีใช้งาน Model ของ Yii Framework กันบ้างครับ บทความก่อนหน้าได้สอนใช้งาน Controller กับ View ไปแล้ว ส่วนนี้จะเป็นส่วนที่สำคัญอีกส่วนหนึ่งซึ่งจะเกี่ยวข้องกับข้อมูลที่แสดงในเว็บไซต์ทั้งหมด เพื่อทำงานกับฐานข้อมูล รวมถึงการ Validation ข้อมูลเพื่อให้ข้อมูลมีความปลอดภัยมากยิ่งขึ้น เช่น ต้องกรอกเป็นตัวเลขเท่านั้น หรือ การกรอกอีเมลหรือเบอร์โทรที่ต้องกรอกให้ถูกต้องตาม Patterm ของมันเท่านั้น

     ขั้นตอนสร้าง Model
1.ให้สร้างเทเบิลในฐานข้อมูลให้เรียบร้อยก่อนครับ จากตัวอย่าง ผมสร้างเทเบิลชื่อ category
มีฟิลด์ 2 ฟิลด์ ชื่อ category_id  ชนิดข้อมูลเป็น INT และเป็นไพรมารี่คีย์ และ category_name ชนิดข้อมูลเป็น VARCHAR

2.จากนั้นเราจะใช้  Yii Code Generator สร้าง โดยพิมพ์ URL ต่อท้าย ว่า index.php?r=gii แล้วใส่รหัสผ่านเพื่อเข้าสู่ส่วนจัดการของ Yii Code Generator
จากนั้นให้คลิกที่เมนูชื่อ Model Generator จะปรากฏฟอร์มให้กรอกข้อมูลตามรูปภาพด้านล่าง


     ให้กรอกชื่อเทเบิลของเราในช่อง Table Name เช่น category มันจะสร้างชื่อ Model Class ให้เราอัตโนมัติ เราสามารถเปลี่ยนชื่อ Model Class ได้ครับ ส่วนตรง Build Relations หมายถึงต้องการให้สร้าง Method relations ใน Model Class ของหรือป่าว ให้ติ๊กไว้ในกรณีที่คิดว่า Table นี้สัมพันธ์(Join)กับ Table อื่นหรือไม่ แต่ถ้า Table ที่เราสร้างนี้ถูกสร้างมาโดดๆไม่สัมพันธ์กับ Table ใดๆ ก็ไม่ต้องติ๊กในส่วนนี้ก็ได้ครับ ให้กด Preview และกด Generate อีกครั้ง
อ่านเพิ่มเติม »
เขียนโดย ที่ 1 ความคิดเห็น : ป้ายกำกับ: , ,

วันพุธที่ 22 มกราคม พ.ศ. 2557

สอนการใช้งาน Controller และ View ใน Yii Framework



       ห่างหายจากการเขียนบทความไปนานพอสมควรครับ กลับมาคราวนี้ขอสานต่อโปรเจ็คบทความ Yii Framework ต่อครับ เนื่องจากผมได้เขียนไปบ้างแล้วทั้งหมด 3 บทความ คือ 1.ขั้นตอนการติดตั้ง Yii Framework , 2.Yii Framework กับการเชื่อมต่อกับฐานข้อมูล MySQL และการใช้งาน Gii Generator , 3.Yii Framework กับการทำ Friendly URL
สำหรับเหตุผลที่ผมอยากเขียนบทความเกี่ยวกับเรื่องนี้มากที่สุด เพราะผมอยากเปลี่ยนสไตล์การเขียนโค๊ดให้เป็นแบบ OOP หรือเขียนแบบเชิงวัตถุทั้งหมดครับ และอยากรณรงค์ให้ทุกคนทำแบบนี้ครับ เพราะมันมีประโยชน์ต่อการพัฒนาเว็บไซต์ให้มีความยืดหยุ่นสูง ทำงานรวดเร็ว มีความปลอดภัยสูง และทำงานร่วมกันเป็นทีมได้ง่าย เพราะใช้หลักการทำงานของ Framework ที่เรียกว่า MVC ครับ
       บทความนี้จะสอนให้รู้จัก Controller กันก่อนครับ ซึ่งคือองค์ประกอบหนึ่งของ MVC ซึ่งก็คือ C นั้นเองซึ่งคือชื่อย่อของ Controller นั้นเองครับ Controller ทำหน้าที่เป็นตัวเชื่อมระหว่าง Model (M) กับ View (V) ครับ โดยมันจะทำหน้าประสานงานระหว่าง View กับ Model เพื่อให้สามารถส่งข้อมูลหากันหรือทำงานร่วมกันได้
       Controller จะรับค่าที่ส่งจาก View แล้วส่งไปให้ Model เพื่อจัดการกับข้อมูลต่ออีกที เราจะเห็นการทำงานแบบนี้ตอนสร้างฟอร์มเพื่อ เพิ่ม/แก้ไข/ลบข้อมูล นั้นเองครับ  ในทางกลับกัน มันยังสามารถรับค่าจาก Model ซึ่งเป็นดึงค่าจากฐานข้อมูลแล้วส่งให้กับ View เพื่อแสดงผลข้อมูลได้อีกด้วย ซึ่งก็คือการคิวรี่ข้อมูลจากฐานข้อมูลมาแสดงนั้นเองครับ และนอกจากนี้มันยังสามารถทำงานโดยที่ไม่ต้องทำงานร่วมกับModelก็ได้ ในกรณีที่ไม่ต้องมีการเชื่อมต่อกับ Database ก็ไม่ต้องทำงานร่วมกับ Model แค่รับค่ามาจาก View เพื่อประมวลผลแล้วส่งกลับไปแสดงที่ View เหมือนเดิม รวมถึงมันสามารถทำงานเดี่ยวๆ โดยที่ไม่ต้องทำงานร่วมกับ View และ Model ก็ได้ โดยที่ไม่ต้องเรียกใช้อ๊อบเจ็คจาก Model หรือ ไม่ใช้เมธอด render  เพื่อแสดงผลใน View

ต่อไปเราจะสร้างไฟล์ Controller กันครับ โดยผมจะตั้งชื่อ Controller ตัวนี้ของผมชื่อว่า Category ครับ
ให้เข้าไปที่ Yii code generator กันเลยครับ โดยพิมพ์ URL ต่อท้าย index.php ดังนี้ index.php?r=gii (ศึกษา gii เพิ่มได้จาก Yii Framework กับการเชื่อมต่อกับฐานข้อมูล MySQL และการใช้งาน Gii Generator)

เมื่อพิมพ์รหัสผ่านเข้าไปแล้ว ให้คลิกที่เมนู Controller Generator ดังรูป

เราจะสร้าง controller ชื่อว่า category ให้เราพิมพ์ดังนี้
อ่านเพิ่มเติม »
เขียนโดย ที่ 3 ความคิดเห็น : ป้ายกำกับ: , ,
สมัครสมาชิก: บทความ ( Atom )