การสร้า้งเอกสาร pdf ด้วย php

หากเราต้องการสร้าง เอกสาร .pdf  หรือ ออกรายงาน เป็น pdf  ด้วย php เราสามารถสร้างเอกสาร php ด้วย class FPDF ได้ดังนี้

1. Download zip ไฟล์จาก http://projectsoft.biz/fpdf.zip
2. Extract zip ไฟล์ไปไว้ใน folder เดียวกับไฟล์โปรแกรม php ที่ต้องการสร้างเอกสาร pdf ดังรูป

3. เขียน code สร้างไฟล์ .pdf ได้ดังนี้

<?php

define('FPDF_FONTPATH','fonts/');//กำหนดให้ ดึงไฟล์ fonts จาก folder fonts
include('fpdf.php');//ให้โปรแกรมเรียกใช้ class FPDF ได้

$pdf = new FPDF();//สร้าง object pdf 
$pdf->AddPage();//หาก เราใช้คำสั่ง  $pdf->AddPage("l"); จะได้ pdf ขนาด A4 เป็น แนวนอน

//เพิ่ม fontที่จะให้ใช้งานได้
$pdf->AddFont('angsana','','angsa.php');
$pdf->AddFont('angsana','B','angsab.php');
$pdf->AddFont('angsana','I','angsai.php');
$pdf->AddFont('angsana','BI','angsaz.php');

//เราใช้ method Cell ของ class FPDF เพื่อแสดงตัวอักษร
//$pdf->Cell(ความกว้างของกล่องข้อความ,ความสูงของกล่องข้อความ,iconv("UTF-8", "TIS-620","ข้อความ"),ขอบ);
//iconv("UTF-8", "TIS-620","ข้อความ") คือการแปลงการเข้ารหัสข้อความจาก UTF-8 เป็น TIS-620
//หาก ความกว้างของกล่องข้อความ และความสูงของกล่องข้อความเป็นศูนย์จะไม่มีความกว้างความยาวของกล่องข้อความ
//เช่น  $pdf->Cell(0,0,iconv("UTF-8", "TIS-620","ปกติ"));
//เราเลือกที่จะไม่ส่งค่าขอบได้ ตามตัวอย่างยรรทัดบน แต่ถ้าส่งค่าขอบไป เช่น cell นั้นจะแสดงขอบให้ เช่น
//$pdf->Cell(30,15,iconv("UTF-8", "TIS-620","ตัวหนาขีดเส้นใต้"),1);

$pdf->setXY(10,10);//แสดงข้อความห่างขอบซ้าย 10 ขอบบน 10
$pdf->SetFont('angsana','',14);//กำหนด font แบบปกติ  angsana ขนาด 14 
$pdf->Cell(0,0,iconv("UTF-8", "TIS-620","ปกติ"));

$pdf->setXY(10,15);//แสดงข้อความห่างขอบซ้าย 10 ขอบบน 15
$pdf->SetFont('angsana','B',14);//กำหนด font angsana ตัวหนา ขนาด 14 
$pdf->Cell(0,0,iconv("UTF-8", "TIS-620","ตัวหนา"));

$pdf->setXY(10,20);//แสดงข้อความห่างขอบซ้าย 10 ขอบบน 20
$pdf->SetFont('angsana','I',14);//กำหนด font angsana ตัวเอียง ขนาด 14 
$pdf->Cell(0,0,iconv("UTF-8", "TIS-620","ตัวเอียง"));

$pdf->setXY(10,25);//แสดงข้อความห่างขอบซ้าย 10 ขอบบน 25
$pdf->SetFont('angsana','BU',14);//กำหนด font angsana ตัวหนาขีดเส้นใต้ ขนาด 14 
$pdf->Cell(30,15,iconv("UTF-8", "TIS-620","ตัวหนาขีดเส้นใต้"),1);
$pdf->SetFont('angsana','UI',14);//กำหนด font angsana ตัวเอียงขีดเส้นใต้ ขนาด 14
$pdf->Cell(30,15,iconv("UTF-8", "TIS-620","ตัวเอียงขีดเส้นใต้"),1);

