#php easy calculator with Ajax เครื่องคิดเลขอย่างง่าย บวก ลบ คูณ หาร ภาคต่อ > CODE-FATHER.com

#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

Tag! #PHP บวก ลบ คูณ หาร # โค้ด บวก ลบ คูณ หาร C # โค้ดภาษาซี บวก ลบ คูณ หาร # Visual Basic บวก ลบ คูณ หาร # โค้ด ภาษาซี เครื่องคิดเลข บวก ลบ คูณ หาร # โค้ด เครื่องคิดเลข visual studio # โค้ดภาษาซี บวกเลข # โค้ดเครื่องคิดเลข html # โค้ดคำนวณ html # Code PHP คำนวณ ตัวเลข # javascript บวกเลขจาก textbox # โค้ด PHP บวก ลบ คูณ หาร # โค้ด เครื่องคิดเลข HTML # php บวกเลขจากฐานข้อมูล # โค้ด php คำนวณราคาสินค้า # javascript บวกเลข # code php คำนวณ ตัวเลข จากฐานข้อมูล # โค้ด คำนวณดอกเบี้ย VB. # โปรแกรมคำนวณ php # โปรแกรม คำนวณ เลข PHP # javascript รับค่าจาก input # โค้ดphp บวก ลบ คูณ หาร # โปรแกรมบวกเลข c++ # App บวก ลบ คูณ หาร # เครื่องคิดเลขยกกําลัง ออนไลน์ # โปรแกรม บวก ลบ เลข # เครื่องคิดเลขยกกําลัง เศษส่วน # บวก ลบ คูณ หาร จํา น วน เต็ม # แอพเครื่องคิดเลขยกกําลัง # โค้ด บวก ลบ คูณ หาร # โปรแกรม บวก ลบ คูณ หาร # MySQL บวก ลบ คูณ หาร # JavaScript บวก ลบ คูณ หาร # โปรแกรม เครื่องคิดเลข PHP # โปรแกรม คำนวณ PHP # โค้ด คํา น วณ PHP # PHP ตัวเลข # โค้ด คำนวณ html # โค้ด บวกเลข HTML # วิธี เขียนโค้ดเครื่องคิดเลข # โค้ดเครื่องคิดเลข java # โค้ดเครื่องคิดเลข c++ # โค้ดเครื่องคิดเลข python # html บวกเลข



โปรเจ็ค PHP Bootstrap Mysql +Modal ขั้นสูง