PIYAPONG SRISURB 031

วันพฤหัสบดีที่ 10 ตุลาคม พ.ศ. 2556

ในภาษา PHP นั้นมีวิธีเชื่อมต่อกับฐานข้อมูล MySQL อยู่หลายแบบมากครับ เช่น mysql, mysqli, หรือ pdodb ซึ่งวิธีที่โปรแกรมเมอร์ไทยๆ นิยมและถูกสอนให้ใช้มากที่สุด คือวิธี mysql (พวกคำสั่ง mysql_connect(), mysql_query(), หรือ mysql_fetch_array() นั่นแหละ)
ปัญหาที่เกิดขึ้นแล้วในตอนนี้คือคำสั่งตระกูล mysql ทั้งหลาย ถูกประกาศ deprecated (เลิกใช้) ไปเรียบร้อยแล้วใน PHP5.5 แม้ว่าในตอนนี้คำสั่งตระกูล mysql จะยังใช้งานได้ตามปกติ แต่ก็ยังใช้งานได้เพื่อให้โค๊ดเก่าๆ ทำงานได้เท่านั้น (จะขึ้น deprecated error ถ้าเราเปิดแสดง error เอาไว้) และในอนาคตฟังก์ชันกลุ่มนี้ก็จะถูกถอดออกจาก PHP แน่นอน
สาเหตุการเลิกใช้นั้นหลักๆ เนื่องมาจากคำสั่ง mysql พวกนี้เขียนอยู่บน C Wrapper รุ่นเก่าที่ไม่มีการสนับสนุนแล้ว หรือพูดง่ายๆ คือคำสั่งกลุ่มนี้โดนลอยแพแล้วนั่นเอง ทาง PHP ก็แนะนำว่าให้ใช้คำสั่งกลุ่ม mysqli หรือ pdodb ในการเชื่อมต่อกับ MySQL แทน และคำสั่งชุด MySQLi ก็ทำงานร่วมกับ MySQL 4.1 ขึ้นไปได้ดีกว่าอีกด้วย

MySQLi vs PDODB

ทางออกที่ PHP เสนอนั้นมีอยู่สองทาง (จริงๆ มันก็มีทางอื่นอีก) คือ MySQLi และ PDODB ซึ่งยังคงมีการสนับสนุนอยู่ (และสองคำสั่งนี้ก็ทำงานได้เร็วกว่าคำสั่ง mysql เดิมด้วย) แม้โดยรวมแล้วคำสั่งทั้งสองชุดจะมีการใช้งานที่คล้ายกัน (รองรับการเขียนแบบ OOP) แต่ก็ยังมีข้อแตกต่างกันอยู่ดังนี้

PDODB รองรับฐานข้อมูล 12 รูปแบบ ในขณะที่ MySQLi รองรับเพียง MySQL เท่านั้น
PDODB สามารถตั้งชื่อพารามิเตอร์ในการ Prepare ได้
MySQLi รองรับการเขียนแบบ Procedural (เขียนเป็นลำดับโปรแกรมแบบเดิมๆ) ในขณะที่ PDODB ต้องเขียนเป็น OOP เท่านั้น
MySQLi ทำงานกับ MySQL ได้เร็วกว่า PDODB เล็กน้อย

ส่วนตัวผมจะทำงานกับ Framework หรือ CMS เป็นหลัก มันก็จะมี wrapper ครอบคำสั่งพวกนี้อีกที (ส่วนใหญ่ที่เจอจะเป็น MySQLi) แม้ในความรู้สึกแล้วผมชอบ PDODB มากกว่าเพราะความยืดหยุ่นและฟีเจอร์บางอย่างที่เหนือกว่าของมัน แต่สำหรับคนที่ถนัดกับการเขียนโปรแกรมแบบ procedural แบบเดิมๆ น่าจะชอบใจกับ MySQLi มากกว่า เพราะว่าการใช้งานนั้นเหมือนกับคำสั่ง mysql เดิมแทบทุกประการครับ

Procedural MySQLi

คนที่เรียนหรือหัดเขียน PHP มา คงจะคุ้นเคยกับการใช้งาน MySQL แบบนี้


<?php

$connect = mysql_connect("localhost", "root", "password");

$db = mysql_select_db("mydatabase");

$sql = "SELECT * FROM `tbl_data` ORDER BY `id` ASC LIMIT 0,20";

$query = mysql_query($sql);

$num_rows = mysql_num_rows($query);

for($i=0; $i < $num_rows; $++;){

$result = mysql_fetch_array($query);

... do something ...

}

?>

ซึ่งการเปลี่ยนมาใช้ MySQLi สำหรับการเขียนแบบ procedural แบบนี้นั้นง่ายมากครับ คือเปลี่ยน mysql_xxx เป็น mysqli_xxx เสียให้หมด แบบนี้

<?php

$connect = mysqli_connect("localhost", "root", "password", "mydatabase");

$sql = "SELECT * FROM `tbl_data` ORDER BY `id` ASC LIMIT 0,20";

$query = mysqli_query($connect, $sql);

$num_rows = mysqli_num_rows($query);

for($i=0; $i < $num_rows; $++;){

$result = mysqli_fetch_array($query);

... do something ...

}

