JQuery : ค่า Index ของ Checkbox

JQuery : ค่า Index ของ Checkbox


<input type="checkbox" name="checkbox[]">A
<input type="checkbox" name="checkbox[]">B
<input type="checkbox" name="checkbox[]">C
<input type="checkbox" name="checkbox[]">D
<input type="checkbox" name="checkbox[]">E
<input type="checkbox" name="checkbox[]">F
<input type="checkbox" name="checkbox[]">G



A B C D E F G

เราจะได้ ตามรูปเลย คราวนี้เราจะรู้ได้ยังไง ว่า checkbox ตัวไหนเป็น index อะไร
ตามตัวอย่างเลยนะครับ

<script type='text/javascript'>
   $(function(){
      $('input[name="checkbox[]"]').click(function(){
          var checkBoxIndex=$('input[name="checkbox[]"]').index($(this));
          alert(checkBoxIndex);
     });
   });
</script>

ยังไงก็ลองเอาไปประยุกต์ ใช้กับอย่างอื่นนะครับ


BY N1B

JQuery : get ค่า index ของ Tag option ใน Tag Select

JQuery : get ค่า index ของ Tag option ใน Tag Select


Ex
 <SELECT id="select">
   <OPTION value="">กรุณาเลือก</OPTION>
   <OPTION value="php">PHP</OPTION>
   <OPTION value="ajax">Ajax</OPTION>
   <OPTION value="java">Java</OPTION>
   <OPTION value="javascript">Javascript</OPTION>
   <OPTION value="jquery">JQuery</OPTION>
   <OPTION value="android">Android</OPTION>
 </SELECT>

<script type='text/javascript'>
$(function(
   $('#select').change(function(){
      //ใช้คำสั่ง selectedIndex ก็จะได้ หมายเลข Index ของแต่ ละ Option มานะครับ เริ่มจาก 0
      alert($(this).prop('selectedIndex'));
   });
));
</script>

ยังไงก็ลองเอาไปประยุกต์ใช้นะครับ



BY N1B

JQuery : วิธีการตรวจสอบว่าเราใช้ Browser อะไรอยู่

 JQuery : วิธีการตรวจสอบว่าเราใช้ Browser อะไรอยู่

   ตามตัวอย่างเลยนะครับ



$(function(){
//Firefox
if($.browser.mozilla){alert('Firefox');}
//Safari
else if($.browser.safari){alert('Safari');}
//Opera
else if($.browser.opera){alert('Opera');}
//IE
else if($.browser.msie){alert('IE');}

//Check
alert($.browser.version);
});


ลองเอาไปประยุกต์ใช้กันดูนะครับ


BY N1B

JQuery : การใส่ค่า Index ของ Object นั้นๆ

JQuery : การใส่ค่า Index ของ Object นั้นๆ ด้วย :eq


   ใน JQuery นั้นเวลาเราเลือก Elements เป็นแบบ Class หรือ Name[] (ที่เป็น Array) เราจะได้ค่ามาเป็น Array เพราะฉะนั้นถ้าเราต้องการกำระบุว่าเป็น Array ตัวไหนให้ทำดังนี้นะครับ


เช่น ถ้าเรามี Elements ดังนี้

//เรามี DIV ทั้งหมด 6 อัน ตามด้านล่างนี้ นะครับ
<div class="divBox">A1</div>
<div class="divBox">A2</div>
<div class="divBox">A3</div>
<div class="divBox">A4</div>
<div class="divBox">A5</div>
<div class="divBox">A6</div>

//เรากำหนดให้ .divBox เป็นดังนี้
/*
 background-color เป็น รหัสสี #0099FF
 ความสูง เป็น 25px
 ความกว้าง เป็น 100px
*/
$('.divBox').css({
 'background-color':'#0099FF'
 ,'height':'25px'
 ,'width':'100px'
});

แล้วคราวนี้ถ้าเราต้องการให้ A2,A3,A4,A5,A6 ความกว้างเป็น 90px,80px,70px,60px,50px ตามลำดับเราจะทำยังไง สำหรับคนที่ยังไม่รู้ ก็ลองดูตามนี้เลยครับผม
$('.divBox:eq(1)').css({'width':'90px'}); //DIV อันนี้จะเป็นของ A2
$('.divBox:eq(2)').css({'width':'80px'}); //DIV อันนี้จะเป็นของ A3
$('.divBox:eq(3)').css({'width':'70px'}); //DIV อันนี้จะเป็นของ A4
$('.divBox:eq(4)').css({'width':'60px'}); //DIV อันนี้จะเป็นของ A5
$('.divBox:eq(5)').css({'width':'50px'}); //DIV อันนี้จะเป็นของ A6


