code CSS java PHP html SQL: กันยายน 2021

วันศุกร์ที่ 17 กันยายน พ.ศ. 2564

Code PHP ในการสร้างโปรแกรมเครื่องคิดเลข

<?php

<table border="2" width="200" cellspacing="0" cellpadding="0"  bgcolor="#0000FF"
style="border-color:black" onClick="previouskey=event.srcElement.innerText">
  <tr>
    <td width="100%" bgcolor="#FFFFFF" id="result"
    style="font:bold 20px Verdana;color:black;text-align='right'">0</td>
  </tr>
  <tr>
    <td width="100%" valign="middle" align="center"><table border="0" width="100%"
    cellspacing="0" cellpadding="0" style="font:bold 20px Verdana;color:white">
      <tr>
        <td width="80%" align="center"><table border="1" width="100%" cellspacing="0"
        cellpadding="0" style="cursor:hand;font:bold 20px Verdana;color:white"
        onMouseover="if (event.srcElement.tagName=='TD')event.srcElement.style.color='yellow'"
        onMouseout="event.srcElement.style.color='white'" onselectStart="return false"
        onClick="calculate()" height="82">
          <tr>
            <td width="25%" align="center" height="17">7</td>
            <td width="25%" align="center" height="17">8</td>
            <td width="25%" align="center" height="17">9</td>
            <td width="25%" align="center" height="17">/</td>
          </tr>
          <tr>
            <td width="25%" align="center" height="19">4</td>
            <td width="25%" align="center" height="19">5</td>
            <td width="25%" align="center" height="19">6</td>
            <td width="25%" align="center" height="19">*</td>
          </tr>
          <tr>
            <td width="25%" align="center" height="19">1</td>
            <td width="25%" align="center" height="19">2</td>
            <td width="25%" align="center" height="19">3</td>
            <td width="25%" align="center" height="19">-</td>
          </tr>
          <tr>
            <td width="25%" align="center" height="19">0</td>
            <td width="25%" align="center" height="19"
            onClick="pn();previouskey=1;event.cancelBubble=true">+/-</td>
            <td width="25%" align="center" height="19">.</td>
            <td width="25%" align="center" height="19">+</td>
          </tr>
        </table>
        </td>
        <td width="20%"><div align="left"><table border="1" width="100%" cellspacing="0"
        cellpadding="0">
          <tr>
            <td width="100%" style="cursor:hand;font:bold 20px Verdana;color:white;text-align:center"
            onClick="result.innerText=0;results=''">C</td>
          </tr>
        </table>
        </div><div align="left"><table border="1" width="100%" cellspacing="0" cellpadding="0"
        height="81">
          <tr>
            <td width="100%" style="cursor:hand;font:bold 32px Verdana;color:white;text-align:center"
            onMouseover="event.srcElement.style.color='yellow'"
            onMouseout="event.srcElement.style.color='white'" onClick="calculateresult()">=</td>
          </tr>
        </table>
        </div></td>
      </tr>
    </table>
    </td>
  </tr>
</table>


<script language="JavaScript1.2">

