web programming bookmark

วันจันทร์ที่ 11 เมษายน พ.ศ. 2554

sql profiler

http://sites.google.com/site/sqlprofiler/

ภาษาโปรแกรมซึ่งค่อนข้างใหม่มักจะมีคำสั่ง try catch

คำสั่งนี้ถ้าจะเรียกตรงๆ อาจจะเรียกว่าคำสั่ง
try ... catch ....
ลองทำ .... ถ้าเจอปัญหาก็ให้ทำ .... ด้วย

คุณสมบัติของคำสั่งนี้ก็เพื่อดัก error แปลกๆ ที่ดักโดยใช้คำสั่งตรวจสอบเงื่อนไขธรรมดาได้ยากหรือไม่ได้เลย
และหาวิธีจัดการกับ error ครับเช่น

ในการเขียน embedded database query ในภาษาโปรแกรม
มักจะเกิด database integrity error อย่างเช่น key ซ้ำ, รูปแบบข้อมูลไม่ตรงกับ field ซึ่งคำสั่ง try catch ก็จะช่วยให้เราจัดการกับ error นี้ได้เหมาะสมเช่นถ้า key ซ้ำเราอาจจะสร้าง key ขึ้นมาใหม่และทำการ insert อีกครั้ง

parse error ข้อมูลรูปแบบไม่ถูกต้องเช่น string แปลงเป็นวันที่ไม่ได้ ฯลฯ
ถ้าเกิด error เราก็อาจจะกำหนดค่าของตัวแปรเป็นค่า default ที่เราตั้งขึ้น

divide by zero การคำนวณที่เกิดข้อผิดพลาดจะทำอย่างไรเมื่อเกิดปัญหานี้ บางครั้งตัวเลขที่มาคำนวณอาจมีหลายตัว
การดักการหารด้วยศูนย์จะต้องเขียนซับซ้อน การใช้ try catch จะทำได้สะดวกกว่า

try
{
$i = 1/$x;
}catch(Exception $e){
//จัดการกับ error ด้วยวิธีต่างๆ
$i = -1;
}

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

adodb class tutorial

adodb class เป็นคลาสที่ช่วยให้เขียนโปรแกรมติดต่อ database ง่ายขึ้นครับ
นอกจากนี้แล้วยังช่วย escape input เพื่อป้องกัน sql injection
และเป็น database layer ถ้าเขียนติดต่อ database ใน adodb ก็จะช่วยให้ย้ายไป database อื่นได้ง่ายขึ้นแก้ไขน้อยกว่าครับ

เริ่มต้นให้ download adodb มีหลายเวอร์ชั่นครับเลือกเอาเวอร์ชั่นที่ต้องการมาไฟล์ไฟล์เดียวครับ
http://sourceforge.net/projects/adodb/files/


<?php

//config
$conf = array();
$conf['username']   = 'root';
$conf['password']   = '12345';
$conf['host']       = 'localhost';
$conf['db']         = 'test';
$conf['driver']    = 'mysqli'; //เลือกเป็น mysqli เพื่อจะได้ใช้งาน transaction ใน adodb class ได้

//setup and connect to db
require 'adodb/adodb.inc.php'; //เปลี่ยน path ไปยังไฟล์ adodb.inc.php ให้ถูกต้อง
$ADODB_FETCH_MODE = ADODB_FETCH_ASSOC;
$db = ADONewConnection($conf['driver']);
$db->Connect($conf['host'], $conf['username'], $conf['password'], $conf['db']);
$rs = $db->Execute('SET NAMES UTF8');

//create test data
$row = $db->GetRow("SHOW TABLES LIKE 'guestbook_test2'");
if (empty($row)){
    $db->Execute(
        'CREATE TABLE guestbook_test2 ('.
          'id int(10) unsigned NOT NULL AUTO_INCREMENT,'.
          'name varchar(20) NOT NULL,'.
          'detail text NOT NULL,'.
          'PRIMARY KEY (id)'.
        ')'
    );
    if ($db->ErrorNo()){
        die($db->ErrorMsg());
    }
    echo 'create table successfully.<br>';
    srand();
    foreach(range(1,100) as $a){
        $id = null; //insert id=null, update $id = id value
        $name = md5(rand(1,10000));
        $detail = sha1(rand(1,10000));
        $db->Replace('guestbook_test2',compact('name','detail','id'),'id',true);
    }
    echo 'insert data successfully.<br>';
}