ใน MySQLi เราสามารถเลือกฐานข้อมูลในขั้นตอนการ connect กับฐานข้อมมูลได้ในทันที และอีกข้อหนึ่งที่ต้องระวังคือคำสั่งmysqli_query() จำเป็นจะต้องระบุ link identifier ด้วยทุกครั้งครับ (link identifier คือตัวแปรที่เก็บ mysqli_connect() นั่นแหละ ในที่นี้คือ $connect)
แค่นี้ทุกอย่างก็เรียบร้อยครับ ง่ายเนอะ ดังนั้นถ้าทำได้ก็ให้ทำเสียตั้งแต่ตอนนี้ครับ เพิ่ม i เข้าไปตัวเดียว แลกกับ compatibility ที่ยาวนานขึ้น ผมว่าคุ้มนะ

OOP MySQLi

ข้อดีของ MySQLi (รวมถึง PDODB) นั่นคือมันสามารถเขียนในรูปแบบเชิงวัตถุหรือ OOP ได้ครับ ทำให้เราสามารถเขียนคลาสฐานข้อมูลของเรามา extend คลาส MySQLi นี้ได้ในทันที และสามารถนำโค๊ดเก่ากลับมาใช้ใหม่ได้เรื่อยๆ ได้ง่ายและเป็นระเบียบด้วยครับ
การใช้งานคร่าวๆ นั้น คือเราจะประกาศออพเจ็กท์ mysqli และจัดการเชื่อมต่อกับเลือกฐานข้อมูลในขั้นตอน construct ได้ทันทีครับ

$db = new mysqli("localhost", "username", "password", "database");

และเมื่อเราต้องการคิวรี่คำสั่งต่างๆ ก็สามารถสั่งคิวรี่ผ่าน mysqli::query ได้ทันที เช่น

$query = $db->query("SELECT * FROM `mytbl` WHERE `id` = 1");

และสำหรับการใช้งานอื่นๆ สามารถลองไปดูได้ใน PHP Manual ครับ

Prepared statement

นอกจากการคิวรี่ข้อมูลตรงๆ แล้ว ยังมีรูปแบบการคิวรี่อีกประเภทหนึ่ง นั่นคือ Prepared statement
รูปแบบการใช้งานของมันคือเราจะเขียน sql เปล่าๆ ทิ้งไว้อันหนึ่ง แล้วก็ bind พารามิเตอร์เข้าไปใน sql ที่เราเขียนไว้ (พร้อมกำหนดประเภทข้อมูล) ข้อดีของมันคือการ escape ข้อมูล (เช่นถอด quote เพื่อกัน sql injection) สามารถทำได้ง่ายและสะดวกกว่าการมานั่ง mysqli_real_escape_string() เอาเองทีละตัว (เมธอด bind_param จะจัดการ escape ข้อมูลทุกชิ้นให้ในทีเดียว) และการเขียนแบบ prepared ยังทำงานได้เร็วกว่าเดิมด้วยเช่นกัน
การคิวรี่แบบ prepared มีลักษณะแบบนี้ครับ


$id = $_GET['id'];

$db = new mysqli("localhost", "username", "password", "mydatabase");

