ทดสอบการข้าม

- กล่องข้อความสำหรับใส่รูปภาพในแต่ละคอลัมน์ 680x100 -

ทดสอบนะ

jQuery : การใช้งานคำสั่ง delegate

คำสั่ง delegete มีไว้เพื่อผูก event เข้ากับ elements ต่าง ๆ ที่อยู่ภายในเอกสาร HTML คล้าย ๆ กับคำสั่ง bind นั่นเอง

การสร้าง Virtual Host ใน Apache Web Server

วิธีการ Setup VirtualHost ใน Apache
1. เปิดไฟล์ httpd.conf แล้วแก้ไข Include conf/extra/httpd-vhosts.conf ให้เปิดออก

...
# Virtual hosts
Include conf/extra/httpd-vhosts.conf
...

2. แก้ไขไฟล์ httpd-vhosts.conf โดยการเพิ่ม Virtual Host เข้าไปดังนี้

...

    DocumentRoot  "C:/AppServ/www/lab"
    ServerName lab

...

3. Restart Apache

ระบบ PHP CAPTCHA ฉบับทำเอง ง่ายจัง!

ระบบ CAPTCHA เป็นระบบที่ใช้ตรวจสอบผ่านการติดต่อกับผู้ใช้ภายในเว็บไซต์ ซึ่งมีหลักการคือจะต้องทำการสร้างชุดอักขระสุ่มขึ้นมาแล้วใช้ PHP GDI สร้างภาพขึ้นมาพร้อมกับตั้งต่าที่สุมมานั้นเข้าไปเป็นตัวแปรแบบ session ด้วย จากนั้นก็สร้างฟอร์มพร้อมกับนำภาพที่สร้างโดย PHP GDI นั้นไปแปะเอาไว้

การออกแบบ User Interface ใน Flex Apllication

ตัวอย่างนี้ จะเป็นการออกแบบ User Interface วางคอมโพเนนท์ต่าง ๆ ลงบนพื้นที่หน้าเว็บ ซึ่งจะนำมาใช้ในการเชื่อมต่อข้อมูลกับ PHP โดยใช้ร่วมกับฐานข้อมูล MySQL โดยลักษณะหน้าตาที่ออกแบบจะเป็นดังนี้

สำหรับโค้ด MXML ของ User Interface นี้ก็เป็นดังนี้

<?xml version="1.0" encoding="utf-8"?> 
<s:Application  minWidth="955" minHeight="600" xmlns:fx="http://ns.adobe.com/mxml/2009" 
                         xmlns:s="library://ns.adobe.com/flex/spark" 
                         xmlns:mx="library://ns.adobe.com/flex/mx">
	<s:Label x="50" y="50" color="maroon" fontSize="20" fontWeight="bold" text="XYZ Corporation Directory"/> 
	<s:Button id="empBtn" x="50" y="100" label="Employees"/> 
	<s:Button id="deptBtn" x="140" y="100" label="Departments"/> 
	<s:DataGrid id="empDg" x="50" y="130" requestedRowCount="4">
		<s:columns> 
			<s:ArrayList> 
				<s:GridColumn dataField="dataField1" headerText="Column 1">
				</s:GridColumn> 
				<s:GridColumn dataField="dataField2" headerText="Column 2">
				</s:GridColumn> 
				<s:GridColumn dataField="dataField3" headerText="Column 3">
				</s:GridColumn>
			</s:ArrayList> 
		</s:columns> 
		<s:typicalItem> 
			<fx:Object dataField1="Sample Data" dataField2="Sample Data" dataField3="Sample Data">
			</fx:Object> 
		</s:typicalItem> 
		<s:ArrayList> 
			<fx:Object dataField1="data1" dataField2="data1" dataField3="data1">
			</fx:Object> 
			<fx:Object dataField1="data2" dataField2="data2" dataField3="data2">
			</fx:Object> 
			<fx:Object dataField1="data3" dataField2="data3" dataField3="data3">
			</fx:Object> 
			<fx:Object dataField1="data4" dataField2="data4" dataField3="data4">
			</fx:Object> 
		</s:ArrayList>
	</s:DataGrid>