//pagination
$limit = 10;
$page = empty($_GET['page']) ? 1 : (int)$_GET['page'];

$rs = $db->PageExecute("SELECT * FROM guestbook_test2", $limit, $page);        
$page_row_count = $rs->RowCount();
$row_count = $rs->MaxRecordCount();
$page_count = $rs->LastPageNo();
$rows = $rs->GetRows();
$rs->Close();

//test Execute and FetchRow
$select_id = 11;
$select_id2 = 15;
$rs = $db->Execute("SELECT * FROM guestbook_test2 WHERE id=? OR id=?", array($select_id,$select_id2));
$data = array();
while($row = $rs->FetchRow()){
    $data[] = $row;
}

//test GetAssoc
$data2 = $db->GetAssoc("SELECT id,name FROM guestbook_test2 WHERE id BETWEEN ? AND ?",array(51,52));

//close connection
$db->Close();

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=tis-620" />
    <title>adodb tutorial</title>
</head>
<body>

    <!-- records of this page -->
    <?php foreach($rows as $row):?>
        <?php echo $row['id'],': ',$row['detail'],' ...... by <b>',$row['name'],'</b>';?>
        <hr />
    <?php endforeach;?>

    <!-- page links -->
    <?php for($i=1; $i<=$page_count; $i++):?>
        <a href="?page=<?php echo $i;?>"><?php echo $i;?></a>
    <?php endfor;?>

    <hr />
    <!-- records of select_id1, select_id2 -->
    <?php foreach($data as $row):?>
        <?php echo $row['id'],': ',$row['detail'],' ...... by <b>',$row['name'],'</b>';?>
        <hr />
    <?php endforeach;?>

    <!-- records of 51 to 52 -->
    <?php foreach($data2 as $id=>$value):?>
        <?php echo $id,': ',$value,'</b>';?>
        <hr />
    <?php endforeach;?>

</body>
</html>

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

mod_rewrite

แทรก directive ลงใน httpd.conf เพื่อเก็บ log เวลา mod_rewrite ทำงาน
(เพื่อตรวจสอบการเขียน mod_rewrite ให้ถูกต้อง)
แล้ว restart apache ถ้าไม่ขึ้นอาจเกิดจากยังไม่ได้ติดตั้ง mod_rewrite หรือ path ชี้ไปยังไฟล์ที่จะให้เขียน log
RewriteLog "C:/xampp/htdocs/sp/rewritelog.txt"
RewriteLogLevel 9

ตัวอย่างการเขียน
1) ไฟล์ที่ชื่อ t.php ไ่ม่ว่าอยู่ระดับหรือโฟลเดอร์ไหนก็ตาม
ให้เปลี่ยนเป็นการ reqeust ไฟล์ /sp/test/s.php
เช่น
RewriteRule t.php /sp/test/s.php
เมื่อเขียนคำสั่งตามนี้แล้วในไฟล์ .htaccess จะทำให้เมื่อ request url
http://localhost/t.php
http://localhost/test/t.php
จะเป็นการ request url
http://localhost/sp/test/s.php
โดยจะเป็นการ request แบบซ่อน path ที่แท้จริง
คือแสดงข้อมูลของ s.php ส่วน url ยังคงเป็น ของ t.php เช่นเดิม
ต่างจากการ redirect ซึ่งจะแสดง url ที่แท้จริงนั่นก็คือ s.php