$query = $db->prepare("

    SELECT *

    FROM `tbl_data`

    WHERE id = ?

");

$query->bind_param("i", $id);

$query->execute();

ใน $query->bind_param เราจำเป็นต้องกำหนดประเภทข้อมูลของพารามิเตอร์ต่างๆ ด้วยเช่นกัน โดยมันจะมีพารามิเตอร์อยู่ 4 ประเภทคือ

i สำหรับ interger
d สำหรับ double
s สำหรับ string
b สำหรับ blob

โดยเราจะจำหนดเป็นสตริงยาวๆ อยู่ในพารามิเตอร์แรกของ bind_param ครับ (อย่างในตัวอย่างที่ $id เป็น interger จึงมีการกำหนดไว้เป็น i) สมมุติว่าเราจะ bind_param ทั้งหมด 3 ตัวคือ

$id (int)
$name (string)
$email (string)

เราก็จะ bind_param แบบนี้ครับ

$query->bind_param("iss", $id, $name, $email)

และในการดึงข้อมูลออกมาแสดง เราจะต้อง bind_result เสียก่อน แล้วจึง fetch ข้อมูลออกมาครับ เช่น

$query->bind_result($userid, $username, $password, $email);

while($query->fetch()){

echo "ID: $userid , Username: $username , Email: $email \n";

}

สำหรับการเขียน Prepared statement ใน PDODB นั้นรูปแบบก็จะคล้ายๆ กันนี่แหละครับ ผมขอไม่พูดถึงแล้วกันนะครับ

ทิ้งท้ายสำหรับคนที่ใช้เฟรมเวิร์กหรือ CMS ต่างๆ

สำหรับใครที่ใช้เฟรมเวิร์กหรือ CMS อาจจะหมดห่วงไปได้ครับ เพราะเท่าที่ทราย บรรดา CMS และ Framework ต่างๆ ที่ได้เตรียมฟังก์ชันหรือคลาสของฐานข้อมูลเอาให้ไว้แล้วนั้นจะหันไปใช้ MySQLi กันหมดแล้ว (และรองรับกันนานแล้วด้วย) และ CMS บางตัวก็มีตัวเลือกให้ใช้ทั้ง MySQL และ MySQLi สิ่งที่ต้องทำก็มีเพียงแค่เข้าไปแก้ไข Config ของมันก็เท่านั้นเองครับ

วันจันทร์ที่ 7 ตุลาคม พ.ศ. 2556

Modal มันก่อคือ popup อย่างนึงล่ะครับ เคยเจอกันไหมครับตามเว็บทั่วๆไป แต่ส่วนของ Modal จะไม่เป็นเหมือน popup ทั่วๆไป คือ Modal เราจะไม่ทำให้มันเลื่อนได้ นั้นเอง เอารูปไปดูแล้วกันนะ วิธีใช่ก่อตามไปข้างล่างเลย ทั้งหมดอยู่ในไฟล์ HTML เดียวกัน

ส่วนที่ 1จะเป็นส่วนของปุ่มนะครับ เหมือนเป็นตัวสวิชต์ใน Modal นี้ทำงาน กดปุ๊ปขึ้นปั๊ป จะตกแต่งก่อได้นะ ยัด CSS เข้าไป

<a href="#" id="button">Click me</a>

ส่วนที่ 2 จะเป็นเมื่อเรากด button จะแสดงข้อความส่วนนี้

<div id="modal">

/* ส่วนของขอความที่จะแสดง */
 <div id="heading">
  Are you sure you want to do that?
 </div>

 <div id="content">
  <p>Clicking yes will make Comic Sans your new system<br> default font. Seriously, have you thought this through?</p>

  <a href="#" class="button green close"><img src="images/tick.png">Yes, do it now!</a>

  <a href="#" class="button red close"><img src="images/cross.png">No, I’m insane!</a>
 </div>
</div>

ส่วนที่ 3 ตัวนี้ใจกลางของคำสั่งการทำงานเลยครับ ใส่ในไฟล์ html เลยครับ

<!--jQuery-->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script src="js/jquery.reveal.js"></script> //กำหนดไฟล์อยู่ในโฟลเดอร์ js เปลี่ยนโฟลเดอร์ได้ ต้องมาเปลี่ยนที่ลิงค์นี้ด้วย 

 <script type="text/javascript">
  $(document).ready(function() {
            $('#button').click(function(e) { // ส่วนของการกำหนด button ให้สัมผัสกับส่วนของ id ในตอนต้น
          $('#modal').reveal({ // อยู่ในส่วนของการแสดงข้อความนะครับ เรากำหนด id ตรงนี้ 
       animation: 'fade',      // fade, fadeAndPop, none
                animationspeed: 600,        // ความเร็วการแสดง modal ขึ้นมา เลขมายิ่งช้าครับ
     closeonbackgroundclick: true,       
     dismissmodalclass: 'close'    
    });
   return false;
   });

  });
 </script>

ทั้งหมดนี้ก่อเป็นหลักๆของการทำงานของมัน นอกนั้นก่อเหลือแต่การตกแต่งทำความเข้าใจกับ CSS แล้วละครับ หรือใครจะเอา Login Flat UI เอาส่วนของ form มาใส่ในส่วนที่ 2 อ๋ออย่าลืมทำตามในทุกขึ้นตอนนะ ห้ามข้ามเด้อ

<div id="modal">   
           //ใส่ในส่วนนี้เลย
</div>

ไฟล์ jquery.reveal.js เอาไปใส่ใน โฟลเดอร์ js สามารถเปลี่ยนโฟลเดอร์ได้ ให้ไปเปลี่ยนในส่วนที่ 3

/*
 * jQuery Reveal Plugin 1.0
 * www.ZURB.com
 * Copyright 2010, ZURB
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
*/


(function($) {

/*---------------------------
 Defaults for Reveal
----------------------------*/
  
/*---------------------------
 Listener for data-reveal-id attributes
----------------------------*/

 $('a[data-reveal-id]').live('click', function(e) {
  e.preventDefault();
  var modalLocation = $(this).attr('data-reveal-id');
  $('#'+modalLocation).reveal($(this).data());
 });

/*---------------------------
 Extend and Execute
----------------------------*/

    $.fn.reveal = function(options) {
        
        
        var defaults = {  
      animation: 'fadeAndPop', //fade, fadeAndPop, none
      animationspeed: 300, //how fast animtions are
      closeonbackgroundclick: true, //if you click background will modal close?
      dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
     }; 
     
        //Extend dem' options
        var options = $.extend({}, defaults, options); 
 
        return this.each(function() {
        
/*---------------------------
 Global Variables
----------------------------*/
         var modal = $(this),
          topMeasure  = parseInt(modal.css('top')),
    topOffset = modal.height() + topMeasure,
            locked = false,
    modalBG = $('.reveal-modal-bg');

/*---------------------------
 Create Modal BG
----------------------------*/
   if(modalBG.length == 0) {
    modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
   }      
     
/*---------------------------
 Open & Close Animations
----------------------------*/
   //Entrance Animations
   modal.bind('reveal:open', function () {
     modalBG.unbind('click.modalEvent');
    $('.' + options.dismissmodalclass).unbind('click.modalEvent');
    if(!locked) {
     lockModal();
     if(options.animation == "fadeAndPop") {
      modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
      modalBG.fadeIn(options.animationspeed/2);
      modal.delay(options.animationspeed/2).animate({
       "top": $(document).scrollTop()+topMeasure + 'px',
       "opacity" : 1
      }, options.animationspeed,unlockModal());     
     }
     if(options.animation == "fade") {
      modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});
      modalBG.fadeIn(options.animationspeed/2);
      modal.delay(options.animationspeed/2).animate({
       "opacity" : 1
      }, options.animationspeed,unlockModal());     
     } 
     if(options.animation == "none") {
      modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
      modalBG.css({"display":"block"}); 
      unlockModal()    
     }
    }
    modal.unbind('reveal:open');
   });  

   //Closing Animation
   modal.bind('reveal:close', function () {
     if(!locked) {
     lockModal();
     if(options.animation == "fadeAndPop") {
      modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
      modal.animate({
       "top":  $(document).scrollTop()-topOffset + 'px',
       "opacity" : 0
      }, options.animationspeed/2, function() {
       modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
       unlockModal();
      });     
     }   
     if(options.animation == "fade") {
      modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
      modal.animate({
       "opacity" : 0
      }, options.animationspeed, function() {
       modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
       unlockModal();
      });     
     }   
     if(options.animation == "none") {
      modal.css({'visibility' : 'hidden', 'top' : topMeasure});
      modalBG.css({'display' : 'none'}); 
     }  
    }
    modal.unbind('reveal:close');
   });     
    
/*---------------------------
 Open and add Closing Listeners
----------------------------*/
         //Open Modal Immediately
     modal.trigger('reveal:open')
   
   //Close Modal Listeners
   var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent', function () {
     modal.trigger('reveal:close')
   });
   
   if(options.closeonbackgroundclick) {
    modalBG.css({"cursor":"pointer"})
    modalBG.bind('click.modalEvent', function () {
      modal.trigger('reveal:close')
    });
   }
   $('body').keyup(function(e) {
          if(e.which===27){ modal.trigger('reveal:close'); } // 27 is the keycode for the Escape key
   });
   
   
/*---------------------------
 Animations Locks
----------------------------*/
   function unlockModal() { 
    locked = false;
   }
   function lockModal() {
    locked = true;
   } 
   
        });//each call
    }//orbit plugin call
})(jQuery);

