การทำตารางให้สามารถเรียงลำดับได้ โดยคลิกที่ชื่อหัวตาราง
โค้ด
อันนี้ไฟล์ sorttable.js
โค้ด
อันนี้ไฟล์ sorttable.js
 |
 |
 |
 |
 |
 |
8 มี.ค. 2555
การเขียน function เพื่อใช้ในการคำนวณ
ในบทความนี้เป็นการในโค้ด php เพื่อช่วยในการคำนวณ เพียงแค่กรอกข้อมูลให้ครบแล้วกดตกลง ระบบก็จะคำนวณให้เสร็จเรียบร้อย ในตัวอย่างนี้เป็นการคำนวณเงินกู้นะครับ ซึ่งสามารถนำไปประยุกต์ใช้ในกรณีอื่น ๆ ได้อีก
โค้ด
<meta http-equiv="Content-Type" content="text/html; charset=TIS-620">
<form name="cal" method="post" action="cal.php">
<table width="0" border="0">
<tr>
<td> </td>
<td colspan="2"><h2>ตารางคำนวนเงินกู้</h2></td>
</tr>
<tr>
<td width="170">จำนวนเงินกู้ :</td>
<td width="269" colspan="2"><input type="text" name="totalloan" id="totalloan"></td>
</tr>
<tr>
<td>อัตราดอกเบี้ยต่อปี :</td>
<td colspan="2"><input type="text" name="interest" id="interest"></td>
</tr>
<tr>
<td>จำนวนงวด :</td>
<td colspan="2"><input type="text" name="month" id="month"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" id="submit" value="คำนวน"></td>
<td>
<input type="reset" name="reset" id="reset" value="ล้าง Form">
</td>
</tr>
</table>
</form>
<?php
function calloan($totalloan,$interest,$month){
if ($month>12)
{
$calinterest = ($month / 12)*$interest;
$totalinterest = $calinterest /"100";
}
else
{
$totalinterest = $interest / "100";
}
$amount_interest = $totalloan * $totalinterest;
$amount = ($totalloan + $amount_interest)/$month;
print "<b>จำนวนเงินที่ต้องชำระต่อเดือน :<font color=#0066FF> " .round($amount,2)."</font> บาท</b>";
print "<br><br><a href ='cal.php'>Click เพื่อเริ่มต้นใหม่</a>";
}
$totalloan = $_POST["totalloan"];
$interest = $_POST["interest"];
$month = $_POST["month"];
if($_POST["submit"]){
if($totalloan && $interest && $month){
print calloan($totalloan,$interest,$month);
}
else{
print "กรุณากรอก Form ให้ครบ";
}
}
else
{
}
?>
Read more >>
โค้ด
<meta http-equiv="Content-Type" content="text/html; charset=TIS-620">
<form name="cal" method="post" action="cal.php">
<table width="0" border="0">
<tr>
<td> </td>
<td colspan="2"><h2>ตารางคำนวนเงินกู้</h2></td>
</tr>
<tr>
<td width="170">จำนวนเงินกู้ :</td>
<td width="269" colspan="2"><input type="text" name="totalloan" id="totalloan"></td>
</tr>
<tr>
<td>อัตราดอกเบี้ยต่อปี :</td>
<td colspan="2"><input type="text" name="interest" id="interest"></td>
</tr>
<tr>
<td>จำนวนงวด :</td>
<td colspan="2"><input type="text" name="month" id="month"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" id="submit" value="คำนวน"></td>
<td>
<input type="reset" name="reset" id="reset" value="ล้าง Form">
</td>
</tr>
</table>
</form>
<?php
function calloan($totalloan,$interest,$month){
if ($month>12)
{
$calinterest = ($month / 12)*$interest;
$totalinterest = $calinterest /"100";
}
else
{
$totalinterest = $interest / "100";
}
$amount_interest = $totalloan * $totalinterest;
$amount = ($totalloan + $amount_interest)/$month;
print "<b>จำนวนเงินที่ต้องชำระต่อเดือน :<font color=#0066FF> " .round($amount,2)."</font> บาท</b>";
print "<br><br><a href ='cal.php'>Click เพื่อเริ่มต้นใหม่</a>";
}
$totalloan = $_POST["totalloan"];
$interest = $_POST["interest"];
$month = $_POST["month"];
if($_POST["submit"]){
if($totalloan && $interest && $month){
print calloan($totalloan,$interest,$month);
}
else{
print "กรุณากรอก Form ให้ครบ";
}
}
else
{
}
?>
การกำหนดความกว้างของ div
เป็นการกำหนดความกว้างของ div พร้อมขึ้นบรรทัดของข้อความใหม่
โค้ด
<style type="text/css">
.word-wrap {
word-wrap: break-word;
}
</style>
<div style="width:300px;" class="word-wrap">เพื่อให้กระทู้ของคุณถูกจัดอันดับการแสดงผลในอันดับต้นๆและได้คำตอบอย่างรวดเร็วกรุณาLoginก่อนตั้งกระทู้</div>
Read more >>
โค้ด
<style type="text/css">
.word-wrap {
word-wrap: break-word;
}
</style>
<div style="width:300px;" class="word-wrap">เพื่อให้กระทู้ของคุณถูกจัดอันดับการแสดงผลในอันดับต้นๆและได้คำตอบอย่างรวดเร็วกรุณาLoginก่อนตั้งกระทู้</div>
การกรอกฟอร์มแล้วมี % ความสำเร็จ
เมื่อเรากรอกข้อมูลช่องใดเสร็จก็จะบอก % การกรอกเสร็จ ต้องกรอกจนครบ 100% จึงจะกดปุ่ม submit ได้
โค้ด
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Percent Completion Meter</title>
<style type="text/css">
#container {position:relative; width:990px; margin:0 auto;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$.fn.percentComplete = function(selector, color, size, button){
return this.each(function(){
var fieldCount = $(selector).length;
var completeCount = $(selector+'[value != ""][value != "select"]').length;
var percentComplete = Math.round((completeCount / fieldCount) * 100);
$(this).empty().append(percentComplete + "% Complete<br><div><div> </div></div>").children("div").css({"width": size, "border": "1px solid"+color}).children("div").css({"width": percentComplete+"%", "background-color":color});
if(percentComplete == '100'){
$(button).attr('disabled',false);
}else{
$(button).attr('disabled',true);
}
});
};
})(jQuery);
$("document").ready(function(){
$("#submit").attr('disabled',true);
$("#completion_meter").percentComplete(".required", "#000000", "200px", "#submit");
$(":input").blur(function(){
$("#completion_meter").percentComplete(".required", "#000000", "200px", "#submit");
});
});
</script>
</head>
<body>
<div id="container">
<br><br>
<div id="completion_meter"></div>
<br><br>
<form>
<div>First Name: <input class="required" id="first_name" name="first_name" type="text" value=""/></div>
<div>Last Name: <input class="required" id="last_name" name="first_name" type="text" value=""/></div>
<div>Email: <input class="required" id="email" name="email" type="text" value="" /></div>
<div>Birthday: <input class="required" id="Birthday" name="birthday" type="text" value="" /></div>
<div>Address: <input class="required" id="address" name="address" type="text" value="" /></div>
<div>Do you like Tech Crunch: <select class="required" id="tech_crunch"><option value="select">select</option><option value="yes">yes</option><option value="no">no</option></select></div>
<div>Description:<br><textarea rows="6" cols="40" class="required" name="description" id="description"></textarea></div>
<input type="submit" name="submit" id="submit" value="submit" />
</form>
</div>
</body>
</html>
Read more >>
โค้ด
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Percent Completion Meter</title>
<style type="text/css">
#container {position:relative; width:990px; margin:0 auto;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$.fn.percentComplete = function(selector, color, size, button){
return this.each(function(){
var fieldCount = $(selector).length;
var completeCount = $(selector+'[value != ""][value != "select"]').length;
var percentComplete = Math.round((completeCount / fieldCount) * 100);
$(this).empty().append(percentComplete + "% Complete<br><div><div> </div></div>").children("div").css({"width": size, "border": "1px solid"+color}).children("div").css({"width": percentComplete+"%", "background-color":color});
if(percentComplete == '100'){
$(button).attr('disabled',false);
}else{
$(button).attr('disabled',true);
}
});
};
})(jQuery);
$("document").ready(function(){
$("#submit").attr('disabled',true);
$("#completion_meter").percentComplete(".required", "#000000", "200px", "#submit");
$(":input").blur(function(){
$("#completion_meter").percentComplete(".required", "#000000", "200px", "#submit");
});
});
</script>
</head>
<body>
<div id="container">
<br><br>
<div id="completion_meter"></div>
<br><br>
<form>
<div>First Name: <input class="required" id="first_name" name="first_name" type="text" value=""/></div>
<div>Last Name: <input class="required" id="last_name" name="first_name" type="text" value=""/></div>
<div>Email: <input class="required" id="email" name="email" type="text" value="" /></div>
<div>Birthday: <input class="required" id="Birthday" name="birthday" type="text" value="" /></div>
<div>Address: <input class="required" id="address" name="address" type="text" value="" /></div>
<div>Do you like Tech Crunch: <select class="required" id="tech_crunch"><option value="select">select</option><option value="yes">yes</option><option value="no">no</option></select></div>
<div>Description:<br><textarea rows="6" cols="40" class="required" name="description" id="description"></textarea></div>
<input type="submit" name="submit" id="submit" value="submit" />
</form>
</div>
</body>
</html>
การเข้ารหัสตัวแปรในการส่งและรับค่า
ในภาษา php จะมีการส่งค่า และรับค่า ซึ่งบางครั้งเราไม่ต้องการให้คนอื่นเห็นค่าที่เราส่ง ในภาษา php จะมีคำสั่งอยู่ตัวหนึ่งให้เราเข้ารหัสค่าที่เราจะส่งก่อน เมื่อส่งแล้วในหน้าที่รับค่าก็จะต้องถอดรหัสก่อนถึงเราจะเห็นค่าที่เราส่งมา ดูโค้ดด้านล่างนี้เลยครับ
ตัวอย่าง
$id = "abc123456"
$id_encode = base64_encode($id);//เข้ารหัส
echo "<a href='page2.php?id=$id_encode'>";
หน้า page2.php
$id = base64_decode($_GET[id]);//ถอดรหัส
echo $id;
Read more >>
ตัวอย่าง
$id = "abc123456"
$id_encode = base64_encode($id);//เข้ารหัส
echo "<a href='page2.php?id=$id_encode'>";
หน้า page2.php
$id = base64_decode($_GET[id]);//ถอดรหัส
echo $id;
ปิด pop up แล้วจะ refresh หน้าหลัก
สามารถนำไปประยุกต์ใช้ เช่น เมื่อหน้าหลักเรามีข้อมูลที่ต้องการแก้ไข เราก็ทำปุ่มที่เมื่อคลิกแล้วเรียก pop up ที่เป็นฟอร์มสำหรับแก้ไขข้อมูลขึ้นมา ซึ่งถ้าเราแก้ไขข้อมูลเรียบร้อยแล้วกดปุ่มปิดหน้า pop up ก็จะปิดลง พร้อมกับ refresh หน้าหลักทันที โดยที่เราไม่ต้องไปกดปุ่ม refresh เอง
โค้ดหน้าหลัก
<form name="form1">
<input type="Button" value="Pop up window" name="button" onclick="window.open('popup.html','','top=0')">
</form>
โค้ดหน้า pop up
<script language="JavaScript">
<!--
function closewin() {
window.opener.location.reload();
window.opener.form1.button.value="refresh ready";
self.close();
}
</script>
<input type="button" value="Close" onclick="closewin();">
Read more >>
โค้ดหน้าหลัก
<form name="form1">
<input type="Button" value="Pop up window" name="button" onclick="window.open('popup.html','','top=0')">
</form>
โค้ดหน้า pop up
<script language="JavaScript">
<!--
function closewin() {
window.opener.location.reload();
window.opener.form1.button.value="refresh ready";
self.close();
}
</script>
<input type="button" value="Close" onclick="closewin();">
6 มี.ค. 2555
การตรึงแนวห้วตาราง
เนื่องจากการทำข้อมูลให้แสดงในหน้ารายงานหากข้อมูลมีจำนวนมากเมื่อเราเลื่อนหน้าจอเพื่อดูข้อมูลด่านล่างเราก็จะไม่เห็นว่าข้อมูลที่เราดูเป็นข้อมูลอะไรเพราะเราจะไม่เห็นชื่อของหัวตาราง ทำให้ผมจำเป็นต้องพึ่ง google หาอยู่พักใหญ่ ค้นทั้ง โค้ด php, css และอื่น ๆ ก็เลยเจอโค้ดด่านล่างซึ่งสามารถนำไปใช้ได้ทั้งภาษา html และ ภาษา php ซึ่งทำให้พอเลื่อนดูข้อมูลแล้วห้วตารางก็จะเลื่อนตาม
Read more >>
สมัครสมาชิก:
บทความ (Atom)