Blog For Programmer.: 2012

Wednesday, November 7, 2012

jQuery : Sort Dropdown list items using jQuery

jQuery : Sort Dropdown list items using jQuery

Javascript
<script type='text/javascript'>
$(document).ready(function() {
    $('#btnSort').click(function(e) {
        $("#ddlList").html($('#ddlList option').sort(function(x, y) {
            return $(x).text() < $(y).text() ? -1 : 1;
        }))
        $("#ddlList").get(0).selectedIndex = 0;
        e.preventDefault();
    });

    $('#btnSortVal').click(function(e) {
        $("#ddlList").html($('#ddlList option').sort(function(x, y) {
            return $(x).val() < $(y).val() ? -1 : 1;
        }))
        $("#ddlList").get(0).selectedIndex = 0;
        e.preventDefault();
    });
});
</script>

HTML
<select id="ddlList">
<option value="3">Three</option>
<option value="1">One</option>
<option value="0">Zero</option>
<option value="2">Two</option>
<option value="8">Eight</option>
</select>
<br/><br/>
<input type="button" id="btnSort" Value=" Sort Dropdown By Text " />
<input type="button" id="btnSortVal" Value=" Sort Dropdown By Value " />

Monday, September 17, 2012

jQuery : การเรียกใช้ jQuery

หลังจากที่เรา Download file jquery มาแล้ว
จะได้ ไฟล์ ดูรูปนะครับ
ในที่นี้เป็น Version 1.8.1 นะครับ

ให้เราสร้าง ไฟล์ขึ้นมา 1 ไฟล์นะครับ ในที่นี้จะสร้าง ไฟล์ เป็น file1.html นะครับ


<meta charset='utf-8'>

<script type='text/javascript' src='jquery-1.8.1.min.js'></script>

<script type='text/javascript'>
$(function(){
alert('test');
});
</script>

หลังจากนั้นเราลองเรียกไฟล์ที่เราเขียนขึ้นนะครับ มันจะแสดง alert box ว่า test
แสดงว่าใช้งาน jQuery ได้แล้วครับ

อธิบายนะครับ
<meta charset='utf-8'>
-การ encode page นั้นๆ เป็น utf-8

<script type='text/javascript' src='jquery-1.8.1.min.js'></script>
-การเรียกใช้ jquery ไฟล์

-$(function(){}); หมายถึงเมื่อ page โหลดจะโหลดคำสั่งที่อยู่ภายใต้ {} โดยเราสามารถเขียน คำสั่งแบบ jquery หรือ javascript ได้เลย

ถ้าไม่เข้าใจตรงไหนสอบถามได้นะครับ

BY N1B

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

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

Website สำหรับ Download ตัว Framework

http://www.jquery.com/

ให้เรา Download มานะครับโดยกดที่ Download (jQuery);

จะได้เป็น .js มานะครับผม

บทต่อไปเราจะมารู้จักวิธีการใช้งานนะครับผม

BY N1B

Friday, September 14, 2012

PHP : Create font for my web.(มาสร้าง Font ใช้บน Website ของเรากัน)

มาสร้าง Font ใช้บน Website ของเรากัน

http://www.fontsquirrel.com/fontface/generator

หลังจากนั้นให้ สร้าง ไฟล์ ชื่ออะไรก็ได้ .html

แล้วใส่ code ดังนี้

body{

font-family: 'db_king84regular';

font-size:50px;

}

</style>

<body>

บทความดีๆ ยังมีอีกเยอะ ขอให้ติดตามกันต่อไปนะครับ

</body>

Result

BY N1B

PHP : Create Class INPUT TAG