2) ไฟล์และรูปแบบ request ใดๆ ยกเว้นไฟล์ที่ชื่อ s.php จะถูกแปลงเป็นการเรียก request /sp/test/s.php?page=ไฟล์และรูปแบบการ request ในครั้งแรก
เช่น
RewriteRule s.php$ - [L]
RewriteRule (.*) /sp/test/s.php?page=$1
เมื่อเขียนคำสั่งตามนี้แล้วในไฟล์ .htaccess จะทำให้เมื่อ request url
http://localhost/t.php
http://localhost/test/t.php

เราสามารถใช้ RewriteCond ช่วยให้ได้ผลเหมือนข้างบนได้
RewriteCond %{REQUEST_URI} !(s.php)
RewriteRule (.*) /sp/test/s.php?page=$1

seo-url-mod-rewrite-htaccess/

วันพฤหัสบดีที่ 17 กุมภาพันธ์ พ.ศ. 2554

jquery Stop Propagation

ลำดับการเกิด event จาก element หนึ่งๆ จะเริ่มต้นจาก elment ด้านใน หรือด้านนอก ในแต่ละ browser จะต่างกัน
แต่ jquery จะกำหนดให้ลำดับการเกิดแบบ Event bubbling นั่นคือเริ่มจากด้านในก่อน
(โดยทั่วไปนะแต่อาจมีเทคนิคพิเศษที่ทำให้ลำดับการเกิด event เปลี่ยน)
http://www.quirksmode.org/js/events_order.html
http://api.jquery.com/bind/


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
<script type="text/javascript">
    //<![CDATA[
    $(function(){
        $('#xxx').click(function(event){
   alert('div event');
  });
  $('#xxx button').click(function(event){
   alert('button event');
   if (confirm('stop next event?'))
    return false;
  });
    });
    //]]>
</script>
</head>
<body>

<div id="xxx">
 ###<button>button in div</button>###
</div>

</body>
</html>

selector จะใช้สำหรับการเลือก element ครับ
แต่ถ้าจะจัดการกับ event ที่มี element ที่คาบเกี่ยวกัน (ซ้อนทับกัน)
แค่ selector ยังไม่พอครับ เพราะ event handler
ของตัวที่คลุมอยู่ก็กระทบกับตัวที่อยู่ข้างในมันด้วย จึงต้องใช้คำสั่ง stop propagation ควบคุมอีกทีหนึ่ง

การใช้คำสั่ง return false; ข้างบนี้จะเทียบได้กับ preventDefault(); และ stopPropagation(); พร้อมๆ กันครับ

stopPropagation()
preventDefault()

วันอังคารที่ 1 กุมภาพันธ์ พ.ศ. 2554

jQuery ช่วยส่งข้อมูลแบบ Cross Domain ง่ายนิดเดียว

การส่งค่า AJAX ไปยัง server side script ที่อยู่คนละโดเมนกับไฟล์ที่รีเควสท์ browser ต่างๆ จะไม่อนุญาติให้ทำเนื่องจากเหตุผลทางด้าน security
โดยทั่วไปจะแก้ปัญหาใช้วิธีรีเควสท์ AJAX ผ่านทาง Proxy แต่วิธีนี้ต้องใช้คำสั่งจำพวก
open remote file ถ้าใช้เว็บโฮสฟรีก็หมดสิทธิใช้คำสั่งพวกนี้เพราะมักจะถูกกันเอาไว้ไม่ให้ใช้

แต่มีอีกทางเลือกหนึ่งเป็นเทคนิคในการแทรก script tag ลงไปพร้อมกับตั้ง src ให้เป็น url ของไฟล์ที่มีฟอร์แมท JSONP
ทำให้เราสามารถเอาข้อมูลมาใช้งานได้เลย
ฟอร์แมทของ JSONP สรุปง่ายๆ เลยก็คือเป็น statement ของการ call function ธรรมดาๆ นี่เอง
โดยมี agument อยู่ในรูปแบบ JSON
เช่น callbackfunction({"name":"hello world"}); เป็นการส่ง argument
ไปให้กับ function ที่ชื่อว่า callbackfunction ดังนั้นเมื่อเราสร้าง function ที่ชื่อว่า callbackfunction อยู่ก่อนแล้ว
function callbackfunction(e){
alert(e.name); //แสดง hello world (จะทำงานทันทีหลังจากโหลด JSONP เรียบร้อย)
}
เราก็สามารถดึงเอา argument ที่ได้ server ส่งมาให้ได้โดยง่าย