</s:Application>

* อ้างอิงจาก Tutorial ของ Adobe.com

เริ่มต้นสร้าง Web Application ด้วย Adobe Flash Builder 4.5

การพัฒนาเว็บไซต์ในรูปแบบ Flex ซึ่งเป็นแอพลิเคชั่นในรูปแบบ Flash Platform ที่สามารถพัฒนาโดยใช้การเขียนโปรแกรม MXML และ ActionScript ร่วมกัน ตัวอย่างเมื่อเราทำการสร้างโปรเจ็กต์ Flex ขึ้นมาใหม่ โปรแกรม Flash Bulider ก็จะสร้างไฟล์ MXML มาโดยมีรูปแบบของไฟล์เริ่มต้นดังนี้

<?xml version="1.0" encoding="utf-8"?>
<s:application minheight="600" minwidth="955" 
xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:mx="library://ns.adobe.com/flex/mx" 
xmlns:s="library://ns.adobe.com/flex/spark">
	<fx:declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:declarations>
</s:Application>

จากตัวอย่างจะเห็นได้ว่า แท้จริงแล้วไฟล์ MXML นั้นก็คือไฟล์ XML รูปแบบหนึ่งนั้นเอง โดยรูปแบบการเขียนก็คล้าย ๆ กับภาษา HTML ที่ใช้ในการเขียนเว็บไซต์แบบธรรมดา ๆ พื้นฐานทั่ว ๆ ไป ซึ่งแท็กแต่ละแท็กในไฟล์ MXML อาจหมายถึงการประกาศตัวแปร การกำหนดค่าเริ่มต้น การวางองค์ประกอบ หรือ คอมโพเนนท์ต่าง ๆ ที่จะนำมาใช้ในเว็บ

PHP : Object Oriented Programming ตอนที่ 1

การเขียนโปรแกรมเชิงวัตถุ (Object Oriented Programming)

โครงสร้างคลาส

class MyClass {
// --------------------
}

เมื่อสร้างคลาสแล้ว สามารถนำคลาสมาเก็บไว้เป็นตัวแปรได้ โดยใช้คีย์เวิร์ด new

$obj = new MyClass();

และสามารถดู content ที่อยู่ภายในคลาสโดยใช้คำสั่ง var_dump();

var_dump($obj);

รู้จักกับ Firebug และวิธีการติดตั้ง

Firebug คือส่วนเสริม (add-on) ของโปรแกรมเว็บเบราเซอร์ FireFox เป็นเครื่องมือสำหรับการพัฒนาเว็บไซต์ สามารถตรวจสอบองค์ประกอบต่าง ๆ ภายในเว็บไซต์ (Inspact) ดีบัก JavaScript , CSS รวมถึงดูสถานะการโหลดไฟล์ชนิดต่าง ๆ ที่นำมาแสดงผลหรือควบคุมการทำงานของเว็บไซต์

จากตัวอย่างนี่คือการแนะนำเบื้องต้น รวมถึงการติดตั้งโปรแกรม Firebug

การทำงานกับเวลาใน JavaScript

การทำงานกับเวลาใน JavaScript มีคำสั่งที่เราต้องเรียนรู้คือ setTimeout() และ setInterval()

<script type="text/javascript">
setInterval(fn,1000);
function fn() {
 // Statements goes here ...
}
</script>

จากข้างต้นคือตัวอย่างของคำสั่งการทำงานกับเวลาใน JavaScript

สัมผัส jQuery ครั้งแรก

เมื่อทำการดาวน์โหลด jQuery มาแล้ว วิธีการที่จะนำ jQuery เข้ามาใช้งาน

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
// Statements goes here ...
});
</script>

วิธีการนำไฟล์ jQuery มาใช้การในเว็บเพจก็เหมือนกันการนำไฟล์ JavaScript ทั่ว ๆ ไปเข้ามาใช้งานกับเว็บเพจเช่นกัน

การตัดตัวอักขระตัวสุดท้ายของ String ใน JavaScript ออก

var str = 'hullo world!';
var newStr = str.substring(0, str.length-1);
alert(newStr);
// alert hullo world