วันเสาร์ที่ 5 ตุลาคม พ.ศ. 2556

เริ่มต้นกับการเขียนครั้งแรกของตัวเอง ถ้าอาจารย์ไม่สั่งให้ทำงานคงไม่คิดที่จะเขียนเองรอสูบของชาวอย่างเดียว 555+
เรามาเริ่มกันดีกว่าครับ ไม่อยากดราม่า

เอากันว่าสืบเนื่องมาจากกระทู้ Flat UI ที่ได้เคยโพสไว้ก่อนหน้านี้แล้ว ตอนนี้ก่อเข้าสู่ยุคใหม่ของ GUI

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

ส่วนการนำเอาไปใช้ เอาโค้ดเนี่ยที่ให้ไป Save ลงในไฟล์ .css






body {
  font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif; /*ขนาดและชนิดของ font */
  color: #404040;  /*สีของตัวอักษร*/
  background: #f17b7b;    /*ส่วนนี้เป็น สีของพื้นหลัง*/
}

/*ส่วนของ container ก่อแปลได้ตามตัวเลยที่ครับ ที่เก็บของ ส่วนนี้จะเป็นอะไรก่อตามที่ ยัดๆไว้*/

.container {
  margin: 100px auto; /* คือการปรับส่วนของ container ให้อยู่ตรงกลางครับ*/
  width: 640px; /*ขนาดความกว้างของที่เก็บนั้นๆ*/

}

/*ส่วนของ login ก่อขึ้นรูปแล้วล่ะครับ*/

.login {
  position: relative; /*อันนี้ไม่ค่อยเข้าใจเด๋วมาแก้ให้ที่นะ*/
  margin: 0 auto; /*กำหนดให้มันอยู่ตรงกลางนั้นล่ะครับ*/
  padding: 40px 20px 20px; /*padding จะเป็นการกำหนดระยะห่างจากข้อความภายใน login ถึงขอบ*/
  width: 400px; /*ความกว้าง*/
  height: 275px; /*ความสูง*/
  background: #ededed; /*สีของพื้นหลัง*/
}

/*เป็นส่วนของ Header ของ login ครับ */

.login h1 {
  margin: -20px -20px 0px;
  line-height: 40px;
  font-size: 15px;
  font-weight: normal;
  color:#777;
  text-align: center;
  text-shadow: 0 1px white;

}

.login p {
  margin: 20px 0 0;
}

.login p:first-child {
  margin-top: 0;
}

.login input[type=Username], .login input[type=Password], .login input[type=txtEmail] {
  width: 278px; /* ขนาดของความยาว input*/
}

 

/*  เป็นส่วนของ Remember Me ครับ  */

.login p.remember_me {
  float: left;
  line-height: 30px;
}

.login p.remember_me label {
  font-size: 12px;
  color: #777;
  cursor: pointer;
}

 

.login p.remember_me input {
  position: relative;
  bottom: 1px;
  margin-right: 4px;
  vertical-align: middle;
}

 

/*  น่าจะเป็ขนาดกับชนิดของ font ในช่อง input เรานะครับ */

input {
  font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif;
  font-size: 14px;
}

 

/*  เป็นการกำหนดของช่องที่เรา Input   */