class Input{

var $json;

var $prop;

var $attr;

function Input(){}

function setProp($json='',$oldJson=''){

$this->json=$json;

if($oldJson!=''){

$merge=array_merge(json_decode($oldJson,true),json_decode($this->json,true));

$this->json=json_encode($merge);

}

$this->prop=json_decode($this->json,true);

$this->attr='';

foreach($this->prop as $key1=>$value1){

$this->attr.=strtoupper($key1).'=';

if(is_array($value1)){

$style='';

foreach($value1 as $key=>$value){

$style.=$key.':'.$value.';';

}

$this->attr.='\''.$style.'\' ';

}

else{$this->attr.='\''.$value1.'\' ';}

}

function getProp(){return $this->json;}

function setVisible($boolean=true){return '<INPUT '.$this->attr.'/>';}

}

$txt=new Input();

$txt->setProp('{

"type":"password",

"name":"txtUsername",

"id":"txtUsername",

"style":{"height":"30px","font-weight":"bold","border":"1px solid #0099FF"}

}');

print $txt->setVisible(true);

Result

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

BY N1B

Tuesday, August 28, 2012

PHP : Convert Array To String(การแปลงจากตัวแปรชุดเป็นข้อความ)

PHP : Convert Array To String(การแปลงจากตัวแปรชุดเป็นข้อความ)

<?
$arr=array('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
$str=implode(',',$arr);
print $str;

?>

Result (ผลลัพธ์)
A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z

BY N1B

Monday, August 27, 2012

JQuery : Multiple jQuery Get Scripts

/* enhance $.getSctipt to handle mutiple scripts */
var getScript = jQuery.getScript;
jQuery.getScript = function( resources, callback ) {

var // reference declaration & localization
length = resources.length,
handler = function() { counter++; },
deferreds = [],
counter = 0,
idx = 0;

for ( ; idx < length; idx++ ) {
deferreds.push(
getScript( resources[ idx ], handler )
);
}

jQuery.when.apply( null, deferreds ).then(function() {
callback && callback();
});
};

$.getScript(['script1.js','script2.js','script3.js'], function() {
//do something after all scripts have loaded
});

//or seperate into an array to include

var scripts = ['script1.js','script2.js','script3.js'];
$.getScript(scripts, function(data, textStatus) {
//do something after all scripts have loaded
});

Tuesday, August 21, 2012

PHP : Get Client IP

ฟังชั่นนี้เป็นการแสดงค่า IP ของเครื่องคอมพิวเตอร์ที่ เข้ามาดูเว็บเรานะครับ

function getClientIP(){
if(!empty($_SERVER['HTTP_CLIENT_IP'])){
$ip=$_SERVER['HTTP_CLIENT_IP'];
}
else if(!empty($_SERVER['HTTP_X_FORWARDED_FOR'])){
$ip=$_SERVER['HTTP_X_FORWARDED_FOR'];
}
else {
$ip=$_SERVER['REMOTE_ADDR'];
}
return $ip;
}

print getClientIP();

BY N1B

Thursday, July 26, 2012

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

Monday, July 23, 2012

Thursday, July 19, 2012

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

Monday, July 16, 2012

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

Friday, July 13, 2012

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
?>

Wednesday, July 11, 2012

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

Tuesday, July 10, 2012

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

Monday, July 9, 2012

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

Thursday, July 5, 2012

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

Blog For Programmer.

Wednesday, November 7, 2012

jQuery : Sort Dropdown list items using jQuery

Monday, September 17, 2012

jQuery : การเรียกใช้ jQuery

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

Friday, September 14, 2012

PHP : Create font for my web.(มาสร้าง Font ใช้บน Website ของเรากัน)

PHP : Create Class INPUT TAG

Tuesday, August 28, 2012

PHP : Convert Array To String(การแปลงจากตัวแปรชุดเป็นข้อความ)

Monday, August 27, 2012

JQuery : Multiple jQuery Get Scripts

Tuesday, August 21, 2012

PHP : Get Client IP

Thursday, July 26, 2012

JQuery : ค่า Index ของ Checkbox

Monday, July 23, 2012

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

Thursday, July 19, 2012

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

Monday, July 16, 2012

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

Friday, July 13, 2012

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

Wednesday, July 11, 2012

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

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

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

Tuesday, July 10, 2012

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

Monday, July 9, 2012

Tool : HeidiSQL

Tool : Adminer

Tool : Notepad++

Thursday, July 5, 2012

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

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

Labels

About Me