บทความ PHP AJAX CSS Javascript MySql jQuery

ประยุกต์ แปลเนื้อหา ในเว็บไซต์ด้วย google translater api สำหรับ php

Tue, 02 Mar 2010 16:34:53 +0700

ดาวน์โหลด

http://www.ninenik.com/download/gTranslate.rar

ประกอบด้วยไฟล์

1.example.php ไฟล์ตัวอย่างรวม

2.example_curl.php ไฟล์การใช้งานผ่านฟังก์ชัน curl

3.Gtranslate.php ไฟล์ class สำหรับเรียกใช้งาน

4.languages.ini ไฟล์ภาษาสำหรับการสนับสนุนหลายภาษา

การแปลงภาษาไทยเป็นอังกฤษใช้ th_to_en

และภาษาอังกฤษเป็นไทยใช้ en_to_th

กรณ๊อื่นๆ ใช้ตัวย่อตามภาษาที่ต้องการ

สร้างฟังก์ชัน สำหรับนำไปประยุกต์ใช้

setRequestType('curl');
	echo $gt->th_to_en($str); // ไทยเป็นอังกฤษ หากอังกฤษเป็นไทยกำหนดเป็น en_to_th

} catch (GTranslateException $ge)
 {
    echo $ge->getMessage();
 }
}
?>

ตัวอย่างการเรียกใช้งาน

เทคนิค สร้าง effect add to cart ด้วย jQuery อย่างง่าย

Wed, 24 Feb 2010 10:30:51 +0700

ตัวอย่างต่อไปนี้เป็นแนวทางสำหรับนำไปปรับใช้ ในการทำระบบ add to cart ด้วย ajax

ตัวอย่าง

HTML Code

jQuery Code

สร้าง Horizontal Accordion แนวนอน ด้วย jQuery อย่างง่าย

Fri, 19 Feb 2010 09:34:01 +0700

ตัวอย่าง

CSS ตัวอย่าง

HTML Code ตัวอย่าง

jQuery Code ตัวอย่าง

ประยุกต์ สร้าง FTP Function สำหรับการจัดการไฟล์ผ่าน FTP Protocal

Wed, 10 Feb 2010 02:28:08 +0700

สร้างไฟล์ php สำหรับ ftp function บันทึกเป็น config_ftp.php ไว้เรียกใช้

=3){
			ftp_chdir($conn_id,$fullPath);		
			foreach($contents as $key=>$value){
				if(!is_dir(basename($value))){
					ftp_site($conn_id, 'CHMOD 0777 '.$value);
					ftp_delete($conn_id,$value);
				}
			}
			ftp_chdir($conn_id,$parentDir);		
			if(ftp_rmdir($conn_id,$nameDir)) {    
				return true;   
			}else{   
				if(ftp_site($conn_id, 'CHMOD 0777 '.$fullPath)){       
					if(ftp_rmdir($conn_id,$nameDir)) {    
						return true;   
					}else{   
						return false;    
					}   
				}else{   
					return false;    
				}          
			}      	
		}else{
			if(ftp_rmdir($conn_id,$nameDir)) {    
				return true;   
			}else{   
				if(ftp_site($conn_id, 'CHMOD 0777 '.$fullPath)){       
					if(ftp_rmdir($conn_id,$nameDir)) {    
						return true;   
					}else{   
						return false;    
					}   
				}else{   
					return false;    
				}          
			}      		
		}
    }      
}   
  
// ฟังก์ชันสำหรับเปลี่ยนชื่อ Directory หรือ Folder   
function ftpRenameDir($conn_id,$parentDir,$nameDir,$newNameDir){         
    $fullPath=$parentDir.$nameDir;    
	$isDir=ftp_chdir($conn_id,$fullPath);
    ftp_chdir($conn_id,$parentDir);    
    if($isDir){   
        if(ftp_rename($conn_id,$nameDir,$newNameDir)) {    
            return true;   
        }else{   
            if(ftp_site($conn_id, 'CHMOD 0777 '.$fullPath)){       
                if(ftp_rename($conn_id,$nameDir,$newNameDir)) {    
                    return true;   
                }else{   
                    return false;    
                }   
            }else{   
                return false;    
            }          
        }      
    }      
}   
    

