การบันทึกข้อมูลด้วย HTML5

HTML 5 ได้เพิ่มความสามารถในการบันทึกข้อมูลลงในเครื่องของผู้ใช้ โดยเรียกว่า Local Storage 
มีวิธีใช้ดังนี้

<div id="result"></div>
<script>
localStorage["Name"]="Joe";//กำหนดค่าให้กับ Local Storage บันทึกลงเครื่องผู้ใช้
document.getElementById("result").innerHTML="Name: "+ localStorage["Name"];
</script>

ผลของโปรแกรม คือ

Name: Joe

โดยหากต้องการอ่านข้อมูลจาก Local Storage สามารถเรียกได้โดย

 localStorage["Name"]

วิธีตรวจสอบเว็บที่เปิดจาก iphone ipad android

ในบางครั้งเราต้องการให้หน้าเว็บของเราแสดงผลที่ต่างๆออกไปสำหรับผู้ที่เปิดดูเว้บในแต่ละอุปกรณ์ เช่น PC iphone ipad หรืออุปกรณ์พกพาระบบปฎิบัติการ Android
เราสามารถตรวจสอบได้ว่าผู้ใช้เปิดหน้าเว็บจากอุปกรณ์ใดได้โดยใช้ PHP ได้ดังนี้

<?php

     $iphone = stripos(strtolower($_SERVER['HTTP_USER_AGENT'],"iphone"));
     $ipad = stripos(strtolower($_SERVER['HTTP_USER_AGENT'],"ipad"));
     $android = stripos(strtolower($_SERVER['HTTP_USER_AGENT']),"android"));

        if($iphone!==false)
        {
            //แสดงผลแบบ iphone
        }else  if($ipad!==false)
        {
              //แสดงผลแบบ ipad
        }else if($android!==false)
        {
                //แสดงผลแบบ android
         }else
        {
               //แสดงผลแบบ PC
         }


?>

สร้างการฟบนเว็บแท่งด้วย jqplot

หากต้องการแสดงผลข้อมูลเป็นกราฟบนหน้าเว็บเราสามารถใช้  jqplot ซึ่งเป็น javascript library มาใช้ในการสร้างกราฟบนเว็บ ได้ดังนี้

1. เรียกใช้  javascript library และ style sheet

<link rel="stylesheet" type="text/css" href="http://projectsoft.biz/graph/jquery.jqplot.css" />
<script language="javascript" type="text/javascript" src="http://projectsoft.biz/graph/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://projectsoft.biz/graph/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="http://projectsoft.biz/graph/plugins/jqplot.barRenderer.js"></script>
<script language="javascript" type="text/javascript" src="http://projectsoft.biz/graph/plugins/jqplot.categoryAxisRenderer.js"></script>


2. สร้างพื้นที่แสดงกราฟบนเว็บ

<div id="chart1" style="width:ใส่ความกว้างของกราฟpx; height:ใส่ความสูงของกราฟpx;"></div>


3. ใส่ code javascript render กราฟ


<script class="code" type="text/javascript">
  $(document).ready(function(){

    plot1 = $.jqplot('chart1', [ใส่ค่าของแต่ละ item], {
      seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
        rendererOptions: {fillToZero: true}
      },
      series:[
        ใส่ชื่อ item
      ],
      legend: {
        show: true,
        placement: 'outsideGrid'
      },
      axes: {
        xaxis: {
          renderer: $.jqplot.CategoryAxisRenderer,
          ticks: ['ใส่ข้อความที่ต้องการให้แสดงในแกน X']
        },
        yaxis: {
          autoscale: true,
          tickOptions: {formatString: 'หน่วยของค่า item'}
        }
      }
    });
  });
  </script>

ตัวอย่างเช่น

<script class="code" type="text/javascript">
  $(document).ready(function(){

    plot1 = $.jqplot('chart1', [[200],[460],[260],[300]], {
      seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
        rendererOptions: {fillToZero: true}
      },
      series:[
        {label:'มกราคม'},{label:'กมุภาพันธ์'},{label:'มีนาคม'},{label:'เมษายน'}
      ],
      legend: {
        show: true,
        placement: 'outsideGrid'
      },
      axes: {
        xaxis: {
          renderer: $.jqplot.CategoryAxisRenderer,
          ticks: ['เดือน']
        },
        yaxis: {
          autoscale: true,
          tickOptions: {formatString: '%d ล้านบาท'}
        }
      }
    });
  });
  </script>