/*
DHTML Calculator Script- 
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

var results=''
var previouskey=''
var re=/(\/|\*|\+|-)/
var re2=/(\/|\*|\+|-){2}$/
var re3=/.+(\/|\*|\+|-).+/
var re4=/\d|\./
var re5=/^[^\/\*\+].+\d$/
var re6=/\./

function calculate(){
if (event.srcElement.tagName=="TD"){
if (event.srcElement.innerText.match(re4)&&previouskey=="=")
results=''
if (result.innerText.match(re3)&&event.srcElement.innerText.match(re)){
if (!results.match(re5)){
result.innerText="Error!"
return
}
results=eval(results)
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12)
result.innerText=results
}

results+=event.srcElement.innerText
if (results.match(re2))
results=results.substring(0,results.length-2)+results.charAt(results.length-1)

result.innerText=results
}
}

function calculateresult(){
if (!results.match(re5)){
result.innerText="Error!"
return
}
results=eval(results)
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12)
result.innerText=results
}



function pn(){
if (result.innerText.charAt(0)!='-')
result.innerText=results='-'+result.innerText
else if (result.innerText.charAt(0)=='-')
result.innerText=results=result.innerText*(-1)
}

</script>

?>

ติดอันดับการสืบค้น

หากคุณต้องการทำให้เว็บของคุณ อยู่ในกลุ่มของการค้นหาข้อมูลจากผู้ให้บริการสืบค้นข้อมูลอัตโนมัติ (Search Engine) อย่าลืมกำหนด Title ของเอกสารเว็บนั้นๆ โดยควรเป็นข้อความภาษาอังกฤษ มีความหมายกระชับถึงเรื่องที่นำเสนอ แต่มีความยาวไม่เกิน 64 ตัวอักษร (ปัจจุบันสามารถใช้ภาษาไทยได้ แต่แนะนำให้ใช้ร่วมกัน หรือผสมกัน) ซึ่งข้อความในส่วนนี้จะปรากฏในส่วนบนสุดของหน้าต่างเบราเซอร์ (Title Bar)

<HEAD>
<TITLE>webthaidd</TITLE>
</HEAD>

นอกจากนี้ สามารถกำหนดค่าเพิ่มเติมเกี่ยวกับคำสำคัญ หรือ Keyword ของเอกสารเว็บ เพื่อช่วยให้การสืบค้น ได้ผลดีขึ้น อาศัยแท็กคำสั่ง

ซึ่งกำหนดแท็กนี้ในส่วน Head Section ของเอกสารเว็บ

ตัวอย่างการลงรหัสเพื่อกำหนด TITLE และ META Tag

<HEAD>
<TITLE>webthaidd</TITLE>
<META NAME="Keywords" CONTENT="Introduction, HTML, HyperText Markup Language">
</HEAD>

ทั้งนี้ยังมีแท็ก Meta อีก 2 รูปแบบที่ควรนำมาประกอบด้วย คือ

<META NAME="Description" CONTENT="ข้อความอธิบายเว็บไซต์"> และ

โดย Description จะเป็นการใส่คำอธิบายให้กับเว็บไซต์ และ Robots เป็นการบอกให้กับ Spider หรือ Robot (โปรแกรมของ Search Engine ที่ทำหน้าที่ค้นหาข้อมูลของเว็บไซต์ต่างๆ) ว่าควรจัดการหน้าเว็บต่างๆ ในเว็บไซต์อย่างไร เช่น ถ้าต้องการให้เก็บข้อมูลทุกหน้า ก็กำหนด Contect="All" หรือไม่ต้องการให้เก็บข้อมูลหน้าใด ก็กำหนด Contect="noindex" หรือให้เก็บเฉพาะหน้าที่ระบุ ไม่ต้องเก็บหน้าอื่นๆ ก็ใช้ Contect="NoFollow" เป็นต้น อย่างไรก็ตามแท็กชุดนี้ไม่ใช่แท็กมาตรฐาน ดังนั้นผู้พัฒนาเว็บ ควรให้ความสำคัญของ Title มากที่สุด

<HEAD>
<TITLE>webthaidd</TITLE>
<META NAME="Keywords" CONTENT="Introduction, HTML, HyperText Markup Language">
<META NAME="Description" CONTENT="Introduction to HTML and Web Design for All">
<META NAME="Robots" CONTENT="All">
</HEAD>

นอกจากแท็กที่ได้แนะนำ ก็กำหนดข้อความอธิบายรูปภาพด้วย Attribute ALT ของแท็ก IMG ก็เป็นจุดที่น่าสนใจ โดย Spider บาง Search Engine จะสนใจคำอธิบายชุดนี้ด้วยเช่นกัน อย่างไรก็ตาม คำอธิบายชุดนี้ก็มีประโยชน์มาก สำหรับคนพิการทางสายตา เพราะสามารถรู้ความหมายของรูปภาพที่มองไม่เห็นได้จากคำอธิบาย ที่อ่านด้วยเบราเซอร์ เฉพาะของคนพิการทางตา ดังนั้นผู้พัฒนา ควรให้ความสำคัญของการใส่คำอธิบายรูปภาพกับรูปภาพทุกภาพด้วย

ข้อมูลจาก http://www.nectec.or.th

การใช้ PHP ทำเครื่องคิดเลขอย่างง่าย

1. สร้าง From ขึ้นมาก่อน ฟอร์ม ที่เีีราต้องากาขึ้นมาซึ่งประกอบด้วย Text Field 2 อันหน้าและหลีง และมี List/menu อยู่ตรงกลาง และ Button เพื่อการ ส่งค่า

2. ใส่ เครื่องหมายทางคณิตศาสตร์ ใน List/menu

3. จากนั้นอย่าืลืมกำหนด action ให้ ฟอร์ม ด้วยละครับ ตย. ของผมกำหนดให้ไปที่ calcu.php method="post"(ผมทำเครื่องคิดเลขแบบแสดงผลในหนาเดียว นะครับ เพราะ ฉะนั้น หน้านี้จึงมี ชื่อว่าcalcu.php เช่นกัน)

4. จากนั้นกำหนดชื่อ ของ Text Field 2 ทั้ง 2 อัน และ List/menu โดย Text Field อันแรก ผมให้ใช้ชื่อว่า num 1 และ Text Field อันที่ 2 ก็ชื่อให้ชื่อ num 2 List/menu ให้ชื่อว่า operator

รูปแบบนี้ถ้าเขียนโดยไม่ใช้ ตัวช่วยของ Dreamweaver ก็จะได้ว่า

จากนั้นเิริ่ม เปิด แท็ก php ได้เลยครับ

<?
}
$num1 = $_POST['num1'];         //รับ num 1 แบบ post
$operator = $_POST['operator']; //รับ   operator แบบ post
$num2 = $_POST['num2'];       //รับ num 1 แบบ post
}
?>

พิมพ์ ข้่อความ ด้านบน นี้เพื่อ การ รับ ข้อมูลตัวแปล

จากนั้นนำ ข้อมูลตัวแปล นั้นมา ใช้ งานด้วยการ นำ code ต่อจากนี้ ไปวางในล่าง (แต่ยังอยู่ใน ปีกกา เปิดปีด นะครับ)

if($operator == "+")  // ถ้า operator คือ +
echo "$num1 + $num2 = ".($num1+$num2); // แสดงผล num1 + num2
elseif($operator == "-")      // แสดง ผล คำตอบ     ถ้า เป็น -
echo "$num1 - $num2 = ".($num1-$num2);  // แสดงผล num1 - num2
elseif($operator == "*")   // แสดง ผล คำตอบ     ถ้า เป็น *
echo "$num1 * $num2 = ".($num1*$num2); // แสดงผล num1 - num2
elseif($operator == "/")  // แสดง ผล คำตอบ     ถ้า เป็น /
echo "$num1 / $num2 = ".($num1/$num2); // แสดง ผล คำตอบ

รูปแบบ Code ทั้งหมด

<form name="form1" method="post" action="calcu.php">
<input type="text" name="num1">
<select name="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" name="num2">
<input type="submit" name="Submit" value="Submit">
</form>
<?
{
$num1 = $_POST['num1'];
$operator = $_POST['operator'];
$num2 = $_POST['num2'];

if($operator == "+")
echo "$num1 + $num2 = ".($num1+$num2);
elseif($operator == "-")
echo "$num1 - $num2 = ".($num1-$num2);
elseif($operator == "*")
echo "$num1 * $num2 = ".($num1*$num2);
elseif($operator == "/")
echo "$num1 / $num2 = ".($num1/$num2);
}