// ฟังก์ชันสำหรับกำหนด permissions     ไฟล์    
function ftpChmodFile($conn_id, $permissions,$parentDir,$nameDir,$fileName){           
	$fullPath=$parentDir.$nameDir;    
    $fullPathFile=$parentDir.$nameDir."/".$fileName;    
	$isDir=ftp_chdir($conn_id,$fullPath);
    if($isDir){   
        if(ftp_site($conn_id, 'CHMOD '.$permissions.' '.$fullPathFile) !== false){         
            return true;         
        }else{      
            return false;         
        }          
    }           
}     	

// ฟังก์ชันสำหรับเปลี่ยนชื่อ ไฟล์ 
function ftpRenameFile($conn_id,$parentDir,$nameDir,$fileName,$new_fileName){         
    $fullPath=$parentDir.$nameDir;    
	$fullPathFile=$parentDir.$nameDir."/".$fileName;    
	$isDir=ftp_chdir($conn_id,$fullPath);
    if($isDir){   
        if(ftp_rename($conn_id,$fileName,$new_fileName)) {    
            return true;   
        }else{   
            if(ftp_site($conn_id, 'CHMOD 0777 '.$fullPathFile)){       
                if(ftp_rename($conn_id,$fileName,$new_fileName)) {    
                    return true;   
                }else{   
                    return false;    
                }   
            }else{   
                return false;    
            }          
        }      
    }      
}   	

// ฟังก์ชันสำหรับหาขนาดไฟล์
function ftpFileSize($conn_id,$parentDir,$nameDir,$fileName){         
    $fullPath=$parentDir.$nameDir;    
	$fullPathFile=$parentDir.$nameDir."/".$fileName;    
	$isDir=ftp_chdir($conn_id,$fullPath);
    if($isDir){   
        if(ftp_size($conn_id,$fileName)!=-1) {    
            return ftp_size($conn_id,$fileName);
        }else{   
			return  false;
        }      
    }      
}   	
	
// ฟังก์ชันสำหรับหา ว่ามีไฟล์ชื่อนี้หรือไม่
function ftpIsFile($conn_id,$parentDir,$nameDir,$fileName){         
    $fullPath=$parentDir.$nameDir;    
	$fullPathFile=$parentDir.$nameDir."/".$fileName;    
	$isDir=ftp_chdir($conn_id,$fullPath);
    if($isDir){   
        if(ftp_size($conn_id,$fileName)!=-1) {    
            return true;
        }else{   
			return  false;
        }      
    }      
}  	
	
// ฟังก์ชันสำหรับอัพโหลดไฟล์
function ftpUploadFile($conn_id,$parentDir,$nameDir,$fileName,$uploadFile){         
    $fullPath=$parentDir.$nameDir;    
	$fullPathFile=$parentDir.$nameDir."/".$fileName;    
	$isDir=ftp_chdir($conn_id,$fullPath);
    if($isDir){   
		if(ftp_put($conn_id, $fileName,$uploadFile,FTP_ASCII)){
			if(ftp_site($conn_id, 'CHMOD 0777 '.$fullPathFile)){
				return true;
			}else{
				return false;
			}			
		}else{
			return false;
		}
    }      
}   		
	
// ฟังก์ชันสำหรับลบ ไฟล์
function ftpRemoveFile($conn_id,$parentDir,$nameDir,$fileName){         
    $fullPath=$parentDir.$nameDir;    
	$fullPathFile=$parentDir.$nameDir."/".$fileName;    
	$isDir=ftp_chdir($conn_id,$fullPath);
    if($isDir){   
		if(ftp_delete($conn_id,$fileName)){
			return true;
		}else{
           if(ftp_site($conn_id, 'CHMOD 0777 '.$fullPathFile)){       
                if(ftp_delete($conn_id,$fileName)) {    
                    return true;   
                }else{   
                    return false;    
                }   
            }else{   
                return false;    
            }    		
		}
    }      
}   	
	