ผลลัพธ์ที่ได้ คือ

รับทำโปรเจคนักศึกษา

การสร้างตัวเลือกปฎิทินด้วย jquery Datepicker

      สำหรับข้อมูลประเภทวันที่การใส่ input ใน Form เป็นรูปแบบปฎิทินให้เลือกวันที่จะทำให้ผู้ใช้รู้สึกจะดวก และดูน่าใช่มากกว่า
     สำหรับการสร้าง input ปฎิทิน สามารถทำได้ดังนี้

1.)

  <!--   เรียกใช้ jquery  ui  สำหรับสร้าง input ปฎิทิน   -->

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

   
2.)

 <!--   กำหนดให้ input ที่มี id เป็น datepicker เป็น input ปฎิทิน -->

<script>

  $(function() {
    $( "#datepicker" ).datepicker({ dateFormat: 'dd/mm/yy' ,isBuddhist: false});//กำหนดให้ Format ของวันที่เป็น วัน/เดือน/ปี และแสดงเป็นปี ค.ศ.
  });
 </script>


3)

<!--   สร้า้ง input ปฎิทิน -->

 <input type="text" id="datepicker" />

การทำแบบฟอร์มเรียเก็บเงินจาก PayPal สำหรับ Website E-commerce

สำหรับระบบ E-commerce หากเราต้องการจะเรียกเก็บเงินจากลูกค้าโดยใช้บริการ Pay Pal  เราสามารถสร้าง form เพื่อไปเรียกเก็บเงินที่ Pay Pal ได้ดังนี้

<form action="https://www.paypal.com/th/cgi-bin/webscr" method="post">

    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="business" value="Email ของผู้รับเงิน ที่สมัครไว้กับ Paypal">
    <input type="hidden" name="item_name" value="ชื่อสินค้าที่สั่งซื้อ">
    <input type="hidden" name="currency_code" value="USD">
    <!-- หากสกุลเงินที่เรียกเก็บเป็นบาทให้ใส่เป็น THB  -->
    <input type="hidden" name="amount" value="จำนวนเงินที่ต้องชำระ">
    <input type="submit" value=" ชำระเงิน " >
   <!--หากต้องการชื่อปุ่มที่จะ link ไป Pay Pal เป็นชื่ออื่นสามารถแก้ใน attribute value ได้  -->
     

</form>


เมื่อเขียน code ตามด้านบนแล้ว หน้าเว็บจะแสดงปุ่ม "ชำระเงิน" ที่ไปเรียกเก็บเงินที่เว็บ Pay Pal

การสร้าง link สั่งพิมพ์หน้าเว็บ

หากเราต้องการพิมพ์หน้าเว็บโดยไม่ต้องการใช้เมนูพิมพ์ของ browser แต่ต้องการให้กดพิมพ์ภายในหน้าเว็บเลยเราสามารถใช้ function print ของ javascript ได้ดังนี้

<a href="javascript:print()" >พิมพ์</a>
หรือ
 <input type="button" value="พิมพ์" onclick="print()"  />

การหาค่าต่างของวันที่ ด้วย javascript

หากเราต้องเรามีข้อมูลเป็นวันที่ อยู่ 2 ชุด และเราต้องการหาว่าวันที่ทั้งสองห่างกันกี่วัน
เราสามารถเขียนโปรแกรมหาได้โดยใช้ ภาษา PHP ได้ดังที่เคยกล่าวแล้วในบทความ การหาจำนวนวันที่เริ่มต้น ถึงวันที่สิ้นสุด คราวนี้เราจะมาลองดูการหาค่าต่างของวันที่ ด้วย javascript  ดูบ้าง

<script>
//เรียก funtion DateDiff และส่งค่า parameter เป็นข้อมูลประเภทวันที่โดยใช้คำสั่งสร้าง object  new Date
var date_diff=DateDiff(new Date("2012-12-1"),new Date("2012-12-5"));


function DateDiff(date1, date2)
{
var datediff = date1.getTime() - date2.getTime(); //เปลี่ยนวันที่เป็นวินาที และหาค่าความต่างโดยการลบ
return (datediff / (24*60*60*1000));//เปลี่ยนเวลาวินาทีเป็นจำนวนวัน โดยหารด้วย 24*60*60*1000 และ return ค่ากลับ
}

</script>


หมายเหตุ หากพารามิเตอร์ date2 มีค่ามากกว่า  date1 แสดงว่า date2 มาทีหลัง date1 function Datediff จะ return เป็นค่าลบ