ลองเอาไปประยุกต์กับทางอื่นดูนะครับ
มีข้อสงสัยโพสถามได้เลยนะครับ


BY N1B

PHP : Tip การรวมค่าของ JSON สองค่าเข้าด้วยกัน

PHP : Tip การรวมค่าของ JSON สองค่าเข้าด้วยกัน

<?
   $bJSON1='{"firstName":"Natthapong"}'; //กำหนดค่าแบบ JSON ให้กับตัวแปร $bJSON1
   $bJSON2='{"lastName":"Charoenporndeengam"}'; //กำหนดค่าแบบ JSON ให้กับตัวแปร $bJSON1


   $bArr1=json_decode($bJSON1,true); //ถอดรหัส json ให้เป็น array  ต้องใส่ true ด้วยนะครับ
   $bArr2=json_decode($bJSON2,true); //ถอดรหัส json ให้เป็น array  ต้องใส่ true ด้วยนะครับ


   $arr=array_merge_recursive($bArr1,$bArr2); //อันนี้เป็นการรวม array 


   $bJSON=json_encode($arr); //เราก็เอา array ที่รวมมาเข้ารหัส json อีกครั้ง




  ผลลัพธ์
 {
   "firstName":"Natthapong"
  ,"lastName":"Charoenporndeengam"
 }




มีข้อสงสัยตรงไหน post ถามได้เลยนะครับ


BY N1B
?>

CSS : การใช้ DIV กับ z-index

z-index คืออะไร ง่ายๆ นะครับ คือการใช้จัดเรียง elementที่ซ้อนกันและต้องเป็น element ที่ถูกกำหนด position ไว้เท่านั้น
position ก็จะมี position:relative,position:absolute; เป็นต้น

เรามีดูตัวอย่างกันนะครับ


<style type='text/css'>
#box1,#box2,#box3{
background-color:#0099FF;
border:1px solid #000;
height:100px;
width:100px;
position:absolute;
z-index:3;
}
#box2{
background-color:#FF0099;
left:20px;
top:20px;
position:absolute;
z-index:1;
}
#box3{
background-color:#00FF99;
left:40px;
top:40px;
position:absolute;
z-index:4;
}
</style>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>


อธิบายนะครับ

1.กำหนด <div> ทั้งหมด 3 ตัว คือ div ทีมี ชื่อ box1,box2,box3 ตามลำดับ
2.สร้าง CSS ให้กับ div ทั้ง 3 ตัว โดยให้ค่าทั้ง 3 div เหมือนกัน ดังนี้
   -background color เป็น รหัส สี #0099FF
   -ขอบ ของ div เป็น ความหนา 1 px เป็น เส้นตรง (solid) สี เป็นสีดำ
   -ความสูง และ ความกว้าง 100px
   -position เป็น แบบ absolute คือ อ้างอิงตำแหน่งของ parent
   -กำหนด z-index คือ เหมือนตำแหน่งของ Layout อ่ะ ยิ่งตัวเลขยิ่ง มากก็จะอยู่บนสุด
3.กำหนด ค่า CSS ของ box2 ให้เป็นดังนี้
   -background color รหัสสี #FF0099
   -กำหนดให้ห่างจากขอบซ้ายและขอบด้านบน 20px 
   -position เป็น แบบ absolute คือ อ้างอิงตำแหน่งของ parent
   -กำหนด z-index คือ เหมือนตำแหน่งของ Layout อ่ะ ยิ่งตัวเลขยิ่ง มากก็จะอยู่บนสุด
4.กำหนด ค่า CSS ของ box3 ให้เป็นดังนี้
   -background color รหัสสี #00FF99
   -กำหนดให้ห่างจากขอบซ้ายและขอบด้านบน 40px 
   -position เป็น แบบ absolute คือ อ้างอิงตำแหน่งของ parent
   -กำหนด z-index คือ เหมือนตำแหน่งของ Layout อ่ะ ยิ่งตัวเลขยิ่ง มากก็จะอยู่บนสุด

CSS : เริ่มต้นกัับ CSS

Java : เริ่มต้นกับ Java

PHP Chapter 2 Software ที่ใช้ในการเขียน PHP

PHP Chapter 2 Software ที่ใช้ในการเขียน PHP


1.Notepad++ 
  - เอาไว้ใช้เขียน Source Code PHP หรือ Source Code อื่นๆ ด้วยก็ได้นะครับ