// ฟังก์ชันปิดการเชื่อมต่อ Server ผ่าน FTP         
function ftpClose($conn_id){         
    ftp_close($conn_id);         
}         
?>

ตัวอย่างการใช้งาน

ทบทวน javascript ฟังก์ชั่น ให้กรอกเฉพาะภาษาอังกฤษเท่านั้น

Wed, 03 Feb 2010 00:54:49 +0700

Javascript Code

การใช้งาน

หมุน สลับ แบนเนอร์ในแนวนอน ด้วย jQuery อย่างง่าย

Tue, 02 Feb 2010 02:37:51 +0700

ตัวอย่าง

CSS code ตัวอย่าง

HTML code ตัวอย่าง

jQuery ตัวอย่าง

การใช้งาน method delay() ใน jQuery 1.4

Mon, 01 Feb 2010 15:09:05 +0700

.delay()
ใช้สำหรับหน่วงเวลาในการเรียกใช้งานฟังก์ชันที่อยู่ในลำดับ queue

รูปแบบการใช้งาน

.delay( duration, [ queueName ] )

ค่าในปีกกาสี่เหลี่ยมเป็นตัวเลือกเพิ่มเติมหรือ option จะกำหนดค่าหรือไม่กำหนดก็ได้

duration คือ เวลาสำหรับการหน่วง โดย 1000 เท่ากับ 1 วินาที ค่ายิ่งมากหมายถึงการเรียกใช้ฟังก์ชั่นถัดไปจะยิ่งช้าลง

สามารถกำหนดเป็นข้อความ fast (มีค่าเท่ากับ 200) หรือ slow (มีค่าเท่ากับ 600)

queueName คือ ข้อความที่แสดงชื่อของ queue หากไม่กำหนด ค่าเริ่มต้นจะเป็น fx

CSS code ตัวอย่าง

HTML code ตัวอย่าง

Div A
Div B

jQuery code ตัวอย่าง

ตัวอย่าง

คำธิบายตัวอย่าง

divA และ divB มีการเคลื่อนไหวเกิดขึ้นสองช่วง

ช่วงที่ 1 divA และ divB เคลื่อนออกจากด้านซ้ายเดิมเท่ากับ 300 pixels ภายในเวลา 1200 มิลลิวินาทีหรือ 1 วินาที่ 200 มิลลิวินาที

ช่วงที่ 2 divA และ divB จะเคลื่อนกลับมายังตำแหน่งเดิมภายในเวลา 1200 มิลลิวินาทีหรือ 1 วินาที่ 200 มิลลิวินาทีเท่าเดิม

แต่กรณีความแตกต่างของ divA เมื่อมีการเรียกใช้ method .delay() จะทำให้การเคลื่อนไหวใน ช่วงที่ 2 ของ divA ช้ากว่าของ divB เท่ากับจำนวนเวลาที่กำหนด จากตัวอย่่าง เท่ากับ 600 มิลลิวินาที

การใช้งาน jQuery.contains() ใน jQuery 1.4

Wed, 27 Jan 2010 18:53:39 +0700

jQuery.contains()
ใช้สำหรับตรวจสอบว่ามี DOM 0bject หนึ่งอยู่ในอีก DOM Object หนึ่งหรือไม่ เช่น มีแท็ก li อยู่ในแท็ก div หรือไม่

รูปแบบการใช้งาน
jQuery.contains( container, contained )
หรือ
$.contains( container, contained )
คืนค่าเป็น true หรือ false (จากการทดสอบ จะคืนค่าเป็น 16 ถ้าเป็นจริง และเป็น 0 ถ้าเป็นเท็จ)
container คือ DOM Object ที่มี DOM Object ตัวอื่นอยู่ภายใน หรือ ตัวที่คลุม DOM Object ตัวอื่นอยู่
contained คือ DOM Object ที่บรรจุอยู่ใน DOM Object ตัวอื่น

CSS Code ตัวอย่าง

HTML Code ตัวอย่าง



list 1
list 2
list 3

jQuery Code ตัวอย่าง

ตัวอย่าง