$pdf->Image('http://projectsoft.biz/images/code2.jpg',80,60,100,40);//แสดงรูป
//$pdf->Image('path ไฟล์',ห่างจากขอบซ้าย,ห่างจากจากขอบบน,ความกว้างของรูป,ความสูงของรูป);

$pdf->Output();//สั่งพิมพ์ pdf

?>

ผลของโปรแกรมจะได้ดังนี้

การสร้าง textbox ที่สามารถพิมพ์ได้เฉพาะตัวเลขทศนิยมด้วย jquery

หากต้องการ textbox ที่สามารถพิมพ์ได้เฉพาะ ตัวเลขทศนิยม เราสามารถใช้ javascript และ jquery ได้ดังนี้


<input type="text" class="float" /><!-- สร้าง textbox กำหนดให้มี class เป็น   float -->

<script type="text/javascript" >

$(".float").bind( "keyup", function(e) {
  
    var ch=$(this).val();  //เก็บข้อความใน textbox ไว้ในตัวแปร ch
    var digit;  //ตัวแปรสำหรับเก็บตัวอักษรแต่ละอักขระในตัวแปร ch

    // วน loop หาแต่ละตัวอักขระใน text box
    for(var i=0 ; i<ch.length ; i++)
    {
        digit = ch.charAt(i)
      
        if(digit >="0" && digit <="9") //แต่ละอักขระอยู่ในช่วง 0-9  และเป็นทศนิยม หรือไม่
        {
          
        }else if(digit!=".")
        {
            $(this).val($(this).val().replace(digit,""));
            //ถ้าไม่ได้อยู่ในช่วง 0-9 และไม่ได้เป็นทศนิยมจะตัดตัวอักขระตัวนั้นออก
        }
      
    }
  
});

</script>

การสร้าง Android Application โดยใช้ HTML

เราสามารถสร้าง Android Application โดยใช้ HTML ได้จาก eclipse ide ดังนี้

1. ใน folder project ของ Android Application ที่สร้างขึ้นจาก eclipse ide แก้ไฟล์ AndroidManifest.xml

ใส่   <uses-permission android:name="android.permission.INTERNET" /> เพื่อให้ Application ของเราสามารถเชื่อมต่อกับ Internet ได้

2. แก้ไฟล์ใน  folder \res\layout ไฟล์ activity_main.xml 

เพิ่ม  <WebView

        android:id="@+id/webView1"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:layout_alignParentBottom="true"

        android:layout_alignParentLeft="true"

        android:layout_alignParentRight="true" /> เข้าไปสำหรับแสดงข้อมูลไฟล์ HTML

3.  ที่ folder assets ให้สร้าง folder www และใน folder www ให้สร้างไฟล์ index.html ซึ่งสามารถใส่ code  HTML ลงไปที่ต้องการให้แสดงใน Application รวมถึงไฟล์รูป ไฟล์ style sheet ต่างๆ ก็สามารถใส่ได้ใน foler www ที่สร้างขึ้นมานี้ด้วย

4. แก้ไฟล์ MainActivity.java ในโฟลเดอร์ src และ โฟลเดอร์ย่อยตามชื่อ package ให้เพิ่ม code เพื่อให้ เอา code HTML ในไฟล์ asset/www/index.html มาแสดง

                

        private WebView webView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

webView = (WebView) findViewById(R.id.webView1);

webView.getSettings().setJavaScriptEnabled(true);

webView.loadUrl("file:///android_asset/www/index.html");

}

ใน class MainActivity 

การตรวจสอบการกด enter key ใน text box ด้วย javascript

เพื่อความง่ายในการใช้งาน webapplication  ของ user เพื่อให้ให้ user ต้องใช้ mouse click ที่ปุ่ม เราอาจสั่งให้โปรแกรมทำงาน แบบเดียวกับที่กดปุ่ม เมื่อผู้ใช้กด enter ที่ key บอร์ด โดยมี  code ในการตรวจสอบการกด enter ดังนี้

<input onkeypress="return check_enter(event)"  />

<script>

function check_enter(e)//กำหนดให้  function check_enter ทำงานเมื่อ มีการกด keyboard
{
if (e.keyCode == 13) { //ถ้า e.keyCode เป็น 13 แสดงว่า user กด enter
alert('You press enter ! ');
        }
}
</script>

การบันทึกข้อมูลด้วย 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()"  />