2.Appserv   
  -เป็นตัวจำลอง Server ซึ่งจะมี Apache,PHP,MySQL,PHPMyadmin มาให้เราครบเลย คราวนี้แล้วแต่ใครจะเลือกลงแบบไหนนะครับ
3.Heidi        
  -อันนี้ไว้จัดการฐานข้อมูลต้องติดตั้งไว้บนเครื่องคอมพิวเตอร์ของเรา
4.Adminer    
  -อันนี้ไว้จัดการฐานข้อมูล ทำงานผ่านหน้าเว็บ
5.MySQL   
  -เป็นฐานข้อมูล ที่ได้รับความนิยมสูงในการทำ Website
6.JQuery    
  -เป็น Script ที่เอาไว้ใ้ช้จัดการ Element ต่างๆ  เช่น <INPUT>,<SELECT>,<TEXTAREA> หรือ Element ตัวอื่นๆ ด้วย หรือ จะจัดการเกี่ยว CSS หรือ เราจะเขียน Plugin เพิ่มเติมเองก็ได้ หรือท่านจะหาดาวน์โหลดตาม Website ก็มีให้เลือกเยอะมากมายตามใจท่านเลย


BY N1B

Tool : HeidiSQL

HeidiSQL Website (http://www.heidisql.com)

เป็นช่วยจัดการฐานข้อมูล ที่ต้องติดตั้งลงบนเครื่องคอมพิวเตอร์ก่อน
ความสามารถพื้นฐานนั้นมีครบถ้วน แถมเป็น Freeware อีกต่างหาก

อันนี้เป็นภาพจากโปรแกรม โดยรวมนะครับ
ยังไงก็ลอง เอาไปใช้ดูนะครับ

Tool : Adminer

Adminer Website (http://www.adminer.org/)


เป็นตัวเองจัดการกับฐานข้อมูล ที่มีลักษณะคล้ายๆ PHP My Admin แต่ขนาดไฟล์ ต่างกัน 
- Adminer ขนาดไฟล์ ประมาณ 377 KB(0.377 MB)  
- PHP MyAdmin ประมาณ 3600 KB (3.6 MB)




อันนี้เป็นภาพของโปรแกรมนะครับ

ยังมีั Theme และ Plugin ให้เลือกใช้อีกด้วยครับ

ยังไงก็ลองใช้งานกันดูนะครับ
BY N1B

Tool : Notepad++

Notepad++ Website : (http://www.notepad-plus-plus.org/)
เป็นโปรแกรมช่วยแก้ไข Source Code ของภาษา ต่างๆ ไม่ว่าจะเป็น C,C++,Java,PHP หรือ อื่นๆ ซึ่งตัวโปรแกรมเป็นโปรแกรม แบบ Open Source GLP 


หน้าตาโปรแกรม ก็ประมาณนี้ นะครับ

มี Plugin ให้เลือกใช้มากมาย ยังไงก็ลองใช้งานดูนะครับ

BY N1B

MySQL : Tip(การใช้ Unknow Column ที่เกิดจากการ alias Column)

ตัวอย่าง
SELECT field AS fieldName FROM TableName WHERE fieldName='xxx'
จากเกิด Error ที่ fieldName เพราะ Table ไม่มี Field นี้

การแก้ปัญหาที่เกิดขึ้นคือ
SELECT * FROM (
SELECT field AS fieldName FROM TableName
) AS AliasName
WHERE fieldname='xxx'


การใช้ SELECT * FROM () ครอบเอาไว้เราก็จะสามารถใช้ Field ที่ Alias มาได้แล้ว


BY N1B

PHP:เริ่มต้นกับ PHP

เริ่มต้นกับ PHP Website (http://www.php.net) 
ทำไมต้อง PHP (PHP Hypertext Preprocessor ) 
      ตามความคิดของผมนั้น PHP เป็นภาษาหนึ่งที่ใช้ในการทำ Webpage ซึ่งโครงสร้างส่วนใหญ่ นั้นถูกอ้างอิงมาจากภาษาซีดังนั้น ถ้าใครมีความรู้พื้นฐานด้านภาษาซีนั้น ก็สามารถต่อยอดกับ PHP ได้อย่างง่ายด้าย
      PHP นั้นเป็นระบบเปิด (Open Source) จึงทำให้ PHP นั้นได้รับการพัฒนาและความนิยมสูง PHP เป็นภาษาแบบโครงสร้างและยังสนับสนุนการเขียนแบบเชิงวัตถุด้วย




BY N1B