php easy calculator with Ajax เครื่องคิดเลขอย่างง่าย บวก ลบ คูณ หาร ภาคต่อ

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

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

หลักการทำงานของเครื่องคิดเลข Ajax กับ PHP คร่าว ๆ

1. ผู้ใช้ป้อนข้อมูลที่ต้องการ บวก ลบ คูณ หาร แล้วกดปุ่ม คำนวณ
2. ในเหตุการ OnClick ของปุ่มคำนวณ ค่าที่ผู้ใช้ป้อนจะถูกส่งไปยังฟังก์ชั่น kidlak_chk() เพื่อดำเนินการประมวลผล
3. จากนั้นโปรแกรมจะส่งค่าที่ได้ไปประมวลผลที่ไฟล์ kidlak_chk.php เพื่อทำการบวก ลบ คูณ หาร ตามที่ผู้ใช้ป้อนมา
4. เสร็จแล้วแสดงผลค่าที่ประมวลได้ ใน show_result

kidlak.php

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

<title>เครื่องคิดเลขอย่างง่าย บวก ลบ คูณ หาร ภาคต่อ กับ Ajax</title>

 

<b id="show_result"></b>

<input type="text" name="number" id="number">

   <input type="submit" name="Submit" value="คำนวณ" onclick="kidlak_chk(); return false;">

 

<script language="javascript">

// Start XmlHttp Object

function uzXmlHttp(){

    var xmlhttp = false;

    try{

        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

    }catch(e){

        try{

            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

        }catch(e){

            xmlhttp = false;

        }

    }

 

    if(!xmlhttp && document.createElement){

        xmlhttp = new XMLHttpRequest();

    }

    return xmlhttp;

}

// End XmlHttp Object

 

function kidlak_chk(){

var url = 'kidlak_chk.php?number='+document.getElementById('number').value; 

//alert(url);

 

    xmlhttp = uzXmlHttp();

    xmlhttp.open("GET", url, false);

xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8"); // set Header

    xmlhttp.send(null);

document.getElementById('show_result').innerHTML =  xmlhttp.responseText;

}

</script>

kidlak_chk.php

<?php

$number=$_GET['number']; // รับค่าตัวแปร GET
 
 if(strpos($number," ")){ // ถ้าเป็นช่องว่าง แสดงว่าเป็น +
  $Midtxt=explode(' ',$number);
  $num1=$Midtxt[0];
  $num2=$Midtxt[1];
  echo $number." = ".($num1+$num2);
 }
 if(strpos($number,"-")){
  $Midtxt=explode('-',$number);
  $num1=$Midtxt[0];
  $num2=$Midtxt[1];
  echo $number." = ".($num1-$num2);
 }
 if(strpos($number,"*")){
  $Midtxt=explode('*',$number);
  $num1=$Midtxt[0];
  $num2=$Midtxt[1];
  echo $number." = ".($num1*$num2);
 }
 if(strpos($number,"/")){
  $Midtxt=explode('/',$number);
  $num1=$Midtxt[0];
  $num2=$Midtxt[1];
  echo $number." = ".($num1/$num2);
 }

?>

 *** เห็นง่าย ๆ แบบนี้ ตอนทำจริงทำเอาผมเกือบไปไม่เป็นเลยทีเดียว เนื่องจากตอนส่งค่าเครื่องหมายบวก (+) จากไฟล์ kidlak_ajax.php ไป kidlak_chk.php นั้น เครื่องหมายบวก กลายเป็นช่องว่าง ซะงั้น งมอยู่ตั้งนานกว่าจะเจอฟังก์ชั่นมาจัดการกับมัน นั่นก็คือใช้คำสั่ง strpos เช็คค่าว่างครับ ถ้าเจอค่าว่างก็แสดงว่าผู้ใช้ต้องการ บวกเลขนั่นเอง หรือใครที่มีวิธีอื่นที่ดีกว่าก็เปลี่ยนได้ ตามสะดวกนะครับ อันนี้ผมเขียนเล่น ๆ ลองฝึกสมองเท่านั้น

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

ขอบคุณทุกท่่านที่แวะเข้ามาเยี่ยมชมเว็บของเรา www.code-father.com