เมื่อเราเรียกคำสั่ง $.ajax และกำหนด dataType เป็น jsonp
jQuery จะเปลี่ยนจากการรีเควสท์ AJAX เป็นการแทรก tag script ดังกล่าวข้างต้นให้โดยอัตโนมัติ
ทำให้เราสามารถรีเควสข้อมูลแบบ GET ผ่านทาง script tag ได้ราวกับการรีเควส AJAX ตามปกติ

test.php

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=TIS-620" />
<title>JSONP</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

$(function(){
 $("#jsonp-request").click(function(e){
   $.ajax({
     url:'http://goldxp.thport.com/jquery/jsonpdata.php',
   type:'GET',
   dataType:'jsonp', //ตรงนี้ทำให้สามารถ cross domain ได้
   dataCharset:'jsonp',
     success:function(e){
    alert("jsonp data="+e[0].name);
   }
   });
   e.preventDefault();
 });
});

</script>

</head>
<body>
    <a href="#" id="jsonp-request">JSONP-Request</a>
</body>
</html>

jsondata.php

<?php echo $_GET['callback']?>([{"name" : <?php echo rand(1,1000);?>}]);

เนื่องจากเป็นการเรียกข้ามโดเมนจึงมีเรื่องต้องระวังเรื่องความปลอดภัยเพิ่มขึ้นดังนี้ครับ
1) ฝั่ง server ถ้าจะรับข้อมูลจาก client เอาไปบันทึก แม้ว่าจะเชื่อถือ http referer ไม่ค่อยได้
แต่อย่างน้อยก็ควรจะตรวจสอบ http referer เพื่อกันการยิ่งข้อมูลมั่วๆ เข้ามา
2) ฝั่ง client ถ้าไม่ได้ตรวจสอบ json ให้ละเอียดว่าเป็นข้อมูลอย่างเดียวไม่มีคำสั่งปนเข้ามา
จะต้องรับข้อมูล json, jsonp หรือ javascript จาก server ที่น่าเชื่อถือเท่านั้น
เพราะอาจจะมีการแทรกคำสั่ง javascript เข้ามาใน json ได้เหมือนกันยกตัวอย่างเช่น
callbackfunction(function(){alert('test');}());
สำหรับ json ยังพอที่จะตรวจสอบข้อมูลได้ก่อนจะเรียกคำสั่ง eval(response_text)
แต่ jsonp ที่เรียกผ่านทาง tag script เป็นคำสั่งโดยตรงเลย
ดังนั้นควรจะรับข้อมูล jsonp ก็เฉพาะเว็บไซท์ที่น่าเชื่อถือเท่านั้นครับ

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

jquery prepend and prependTo


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=tis-620" />
<title>prepend and prependTo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
//<![CDATA[
$(function(){
 $('#button1').click(function(){
   //method 1, append
   var new_data = '<div>'+$('#data').val()+'</div>';
   var container_el = $('#container').prepend(new_data);
   alert(container_el.attr('id'));
 });
 $('#button2').click(function(){
   //method 2, appendTo
   var new_data = '<div class="t">'+$('#data').val()+'</div>';
   var new_data_el = $(new_data).prependTo('#container');
   alert(new_data_el.attr('class'));
 });
});
//]]>
</script>
</head>
  
<body>

    <div id="container">
        <div id="a">#</div>
        <div id="b">#</div>
        <div id="c">#</div>
        <div id="d">#</div>
        <div id="e">#</div>
    </div>
    
    <input type="text" id="data" value="test"/>
    <button id="button1">button1 prepend</button>
    <button id="button2">button2 prependTo</button>
  
</body>
</html>

หน้าเว็บ