Thursday, September 15, 2011

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

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

Wednesday, September 7, 2011

การออกแบบ 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

Monday, September 5, 2011

เริ่มต้นสร้าง 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 อาจหมายถึงการประกาศตัวแปร การกำหนดค่าเริ่มต้น การวางองค์ประกอบ หรือ คอมโพเนนท์ต่าง ๆ ที่จะนำมาใช้ในเว็บ