การใช้งาน method .clearQueue() ใน jQuery 1.4 javascript library เวอร์ชั่นล่าสุด

Tue, 26 Jan 2010 23:50:09 +0700

ดาวน์โหลดไฟล์ js เวอร์ฃั่นล่าสุดได้ที่เว็บไซต์ http://jquery.com/

.clearQueue()
ใช้สำหรับยกเลิกฟังก์ชั่นใดๆ ก็ตามที่อยู่ใน method .queue()
รูปแบบการใช้งาน
.clearQueue( [ queueName ] )
queueName คือ ข้อความที่แสดงชื่อของ queue หากไม่กำหนด ค่าเริ่มต้นจะเป็น fx

เมื่อมีการเรียกใช้ method .clearQueue() จะทำให้ฟังก์ชั่นใดๆ ก็ตามที่อยู่ใน method .queue() จะถูกยกเลิก หากเรียกใช้งาน .clearQueue() โดยไม่ได้กำหนดค่่า อาร์กิวเมนต์ หรือ queueName จะเป็นการยกเลิก ฟังก์ชั่นทั้งหมดจาก queueName ที่ชื่อ fx ชื่องเป็นค่าเริ่มต้น

CSS code ตัวอย่าง

HTML code ตัวอย่าง

jQuery Code ตัวอย่าง

ยกเลิกการ animate แต่ฟังก์ชันใน method .queue() ยังคงอยู่ และทำงาน
ยกเลิกการ animate และฟังก์ชันใน method .queue() ถูกยกเลิก
การ animate ยังคงอยู่ แต่ฟังก์ชันใน method .queue() ถูกยกเลิก
ยกเลิกการ animate และฟังก์ชันใน method .queue() ถูกยกเลิก

รู้จัก property position ของ css ให้มากขึ้น ด้วย ตัวอย่าง และคำอธิบาย

Thu, 14 Jan 2010 04:48:29 +0700

div.exampleDiv1

div.exampleDiv1{

}

div.exampleDiv2

div.exampleDiv1{

}

Span

Div1 Left: Top:
Div2 Left: Top:
Div3

position:static; เป็นค่าเริ่มต้น จะกำหนดหรือไม่กำหนดก็ได้ ปกติถ้ากำหนดจะใช้เมื่อทำการ override หรือกรณีต้องการล้างค่าที่กำหนดก่อนหน้า จากค่าอื่นเช่น fixed , absolute หรือ relative
position:static; จะไม่รองรับการกำหนดค่า left , top, right และ bottom
position:relative;เป็นการกำหนดตำแหน่งที่อิงความสัมพันธ์กับตำแหน่งเดิม เช่น div1 กำหนด position เป็น relative และกำหนด left:20px; ผลลัพธ์คือ div1 จากเลื่อนออกจากตำแหน่งเดิมทางซ้าย 20 pixels
ข้อมูลหรือเนื้อหาที่อยู่ใน element ที่กำหนด position เป็น relative สามารถที่จะเลื่อนและอยู่วางซ้อนเหนือ elements ตัวอื่นได้ แต่จะเกิดพื้นที่ว่างจากเนื้อหาหรือข้อมูลขึ้นในตำแหน่งเดิม
position:relative;จะใช้บ่อยสำหรับบรรจุบล็อกของ elements ที่กำหนด position เป็น absolute
position:absolute; จะกำหนดตำแหน่งโดยอิงกับตำแหน่ง parent ตัวแรก ที่กำหนด position เป็นค่าอื่นที่ไม่ใช่ static
ตัวอย่าง ถ้า div1 อยู่ใน div2 หมายถึง div2 เป็น parent ของ div1
```
    
    

    
    
```
ถ้า div1 อยู่ใน div2 และ div2 อยู่ใน div3 หมายถึง div2 และ div3 เป็น parent ของ div1
```
    
    
    

    
    
    
```
หาก div3 มีการกำหนด position เป็น relative,absolute หรือ fiexd (ยกเว้น static)
และเมื่อกำหนด div1 position เป็น absolute ดังนั้นตำแหน่างของ div1 จะอิงความสัมพันธ์
กับตำแหน่งของ div3 ซึ่งเป็น parent ตัวแรกที่เข้าเงื่อนไข