input[type=Username], input[type=Password] , input[type=txtEmail] {
  margin: 5px 60px 0px 55px;
  padding: 0 10px;
  width: 200px;
  height: 40px;
  color: #404040;
  background: white;


}

 

/*  เป็นการกำหนดของช่องที่เรา Input   แต่เฉพาะตอนที่เรากดนะครับ เลยใช้คำสั่ง focus พอกดปุ๊ปเปลี่ยนสีไรงี้*/

input[type=Username]:focus, input[type=Password]:focus , input[type=txtEmail]:focus {
  border-color: #e4e4e4;
  outline-color: #e4e4e4;
  outline-offset: 0;
}

/*  เป็นการกำหนดของปุ่มของเราครับ   */

input[type=submit] ,input[type=button] {
  margin: 0px -60px 0px 90px;
  padding: 0 30px;
  height: 40px;
  font-size: 12px;
  font-weight: bold;
  color: #FFFFFF;
  background: #0099FF;
  border: 1px #CCC;
  outline: 0;
}

 

/*  เป็นการกำหนดของปุ่มของเราครับ แต่เป็นส่วนของเรากดครับ กดปุ๊ปสีเปลี่ยนครับ  */

input[type=submit]:active ,input[type=button]:active {
  background: #00CCFF;
  border-color: #9eb9c2 #b3c0c8 #b4ccce;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}

 

 

.lt-ie9 input[type=txtUsername], .lt-ie9 input[type=txtpassword] {
  line-height: 34px;
}

ส่วนการเรียกใช้ในไฟล์ของ HTML, PHP อะไรก่อตามแต่ที่ใช้กันได้มผจะยกตัวอย่างของ html ล่ะกันครับ

เมื่อสร้างไฟล์ HTML มาก่อจะได้โค้ด

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

เราก่อจะใช้การเรียกใช้โค้ด CSS กัน ในที่นี้ไฟล์ css ผมชื่อ style1 เก็บไว้ในโฟลเดอร์ชื่อ css

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" href="css/style1.css">
</head>
เรียกใช้ปุ๊ปก่อเติมโค้ดส่วนนี้ไปใน body นะครับ


<div class="container">
  <div class="login">
    <h1>Have an account? Sign in</h1>
    <form method="post" action="">
    <table width="100%" border="0" cellpadding="00" cellspacing="0">
  <tr>
    <td align="center"></td>
  </tr>
</table>

      <p><input type="Username" name="txtUsername" value="" placeholder="Username or Email" ></p>
      <p><input type="Password" name="txtPassword" value="" placeholder="Password"></p>
      <p class="submit">
                                 <input type="button" name="commit" value="Login" onclick="window.location.href='main.html'" >
      				<input type="submit" name="commit" value="Sign Up" id="submit" ></a>
</p>   
     <p class="remember_me">
    <label>
         <label>
          <input type="checkbox" name="checkbox" id="remember_me" value="1">
          Remember me
        </label>
        </label>
         </p>
    </form>
  </div>
</div>

วันพฤหัสบดีที่ 3 ตุลาคม พ.ศ. 2556

คิดหลายท่านคงได้ดูคลิปการรีวิวเจ้าโปรแกรมประเทืองปัญญา
จากกระทรวงวัฒนธรรมที่ชื่อ Gamer Guard ไปบ้างแล้ว
ทั้งนี้ต้องขอย้ำก่อนว่า โปรแกรม Gamer Guard ดังกล่าวนั้น
"ไม่ได้สร้างมาเพื่อปิดกั้นการทำงานหรือการใช้โปรแกรมอื่นใด"
แต่ออกแบบมาเพื่อ
ตรวจสอบการใช้งานโปรแกรมที่เกี่ยวข้องกับอินเทอร์เน็ต และ เกม และให้ข้อมูลแก่ผู้ปกครอง
เพื่อที่คนอ่านจะได้ทราบว่า ไม่ต้องไปถามว่า มันไม่เห็นป้องกันอะไรได้... ก็แหงล่ะ พ่อแม่ยังป้องกันไม่ได้ โปรแกรมจะไปป้องกันอะไรได้

เริ่มเลยละกัน
เครื่องที่ตัวเองใช้ทดสอบ คือ เน็ตบุ๊ค CPU แค่ 1GHz RAM 2GB ลง OS คือ Windows 8 x64
การติดตั้งไม่ซับซ้อนอะไร แต่ใช้เวลา install นานกว่าเว็บบราวเซอร์หลายยี่ห้อ (โทษว่าเครื่องตัวเองช้าก็ด้ะ)
และสิ่งที่พบระหว่าง install มันจะให้เราเซ็ท Password อารมณ์คนลง Apache นั้นแล
แต่จะมีให้ตื่นเต้นนิดหน่อยคือเซ็ทเสร็จ กด Next มันจะขึ้น
Error 32
คิดว่าน่าจะเพราะตัวเองใช้ Win 8 64 ซึ่งไม่ซัพพอร์ทเจ้าตัวนี้ในการลง เลย Error
ฉะนั้นหนู ๆ น้อง ๆ ให้พ่อแม่ลง Win 8 นะ ชีวิตจะปลอดภัยขึ้นระดับหนึ่ง... (เพราะพ่อแม่บางคนพอเห็น Error จะบอกว่า มันใช้ไม่ได้)
แต่ไม่หรอก ถ้าพ่อแม่มีความรู้ และพยายาม ไปขุดมันที่ Program files(X86)
จะพบว่า มันลงให้เราแล้วเรา เราก็ไปทำช็อตคัท แล้วกดใช้มันก็ได้ จะได้ภาพดังหน้าจอข้างล่าง

ซึ่งก็ยัด พาสที่เราตั้งไว้ตอน install ได้เลย
จะได้หน้าจอเพื่อกำหนดว่า ในเครื่องเรามีซอฟท์แวร์อะไรที่เป็น เกม และ เน็ตบ้าง

ครัฟพ่อแม่พี่น้อง...
พ่อแม่ผู้ปกครองต้องมีความรู้เรื่องคอมนะครัฟ เพราะเจ้าตัวโปรแกรมมันจะให้เราไปคลำหาโปรแกรมเอง
(พ่อแม่บ้างคนยังไม่รู้เลยว่าเวลาตัวเองพิมพ์งาน งานไปสถิตย์อยู่โฟลเดอร์ใหน นี่เองให้พ่อแม่คลำหาเกมที่ลูกไปสรรหามาลง โอ้วแม่เจ้า)
เอาเถอะ สมมติว่ามีพ่อแม่ผ่านด่านนี้มาได้
ซึ่งตัวเองก็เทสด้วยโปรแกรมเกี่ยวกับเน็ต ก็คือ สก๊อย เอ้ย สไกป์

แต่จากการทดสอบ ทำให้เรารู้ว่าโปรแกรมนี้มันจะออโต้ดีเทคพวกเว็บบราวเซอร์ทันที (กล่าวคือ ถ้าเปิดบราวเซอร์มันจะเริ่มเก็บสถิติ)
ซึ่งก็เมื่อเราใส่ไปแล้ว กดเซฟ และวางมันลง มันจะ lock ตัวเองทันที
โดยจะไปอยู่ที่งานเบื้องหลังในส่วน Notification Area Icons

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

.....
แล้วไง
ก็ไม่แล้วไง
มันเป็นแค่ log file
ไม่มีการ lock โปรแกรมที่เกินเวลา เพราะมันไม่มีตั้งค่าเวลาตั้งแต่แรก อย่างที่บอกไว้ตั้งแต่ต้นว่า
"ไม่ได้สร้างมาเพื่อปิดกั้นการทำงานหรือการใช้โปรแกรมอื่นใด"
สรุปว่า ทำงานในเชิง
"เป็นแค่ Log file"
เอาเถอะ
ขอต่อละกัน สำหรับบุตรหลายที่แอดวานส์ขึ้นมานิด
จากการทดสอบด้วยการเรียก Task Manager ขึ้นมา

และลอง End Task ตัวโปรแกรม และ End Process โปรแกรมที่ทำงานเบื้องหลัง
พบว่า
End ปุ๊บ... หายไปปั๊บ ถาวร จนกว่าจะรีเครื่อง...
.......
/me กดรีเครื่อง...
คราวนี้เรามาลองเทสกันว่า ถ้าเราไม่ปิด และให้มันทำงานไปจะเป็นอย่างไร
จริง ๆ มันไม่มีอะไรมาก ใครเล่นเกมออนไลน์บ่อย ๆ คงเคยชินกับการที่
"อยู่ ๆ ก็มีข้อความเด้งเตือน"
โดยมันจะเตือนแบบนี้

อันนี้ 2 ชั่วโมง (สังเกต ไอคอนจะเป็นสีเขียว)

3 ชั่วโมง ไอคอนจะยังเขียว อยู่ (แต่เหมือนมันเริ่มเตือนหนัก)

4 ชั่วโมง เป็นสีเหลืองแล้ว เหมือนมันจะเริ่มโมโห เจ้าคิกคัก

และเมื่อจะใกล้ ๆ 5 ชั่วโมง ไอคอนมันจะเป็นสีแดง
แต่เมื่อครบ 5 ชั่วโมง มันกลับเด้งขึ้นมาว่า

.....
พูดจริง ๆ นะ ตอนมันเด้งป็อบอัพนี้ขึ้นมา

วันพุธที่ 2 ตุลาคม พ.ศ. 2556

หลายคนอาจจะเคยเขียน PHP แล้วพบกับโค้ดในลักษณะนี้

if($login)
  echo 'Welcome'.$username;
else
  echo 'Welcome Guest';

เราสามารถใช้ if-else แบบสั้นเพื่อรวบให้โค้ดดูสั้น กะทัดรัดได้ตามนี้

echo 'Welcome '.($login ? $username : 'Guest');

โดยหลักการใช้ if-else แบบสั้นคือ

(condition ? right : wrong)

condition คือเงื่อนไขในการตรวจสอบว่าเป็นจริงหรือเท็จ
right คือคำสั่งถ้าเงื่อนไขเป็นจริง
wrong คือคำสั่งถ้าเงื่อนไขเป็นเท็จ

ผมว่าเป็นอีกแนวทางนึงสำหรับนักพัฒนาเลยก่อว่าได้ "ถ้าพึ่งหัดเปลี่ยนมาเขียนแบบย่อ ผมว่าทำเอา งง ได้สักพักใหญ่ๆเลยล่ะครับ"

คงไม่มีใครปฏิเสธว่า flat design เป็น design trend ที่มาแรงที่สุดในขณะนี้ คำถามก็คือมันจะเป็นเหมือน design trend อื่นๆ ที่ได้รับความนิยมอยู่เพียงแค่พักเดียว หรือมันจะกลายเป็น best practice ของการ design ไปเลย?

ความเป็นมาของ Flat Design

ในช่วง 2 – 3 ปีที่ผ่านมา การออกแบบต่างๆ ไม่ว่าจะเป็นเว็บไซต์หรือแอปพลิเคชัน มักจะใช้แนวคิดที่เรียกว่า “Skeuomorphism” แต่ในปัจจุบัน นักออกแบบเริ่มมองว่าเรากำลังออกแบบงานที่เป็นดิจิตอลอยู่ ซึ่งเราไม่จำเป็นต้องไปเลียนแบบสิ่งของที่มีอยู่ในชีวิตจริงแต่อย่างใด เพราะบางคนอาจจะไม่เคยเจอหรือเคยใช้สิ่งนั้นเลยด้วยซ้ำ การออกแบบโดยเน้นไปที่ฟังก์ชั่นการใช้งานดูจะเหมาะสมกว่า

หลังจากที่ Microsoft ได้เปิดตัว Windows Phone 7 และ Windows 8 ผู้คนก็เริ่มรู้จัก flat design มากขึ้น ด้วย UI(User Interface) ที่ดูทันสมัย แปลกตา สีสันสดใส ในขณะเดียวกันก็ดูเรียบง่าย ทำให้ flat design ได้รับความนิยมในเวลาอันรวดเร็วและถูกนำมาใช้อย่างแพร่หลายในงานออกแบบไม่ว่าจะเป็นเว็บไซต์หรือแอปพลิเคชัน เรื่องนี้อาจสะท้อนให้เห็นว่า บางทีคนเราก็ไม่ได้ต้องการ UI ที่หวือหวา น่าตื่นตาตื่นใจเสมอไป ขอแค่ UI ที่เรียบง่าย และสามารถตอบสนองความต้องการได้ก็เพียงพอแล้ว

A Month With Windows 8 – Week 2 by Jamie Ryan

Flat Design คืออะไร ?

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

Elements ต่างๆ ใน Flat Design จะดูแบนราบ ไม่ลอยออกมาเหมือน Skeuomorphism

หน้าตาของ Flat Design เป็นอย่างไร ?

เรียบง่าย

ลักษณะที่เห็นได้ชัดที่สุดของ flat design คือความเรียบง่าย เรามักจะเห็นว่า elements ต่างๆ ใน flat design จะดูแบนราบ ไม่มีการให้แสงและเงา การใส่พื้นผิวให้กับวัตถุ การไล่สี รวมไปถึงเทคนิคอื่นๆ ที่จะทำให้ดูลอยออกมานอกจอ

การออกแบบหน้า Pricing ที่ดูเรียบง่าย

สีสันสดใส

flat design จะใช้สีที่หลากหลายมากขึ้น ปกติเราอาจจะใช้สีเพียงแค่ 2 – 3 สี แต่ flat design อาจใช้ได้มากถึง 6 – 8 สีเลยทีเดียว โดยสีที่นิยมเลือกมาใช้นั้น มักจะเป็นสีที่สดใส หรือ ฉูดฉาด เนื่องจากการทำให้ทุกอย่างดูแบนราบ อาจทำให้ users จดจำและแยกแยะออกได้ลำบากว่า elements ต่างๆ มีไว้ทำอะไร เราเลยจำเป็นต้องใช้สีเข้ามาช่วย

การใช้สีที่หลากหลายของ Flat Design

ตัวหนังสือใหญ่

typography หรือการใช้ตัวหนังสือ กลายเป็นสิ่งสำคัญสำหรับ flat design การเลือกใช้ typeface จะต้องสื่อถึงอารมณ์ของเว็บหรือแอปพลิเคชัน ไม่ว่าจะเป็นอารมณ์ สนุกสนาน ตื่นเต้น ลึกลับ หรือทางการ typeface ที่ใช้จะต้องสะท้อนความรู้สึกนั้นออกมาได้ นอกจากนี้ การเลือกใช้คำจะต้องกระชับ ตรงประเด็น เพื่อให้สามารถเข้าใจได้ง่าย อย่าลืมว่า elements ต่างๆ นั้นดูแบนราบไปแล้ว เท่ากับว่ามันจะช่วย “ส่งเสริม” ให้ typography ของเราเด่นมากขึ้น

Typography มีส่วนสำคัญอย่างมากใน Flat Design

อย่างไรก็ตาม flat design อาจมีหน้าตาที่ต่างกันออกไป ขึ้นอยู่กับความคิดสร้างสรรค์ของ designer แต่ละคน หากเราคิดจะเริ่มทำ flat design สามารถเข้าไปดูตัวอย่างงานออกแบบที่ใช้ flat design เพิ่มเติมได้ที่ “รวมเว็บแจกกราฟฟิก Flat Design สวยๆ + ฟรี”

แล้ว Flat Design มันดียังไง ?

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

ใช้งานง่าย

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

สวย

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

Responsive

flat design เหมาะอย่างยิ่งกับการทำ responsive web เนื่องจากมันมีแค่สีพื้นหลังที่สดใส ตัวหนังสือตัวโตๆ แล้วก็รูปไอคอนแบนๆ แต่สื่อความหมายได้ดีเท่านั้นเอง ซึ่งองค์ประกอบเหล่านี้ สามารถจัดรูปแบบให้เข้ากับหน้าจอในขนาดต่างๆ ได้ไม่ยากเหมือนกับ design แบบ skeuomorphism

Flat Design ไม่ได้ง่ายอย่างที่คิด !

อย่าลืมว่า “การออกแบบคือการแก้ปัญหา” หากจุดประสงค์ของเว็บไซต์คือการสื่อสารกับผู้ใช้งานแล้วล่ะก็ การออกแบบเว็บไซต์ ก็คือการทำให้การสื่อสารนั้นเป็นไปอย่างราบรื่น และประสบความสำเร็จ

จุดประสงค์ที่แท้จริงของ flat design นั้นไม่ใช่การทำให้ดูแบนราบ แต่เป็นการทำให้ context ดูเรียบง่าย เพื่อทำให้ content ดูเด่นขึ้นต่างหาก ซึ่งสิ่งนี้เอง ที่จะทำให้ users สามารถเข้าใจสิ่งที่เราอยากจะบอกได้ง่ายขึ้น การสื่อการของเราก็มีโอกาสสำเร็จมากขึ้น และนี้เป็นที่มาว่าทำไม flat design ถึงต้องใช้หลายๆ สี ทำไมต้องใช้สีสดใส ทำไมต้องใช้ typography ตัวใหญ่ๆ หนาๆ เป็นเพราะต้องการจะสร้าง contrast ให้กับเนื้อหานั่นเอง

ถ้าเราคิดว่า flat design นั้น ทำได้ง่ายแล้วล่ะก็ คิดผิดซะแล้ว เพราะมันยากไม่แพ้ skeuomorphism เลย designer หลายๆ คนมักจะบ่นว่า หลังจากเปลี่ยน design จาก skeuomorphism มาเป็น flat design แล้ว users ไม่รู้ว่าอันไหนกดได้บ้าง อันไหนเป็นช่องให้กรอก เนื่องจากมันแบนราบเหมือนกันหมด ที่เป็นเช่นนี้ เพราะว่า designer นั้น สนใจแต่ความสวยงาม โดยที่ไม่ได้แก้ปัญหาที่แท้จริงของการสื่อสารนั่นเอง

การออกแบบ Form สำหรับ Flat Design

elements ต่างๆ ที่มีไว้สำหรับติดต่อกับ users นั้นไม่จำเป็นจะต้องดูลอยออกมา หรือเคลื่อนไหวได้เสมอไป ตรงกันข้าม เราสามารถทำให้มันเด่นได้ด้วยการออกแบบที่ดี ทักษะการเลือกใช้สี แบบและขนาดของตัวอักษร รวมไปถึงการจัดตำแหน่งและลำดับของเนื้อหา ล้วนเป็นสิ่งสำคัญสำหรับ flat design ที่ designer จำเป็นต้องมี การเลือกที่จะใช้ flat design ถือเป็นการวัดความสามารถที่แท้จริงของ designer

Flat Design เป็นการวัดความสามารถที่แท้จริงของ Designer

อย่าปล่อยให้ Design Trend มาทำร้ายตัวเอง !

trend ยังไงก็ยังคงเป็น trend วันยังค่ำ ไม่ว่า flat design จะได้รับความนิยมแค่ไหน แต่นั่นก็ไม่ได้หมายความว่ามันจะเหมาะกับงานทุกงาน เรามักจะเห็น flat design ในเว็บที่เกี่ยวกับ startup เว็บแบบ single page หรือเว็บแนว portfolio เว็บแนวนี้จะเน้นการสื่อสารที่กระชับ เพื่อให้ users เข้าใจสิ่งที่จะนำเสนอได้เร็วที่สุด แต่หากเรานำ flat design ไปใช้กับเว็บหน่วยงานราชการ หรือเว็บรีสอร์ทชื่อดังที่มัลดีฟส์ มันจะเข้ากันได้มั้ย ? เราสามารถตาม trend ได้ แต่ต้องแน่ใจว่ามันไม่ได้ไปทำให้เนื้อหาหรือฟังก์ชั่นการใช้งานของเราด้อยลงไป

การใช้ Flat Design กับเว็บแนว Single Page

ตามใจคนอื่นให้มากขึ้น ตามใจตัวเองให้น้อยลง

ความแตกต่างสิ่งหนึ่งระหว่าง designer กับ artist ก็คือ designer จะทำตาม order ส่วน artist นั้นเลือกที่จะแสดงความเป็นตัวเองออกมา เวลาเราออกแบบเว็บไซต์ ให้เราเตือนตัวเองเสมอว่าเราไม่ใช่ artist บางอย่างเราอาจจะชอบ แต่อย่าลืมดูว่าสิ่งนั้น users ชอบด้วยหรือไม่? มันได้ช่วยให้ users ใช้งานได้ง่ายขึ้นหรือเปล่า? เราไม่ได้ทำมาเพื่อให้ตัวเองใช้คนเดียวนะ หากเราคำนึงถึงจุดนี้อยู่เสมอ ไม่ว่าเราจะใช้ skeuomorphism หรือ flat design เราก็ยังคงสามารถสร้างผลงานที่ยอดเยี่ยมได้อยู่ดี

Pages