กรณีไม่มี parent ใดๆ ที่เข้าเงื่อนไข ตำแหน่งของ div1 ที่กำหนด position เป็น absolute จะอิงกับ หรือ ขอบด้านในของบราวเซอร์

position:absolute; สามารถที่จะซ้อนทับกันได้ โดยใช้ร่วมกับ z-index เพื่อกำหนดตำแหน่งบน ล่าง
position:fixed; .ใช้กำหนดตำแหน่งของ element โดยอิงความสัมพันธ์กับตำแหน่งขอบด้านในของบราวเซอร์ และจะไม่เคลื่อนเมื่อมีการเลื่อน scrollbar
ถ้ากำหนด position ของ div1 เป็น fixed และกำหนด left:45px;top;100px; ตำแหน่งของ div1 จะขยับออกจากด้านซ้ายของขอบด้านในของเบราวเซอร์ 45 pixels และขยับออกจากด้านบนของขอบด้านในของบราวเซอร์เท่ากับ 100 pixels

ดึงไฟล์ xml (rss) ไฟล์แบบ cross domain มาแสดงด้วย ajax ใน jQuery อย่างง่าย

Mon, 04 Jan 2010 20:22:41 +0700

การดึง ข้อมูลจาก xml ไฟล์มาใช้ในเว็บ จะใช้ข้อมูลประมาณ 3 - 4 ข้อมูล ได้แก่

1.หัวข้อ title

2.ลิ้งค์ที่อยู่ url

3.รูปภาพประกอบ image

4.วันที่ date

แต่ในที่นี่จะแสดงตัวอย่างการดึงข้อมูล 2 ข้อมูลมาแสดง คือ หัวข้อ title และ ลิ้งค์ที่อยู่ url

โดยสามารถทำตามขั้นตอน ได้ดังต่อไปนี้

1.สรัางไฟล์ php เรียก ข้อมูล xml มาแสดง ชื่อ gXML.php

2.HTML code ในไฟล์สำหรับ แสดงข้อมูล

3.Javascript Code สำหรับดึงข้อมูล

CSS สำหรับกำหนดคุณสมบัติลายน้ำ ในที่ใช้รูปจาก google สำหรับทดสอบ สามารถแทนรูปภาพอื่นได้

HTML Code ตัวอย่าง

Javascript Code

จัดรูปแบบ การแบ่งคอลัมน์ column ของ ตาราง สำหรับแสดงข้อมูล ด้วย php

Wed, 23 Dec 2009 00:00:00 +0700

การนำข้อมูลมาแสดง โดยจัดรูปแบบ แบ่งเป็น column สามารถทำโดยการใช้ css จัดรูปแบบ หรือ การใช้ตาราง table

หากสามารถจัดรูปแบบ column โดยการใช้ css จะเป็นการดีมาก

http://www.ninenik.com/เทคนิค_CSS_แสดงข้อมูลแบ่งเป็น_คอลัมน์_แทนการใช้ตาราง_Table-229.html

แต่หากต้องการความรวดเร็วสามารถใช้ในรูปแบบของตาราง table

ขั้นตอนการจัดคอลัมน์ ด้วยตาราง

1.กำหนดจำนวนคอลัมน์ที่ต้องการ ในที่นี้ใช้ 4 คอลัมน์

2.สร้างตาราง 1 x 4 กำหนดความกว้างตาราง ตามต้องการ (1 แถว x 4 คอลัมน์)

3.แทรก php โค้ตดังตัวอย่างต่อไปนี้ (กรณีดึงจากฐานข้อมูล)

0 && $remainCol!=$numCol)?"":""?>

//	คำอธิบาย
//	บรรทัดที่ 6 หาจำนวน รายการทั้งหมดที่แสดง
//	บรรทัดที่ 7 กำหนดจำนวนคอลัมน์ ตามจำนวนที่ต้องการแสดง
//	บรรทัดที่ 8 คำนวนหาจำนวนคอลัมน์ที่เหลือ กรณีข้อมูลแสดงไม่ครบทุกคอลัมน์ในแต่ละแถว
//	บรรทัดที่ 11 15 18 และ 21 เงื่อนไขสำหรับแสดงข้อมูลแต่ละ คอลัมน์ 
//	สังเกตว่า เงือนไขสำหรับคอลัมน์แรก  ใช้  เงื่อนไข $i%$numCol==1
//	และเงื่อนไขสำหรับคอลัมน์ต่อๆ ไปจะเป็น $i%$numCol==2 , $i%$numCol==3 ..... ไปเรื่อย ๆ 
//	จนถึง เงื่อนไขคอลัมน์สุดท้ายจะต้องกำหนดเป็น $i%$numCol==0 เสมอ
//	บรรทัดที่ 26 เงื่อนไขสำหรับกรณ๊ข้อมูลแสดงไม่ครบทุกคอลัมน์

4.เมื่อสามารถแสดงคอลัมน์ข้อมูลได้แล้ว ก็ทำการจัดรูปแบบข้อมูลที่ต้องการแสดง ในแต่ละคอลัมน์ตามต้องการ

โดยอาจแทรกตารางเข้าไปในแต่ละคอลัมน์ เพื่อจัดรูปแบบก็ได้

ใช้งาน fckeditor WYSIWYG editor สำหรับเว็บบอร์ด หรืออื่นๆ อย่างง่าย

Mon, 21 Dec 2009 06:02:26 +0700

ดาวน์โหลด fckeditor คลิก

แตกไฟล์ get-fckeditor.zip ก็อบปี้ โฟลเดอร์ fckeditor ไปไว้บน server ที่ตำแหน่ง /public_html หรือตำแหน่งอื่นๆ ตามต้องการ

การปรับแต่งการแสดงหากต้องการเพิ่มเติม ให้แก้ไขในไฟล์ fckconfig.js
ไฟล์ที่ดาวน์โหลด ปรับรูปแบบ toolbar เพิ่มมาให้ 2 รูปแบบ
1.Default ตัวต้นฉบับ
2.Basic ตัวต้นฉบับ
3.Normal
4.None

การใช้งาน WYSIWYG editor เป็นการเพิ่มความสามารถให้ textarea เมื่อมีการใช้ WYSIWYG editor จึงเหมือนกับ เป็นการใช้งาน textarea ทั่วไป ดังนั้นเมื่อเรากำหนดชื่อให้กับ WYSIWYG editor เป็น message เมื่ออยู่ในฟอร์ม และทำการส่ง ค่า ข้อมูลที่รับจาก WYSIWYG editor ก็คือตัวแปร $_POST['message'] หรือ $_GET['message'] ตามแต่ว่าส่งเป็นแบบ GET หรือ POST

การใช้งาน

BasePath = "fckeditor/" ; // ตำแหน่งโฟลเดอร์ ของ fckeditor 
$oFCKeditor->Width= 800 ; // ความกว้าง
$oFCKeditor->Height= 200 ; // ความสูง
$oFCKeditor->ToolbarSet ="Normal"; // รูปแบบ Toolbar อาจเป็น Default , Basic , Normal , None หรือ อื่นๆ 
$oFCKeditor->Value ="" ; //
//$oFCKeditor->Value ="test" ; // กรณ๊กำหนดค่าเริ่มต้น หรือดึงข้อมูลจากฐานข้อมูล
$oFCKeditor->Create() ;
?>

นำโค้ดด้านบนไปวางแทนที่ textarea ใน form ที่ต้องการ กรณีใช้มากกว่า 1 อันในหนึ่งหน้า ตัวที่สองไม่ต้อง include ไฟล์ fckeditor/fckeditor.php อีก

ประยุกต์การทำ overlay เพจ กับกล่องข้อความ ด้วย jQuery

Sun, 20 Dec 2009 03:00:39 +0700

css code สำหรับกล่องข้อความ จัดรูปแบบตามต้องการ

HTML ปุ่ม สำหรับตัวอย่าง code

javascript code

ตัวอย่างคลิก ตัวอย่าง