หน้าเว็บ

วันเสาร์ที่ 29 พฤษภาคม พ.ศ. 2553

รู้จักกับ CSS

รู้จักกับ CSS
          CSS เป็นกลุ่มของรูปแบบการแสดงผลที่เราได้สร้างไว้เพื่อใช้กำหนดการแสดงผลของเนื้อ

หาในเว็บเพจ การนำ CSS เข้ามากำหนดการแสดงผลจะช่วยให้การกำหนดการแสดงผลของเนื้อ
หาที่อยู่ในเว็บเพจทำได้ง่ายและ ถูกต้องมากขึ้น นอกจากนี้ CSS ยังสามารถควบคุมการแสดงผล
บางอย่างที่ HTML ไม่สามารถควบคุมได้ด้วย อย่างเช่น ขนาดของตัวอักษรบนเว็บเพจใน CSS จะ
กำหนดขนาดเป็นพิกเซล ซึ่งจะทำให้การแสดงผลของตัวอักษรในทุกๆ เว็บเบราเซอร์เหมือนกัน
หรือ ตำแหน่งของเลเยอร์ซึ่งด้วย CSS เราสามารถที่จะกำหนดตำแหน่งการแสดงผลของมันได้
เป็นต้น


CSS จะประกอบด้วย 2 ส่วนด้วยกันคือ Selector และ Declaration
1. Selector เป็นชื่อของ CSS

2. Declaration เป็นส่วนที่ใช้กำหนดว่า CSS นี้มีรูปแบบอะไรบ้าง ซึ่งประกอบไปด้วย
คุณสมบัติและ ค่าของคุณสมบัติ
ประโยชน์ที่สำคัญของการนำ CSS มาใช้ก็คือ เมื่อเราเปลี่ยนแปลงรูปแบบที่กำหนดไว้ใน
CSS เมื่อใดแล้วรูปแบบการแสดงผลของข้อความหรือ วัตถุทั้งหมดที่ใช้ CSS ดังกล่าวจะเปลี่ยน
แปลงด้วย ซึ่งประเภทของ CSS มีดังนี้
1. Customer CSS Style หรือ Class Style เป็น CSS ที่สร้างขึ้นและ สามารถใช้ได้ทุกที่
ของเว็บเพจ
2. HTML Tag Style เป็น CSS ที่มีการกำหนดรูปแบบให้กับ HTML เดิมที่มีอยู่แล้ว
3. CSS Sector Style เป็น CSS ที่มีการกำหนดรูปแบบให้กับแท็กที่มีการผสมกันหรือ

ทุกแท็กที่มี id ตรงกับที่เรากำหนดใน CSS

 การใช้ CSS Style Panel

เราใช้ CSS Style Panel ในการสร้าง CSS ใหม่ แสดง CSS ที่มีอยู่และ กำหนด CSS ให้
กับข้อความหรือ วัตถุในเว็บเพจ เมื่อเราต้องการที่จะใช้ CSS Style Panel ให้เลือกเมนู Window -
> CSS Styles
ใน CSS Style Panel จะมีปุ่ม radio อยู่ 2 ปุ่มด้วยกันซึ่งใช้สลับมุมมองใน CSS Style
Panel ซึ่งมี 2 มุมมองด้วยกันคือ Apply Style และ Edit Style
เปิดโปรแกรม Dreamweaver MX ไปด้วย
มุมมอง Apply Style เป็นมุมมองที่ใช้ดู CSS Style ที่มีอยู่และ กำหนด CSS Style เหล่า

นั้นให้กับข้อความหรือ วัตถุที่ต้องการในเว็บเพจ ในมุมมองนี้จะแสดง CSS Style ประเภท Class
Style เท่านั้น เนื่องจาก HTML Tag Style และ Selector Style จะถูกใช้กับข้อความหรือ วัตถุที่
ตรงกับที่กำหนดไว้ใน Style ทั้งสองดังกล่าวอยู่แล้ว
มุมมอง Edit Style เป็นมุมมองที่ใช้ดูและ แก้ไข CSS Style ที่มีอยู่ในเอกสาร ซึ่งในมุม
มองนี้จะแสดง CSS Style ทั้ง 3 ประเภท
ใน CSS Style Panel ทางมุมขวาล่างจะประกอบไปด้วยปุ่มต่างๆ ที่ใช้ดำเนินการ ดังต่อ
ไปนี้
1. ปุ่ม Attach Style Sheet เปิดไดอะล็อก External Style Sheet เพื่อค้นหาไฟล์ที่
เก็บ Style Sheet ไว้แล้วเชี่อมโยงไฟล์ดังกล่าวกับเอกสารหรือ นำเข้า Style Sheet ดัง
กล่าวในเอกสารที่เราทำงานอยู่
2. ปุ่ม New CSS Style ใช้เปิดไดอะล็อก New CSS Style ซี่งใช้ในการสร้าง Style
ใหม่
3. ปุ่ม Edit Style Sheet ใช้เปิดไดอะล็อก CSS Style Definition ซึ่งใช้ในการแก้ไข

Style ที่มีอยู่ในเอกสารที่เราทำงานอยู่หรือ เอกสารที่เชื่อมโยงจากภายนอก
4. ปุ่ม Delete CSS Style ใช้ลบ CSS Style ที่อยู่ใน Panel และ ข้อความหรือ วัตถุที่
ใช้ Style ดังกล่าว

การสร้าง CSS Style ใหม่


1. ทำตามขั้นตอนใดขั้นตอนหนึ่งต่อไปนี้

• เปิด CSS Panel คลิกที่ปุ่ม + ใน Panel หรือใน Property Inspector คลิกที่ไอ
คอน ที่อยู่ทางมุมบนขวาแล้วเลือก CSS Mode เพื่อเปลี่ยน Property
Inspector ให้อยู่ใน CSS Mode ดังรูป



• ในป๊อปอัพเมนู CSS Style เลือก New CSS Style

• เลือกที่เมนู Text -> CSS -> New CSS จะปรากฎไดอะล็อกที่ให้กรอกข้อมูลเพื่อ
สร้าง CSS ใหม่ ดังรูป


2. พิมพ์ชื่อของ Style ในฟิลด์
3. ใน Type เลือกประเภทของ Style ที่จะสร้างซึ่งมี 3 ประเภทดังที่กล่าวไว้ข้างต้น

4. ใน Define In เลือกไฟล์ที่จะเก็บ Style ที่สร้างไว้ ซึ่งมีดังนี้
• เลือก This Document Only เมื่อต้องการเก็บ Style ไว้ในไฟล์เดียวกับไฟล์ที่
กำลังทำงานอยู่
• เลือก New Style Sheet File ในป๊อปอัพเมนูเมื่อต้องการเก็บ Style ในไฟล์ภาย
นอกที่สร้างขึ้นมาใหม่
• เลือกรายการไฟล์ที่อยู่ในป๊อปอัพเมนู เพื่อเก็บ Style ที่สร้างขึ้นใหม่ในไฟล์ดัง
กล่าว
5. กดปุ่ม OK เพื่อดำเนินการในขั้นตอนต่อไป
6. จะปรากฎไดอะล็อก CSS Style Definition ดังรูปซึ่งในไดอะล็อกจะแสดงคุณ
สมบัติต่างๆ ที่เราสามารถเลือกใช้กับ Style ได้ เมื่อเราเลือกคุณสมบัติต่างๆ ที่
ต้องการเสร็จแล้วกดปุ่ม OK เพื่อจบการสร้าง CSS Style

การใช้ Class Style


Class Style เป็น Style ชนิดเดียวที่สามารถใช้กับข้อความหรือ วัตถุใดๆ ที่อยู่ในเอกสาร

ได้ทั้งหมด เมื่อเราใช้ Class Style กับข้อความหรือ วัตถุ จะมีบางคุณสมบัติที่ไม่สามารถแสดงผล

ใน Document Window ได้จำเป็นต้องดูผ่านเว็บเบราเซอร์เท่านั้น

ขั้นตอนการใช้ Class Style มีดังนี้

1. เลือกข้อความหรือ วัตถุที่ต้องการ
2. เปิด CSS Style Panel เปลี่ยนมุมมองเป็นมุมมอง Apply Style แล้วเลือก Style ที่
ต้องการในรายการ CSS Style ที่แสดงอยู่ในกล่องแสดงรายการดังรูปหรือ ใน
Property Inspector เปลี่ยนเป็น CSS Mode แล้วเลือก Style ที่ต้องการในป๊อปอัพ
เมนู CSS Style หรือ เลือกเมนู Text -> CSS Styles และ เลิก Style ที่ต้องการในเมนู
ย่อย



3. การยกเลิกใช้ Style ทำได้โดยเลือกข้อความหรือ วัตถุที่ต้องการยกเลิกใช้ Style แล้ว

ในCSS Style Panel เลือก No CSS Style หรือ ใน Property Inspector ใน CSS
Mode เลือก none ในป๊อปอัพเมนู CSS
การสร้างและ เชื่อมโยงไปยัง CSS Style Sheet

CSS Style Sheet เป็นไฟล์ที่เก็บรูปแบบของ CSS ที่เราสร้างไว้ เมื่อเราต้องการใช้ CSS ที่
อยู่ในไฟล์ดังกล่าว ก็เพียงแค่นำเข้าหรือ เชื่อมโยงไฟล์ดังกล่าวเข้ากับไฟล์ที่เราทำงานอยู่ เมื่อใดก็
ตามที่เราแก้ไข Style ที่อยู่ใน CSS Style Sheet แล้ว ไฟล์อื่นๆ ที่ทำการเชื่อมโยงมายังไฟล์ดัง
กล่าวและ ใช้ Style ที่อยู่ในไฟล์ก็จะเปลี่ยนการแสดงผลตามที่เราแก้ไขด้วย
ขั้นตอนการเชื่อมโยงและ นำเข้า CSS Style Sheet มีดังนี้
1. เปิด CSS Style Panel

2. คลิกที่ปุ่ม Attach Style
3. คลิกที่ปุ่ม Browse เพื่อหา CSS Style Sheet ที่ต้องการ
4. เลือก Link เพื่อทำการเชื่อมโยง CSS Style Sheet เข้ากับไฟล์ที่เรากำลังทำงานอยู่
การแก้ไข CSS Style

การแก้ไข CSS Style เราสามารถทำได้กับ CSS Style ทั้งที่อยู่ในไฟล์เดียวกันกับไฟล์ที่เรา
กำลังทำงานอยู่และ ไฟล์ภายนอกที่เราเชื่อมโยงด้วย โดยขั้นตอนการแก้ไขมีดังนี้
1. ใน CSS Style Panel เปลี่ยนมุมมองเป็นแบบ Edit Style
2. เลือก Style ที่ต้องการแก้ไขในกล่องรายการแล้วดับเบิลคลิกที่เมาปุ่มซ้าย
3. จะปรากฎไดอะล็อก CSS Style Definition ให้แก้ไข Style เมื่อแก้ไขเสร็จแล้วกด OK
เพื่อจบการแก้ไข 

เป็นไงบ้างครับกับ CSS  ลองศึกษากันดูนะครับ วันนี้แค่นี้ก่อนครับ

วันพฤหัสบดีที่ 27 พฤษภาคม พ.ศ. 2553

การใช้งานอ็อบเจ็คต์ของฟอร์มชนิดต่างๆ ใน Dreamweaver

     อ็อบเจ็คต์ คือส่วนของฟอร์มที่ใช้ในการรับข้อมูลจากผู้ใช้ ก่อนที่จะแทรกอ็อบเจ็คต์ลงบนเว็บเพจ ต้องมีการสร้างหรือแทรกฟอร์มลงในเว็บเพจก่อนเสมอ หากมีการแทรกอ็อบเจ็คต์ลงในส่วนที่ไม่มีฟอร์ม Dreamweaver จะถามโดยปรากฏไดอะล็อก “Add form tags?” ให้เลือก Yes เพื่อให้ Dreamweaver สร้างแท็กฟอร์มสำหรับอ็อบเจ็คต์นั้น

การใช้งานอ็อบเจ็คต์ Text Field

อ็อบเจ็คต์ชนิด Text Field จะมีหน้าที่ในการรับค่าข้อมูล เพื่อใช้ในการจัดเก็บข้อมูลหรือส่งค่าบางอย่างที่ต้องการค้นหา เช่น ใช้ในการค้นหาข้อมูล (Search Engine) เป็นต้น

วิธีการสร้าง Text Field ทำได้โดยการคลิกเมนู Insert > Form > Text Field เสร็จแล้วให้กำหนดคุณสมบัติของ Text Field โดยให้คลิกเลือกที่ Text Field ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ Text Field แสดงในไดอะล็อก Properties

 

คุณสมบัติของอ็อบเจ็คต์ Text Field:


• TextField กำหนดชื่อของอ็อบเจ็คต์ Text Field

• Char Width กำหนดความกว้างของ Text Field

• Max Chars กำหนดจำนวนตัวอักษรสูงสุดที่กรอกข้อมูลได้ของ Text Field

• Type กำหนดชนิดของ Text Field มี 3 ลักษณะ คือ

o Single Line กำหนดให้แสดงเป็นแบบบรรทัด (Textarea)

o Multi Line กำหนดให้แสดงเป็นแบบหลายบรรทัด

o Password กำหนดให้แสดงแบบรหัสผ่าน

• Init Val กำหนดค่าเริ่มต้น

การใช้งานอ็อบเจ็คต์ Textarea


อ็อบเจ็คต์ชนิด Textarea จะมีหน้าที่ในการรับค่าข้อมูลที่มีขนาดใหญ่ เช่น ที่อยู่ เป็นต้น

วิธีการสร้าง Text Field ทำได้โดยการคลิกเมนู Insert > Form > Textarea เสร็จแล้วให้กำหนดคุณสมบัติของ Textarea โดยให้คลิกเลือกที่ Textarea ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ Textarea แสดงในไดอะล็อก Properties
 
 

คุณสมบัติของอ็อบเจ็คต์ Textarea:


• TextField กำหนดชื่อของอ็อบเจ็คต์ Textarea

• Char Width กำหนดความกว้างของ Textarea

• Max Chars กำหนดจำนวนตัวอักษรสูงสุดที่กรอกข้อมูลได้ของ Textarea

• Type กำหนดชนิดของ Textarea คือ Multi Line

• Init Val กำหนดค่าเริ่มต้น
 
 

การใช้งานอ็อบเจ็คต์ Button


อ็อบเจ็คต์ชนิด Button มักถูกนำมาใช้เพื่อทำหน้าที่ในการยืนยันการเพิ่มข้อมูล แก้ไขข้อมูล การลบข้อมูล หรือยกเลิกการใช้งาน

วิธีการสร้าง Button ทำได้โดยการคลิกเมนู Insert > Form > Button เสร็จแล้วให้กำหนดคุณสมบัติของ Button โดยให้คลิกเลือกที่ Button ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ Button แสดงในไดอะล็อก Properties



คุณสมบัติของอ็อบเจ็คต์ Button:


• Button name กำหนดชื่อของอ็อบเจ็คต์ Button

• Label กำหนดข้อความที่จะแสดงบนปุ่ม Button

• Action กำหนดชนิดของ Action มี 3 ลักษณะ คือ

o Submit Form กำหนดให้ใช้สำหรับส่งฟอร์มไปประมวลผล

o Reset Form กำหนดให้ใช้สำหรับยกเลิกการกรอกข้อมูลในฟอร์ม

o None กำหนดให้เป็นปุ่มที่คลิกแล้วไม่ทำงานใดๆ
 
การใช้งานอ็อบเจ็คต์ Check Box


อ็อบเจ็คต์ชนิด Check Box ทำหน้าที่เพื่อแสดงตัวเลือกให้ผู้ใช้ได้เลือกตัวเลือกที่กำหนดให้ ซึ่งสามารถเลือกได้มากกว่า 1 ตัวเลือก

วิธีการสร้าง Check Box ทำได้โดยการคลิกเมนู Insert > Form > Check Box เสร็จแล้วให้กำหนดคุณสมบัติของ Check Box โดยให้คลิกเลือกที่ Check Box ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ Check Box แสดงในไดอะล็อก Properties
 
 

คุณสมบัติของอ็อบเจ็คต์ Check Box:


• CheckBox กำหนดชื่อของอ็อบเจ็คต์ Check Box

• Checked Value กำหนดค่าให้ Check Box

• Initial State กำหนดสถานะเริ่มต้นเมื่อแสดงบนเว็บเพจ มี 2 ลักษณะ คือ

o Checked กำหนดให้เริ่มต้นโดยให้สถานะเป็นถูกเลือกไว้

o Unchecked กำหนดให้เริ่มต้นโดยสถานะไม่ให้ถูกเลือก
 
การใช้งานอ็อบเจ็คต์ Radio Button


อ็อบเจ็คต์ชนิด Radio Button ทำหน้าที่เพื่อแสดงตัวเลือกให้ผู้ใช้ได้เลือกตัวเลือกที่กำหนดให้ ซึ่งสามารถเลือกได้เพียง 1 ตัวเลือกเท่านั้น เช่น การเลือกระบุเพศ ชาย หรือ หญิง จะเป็นการเลือกเพศใดเพศหนึ่งเพียงเพศเดียวเท่านั้น

วิธีการสร้าง Radio Button ทำได้โดยการคลิกเมนู Insert > Form > Radio Button เสร็จแล้วให้กำหนดคุณสมบัติของ Radio Button โดยให้คลิกเลือกที่ Radio Button ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ Radio Button แสดงในไดอะล็อก Properties
 
 

คุณสมบัติของอ็อบเจ็คต์ Radio Button:


• RadioButton กำหนดชื่อของอ็อบเจ็คต์ Radio Button หากเป็นการเลือกอย่างใดอย่างหนึ่ง จากตัวเลือกตั้งแต่ 2 ตัวขึ้นไป จะต้องกำหนดชื่อของ Radio Button ทุกตัวให้ชื่อเหมือนกัน มิฉะนั้น การทำงานของ Radio Button จะไม่ถูกต้อง

• Checked Value กำหนดค่าให้ Radio Button

• Initial State กำหนดสถานะเริ่มต้นเมื่อแสดงบนเว็บเพจ มี 2 ลักษณะ คือ

o Checked กำหนดให้เริ่มต้นโดยให้สถานะเป็นถูกเลือกไว้

o Unchecked กำหนดให้เริ่มต้นโดยสถานะไม่ให้ถูกเลือก
 
การใช้งานอ็อบเจ็คต์ List/Menu


อ็อบเจ็คต์ชนิด List/Menu ทำหน้าที่เพื่อกำหนดค่าโดยที่ใช้ไม่ต้องพิมพ์ตัวเลือกที่ต้องการลงไป เพียงแค่คลิกเลือกรายการต่างๆ ที่ไดกำหนดไว้ให้แล้วเท่านั้น สามารถเลือกได้เพียง 1 ตัวเท่านั้น

วิธีการสร้าง List/Menu ทำได้โดยการคลิกเมนู Insert > Form > List/Menu เสร็จแล้วให้กำหนดคุณสมบัติของ List/Menu โดยให้คลิกเลือกที่ List/Menu ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ List/Menu แสดงในไดอะล็อก Properties
 
 

คุณสมบัติของอ็อบเจ็คต์ List/Menu:


• List/Menu กำหนดชื่อของอ็อบเจ็คต์ List/Menu

• Type เลือกการทำงานเป็นแบบ Menu หรือ List

• Initially Selected แสดงค่าตัวเลือกที่กำหนดมาจาก List Values

การใช้งานอ็อบเจ็คต์ File Field

อ็อบเจ็คต์ชนิด File Field นี้ ทำหน้าที่ในการแสดงรายชื่อไฟล์ต่างๆ เพื่อให้ผู้ใช้เว็บไซต์สามารถเลือกไฟล์เหล่านั้นขึ้นมาใช้งาน เช่น การอัปโหลดไฟล์ เป็นต้น
วิธีการสร้าง File Field ทำได้โดยการคลิกเมนู Insert > Form > File Field เสร็จแล้วให้กำหนดคุณสมบัติของ File Field โดยให้คลิกเลือกที่ File Field ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ File Field แสดงในไดอะล็อก Properties


คุณสมบัติของอ็อบเจ็คต์ File Field:


• FileField กำหนดชื่อของอ็อบเจ็คต์ File Field

• Char Width กำหนดความกว้างของ File Field

• Max Chars กำหนดจำนวนตัวอักษรสูงสุด
 
การใช้งานอ็อบเจ็คต์ Hidden Field


อ็อบเจ็คต์ชนิด Hidden Field นี้ จะทำงานในลักษณะล่องหน กล่าวคือ มีจุดประสงค์เพื่อใช้ในการประมวลผลข้อมูล ที่ได้รับจากการใช้งานฟอร์มต่างๆ ซึ่งฟิลด์แบบ Hidden Field นี้ จะไม่มีการติดต่อสื่อสารกับผู้ใช้งานฟอร์ม แต่อย่างใด รวมทั้งไม่มีการแสดงผลบนหน้าเว็บเพจด้วย

วิธีการสร้าง Hidden Field ทำได้โดยการคลิกเมนู Insert > Form > Hidden Field เสร็จแล้วให้กำหนดคุณสมบัติของ Hidden Field โดยให้คลิกเลือกที่ Hidden Field ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ Hidden Field แสดงในไดอะล็อก Hidden Field
 
 

คุณสมบัติของอ็อบเจ็คต์ Hidden Field:


• HiddenField กำหนดชื่อของอ็อบเจ็คต์ Hidden Field

• Value กำหนดค่าเริ่มต้นสำหรับ Hidden Field
 
การใช้งานอ็อบเจ็คต์ Image Field


อ็อบเจ็คต์ชนิด Image Field นี้ เราสามารถใส่รูปลงในฟอร์มเพื่อทำให้เว็บเพจนั้นดูมีสีสันดูสวยงามขึ้นยิ่งขึ้น หรืออาจใช้ประโยชน์ในการใช้แทนปุ่ม Button ก็ได้

วิธีการสร้าง Image Field ทำได้โดยการคลิกเมนู Insert > Form > Image Field เสร็จแล้วให้กำหนดคุณสมบัติของ List/Menu โดยให้คลิกเลือกที่ Image Field ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ Image Field แสดงในไดอะล็อก Image Field
 
 
คุณสมบัติของอ็อบเจ็คต์ Image Field:


• ImageField กำหนดชื่อของอ็อบเจ็คต์ Image Field

• W กำหนดค่าความกว้างของ Image Field ที่แสดง

• H กำหนดค่าความสูงของ Image Field ที่แสดง

• Src ชื่อไฟล์รูปภาพของ Image Field ที่แสดง

• Alt กำหนดข้อควาที่จะใช้แสดงแทน ในกรณีที่ไม่พบไฟล์รูปภาพ

• Align กำหนดตำแหน่งการแสดง Image Field

การใช้งานฟอร์มกับ PHP

       ฟอร์มทำหน้าที่ในการติดต่อสื่อสารหรือโต้ตอบกับผู้ใช้เว็บไซต์ในลักษณะการรับส่งข้อมูล เมื่อ

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


วิธีการทำงานของฟอร์มมีดังนี้

1) เริ่มต้นเมื่อผู้ใช้กรอกแบบฟอร์มบนเว็บเพจและคลิกปุ่มส่งข้อมูลมาที่เว็บเซิร์ฟเวอร์

2) ข้อมูลจากฟอร์มจะถูกประมวลผลที่ไฟล์ PHP, ASP หรือไฟล์ CGI อื่นๆบนเว็บเซิร์ฟเวอร์

3) เมื่อประมวลผลเสร็จแล้ว ผลลัพธ์จะถูกส่งกลับไปให้ผู้ใช้ในรูปแบบเอกสาร HTML เพื่อให้เว็บเบราเซอร์แสดงผล

 
การสร้างและใช้งานฟอร์มกับ PHP
 
ขั้นตอนการสร้างฟอร์ม:


1. เปิดโปรแกรม Dreamweaver MX คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ General เลือก Dynamic Page > PHP หลังจากนั้นคลิกปุ่ม Create บันทึกเป็นไฟล์ form.php

2. ที่หน้าจอของเว็บเพจ ให้คลิกเพื่อวางเคอร์เซอร์ในตำแหน่งที่ต้องการสร้างฟอร์ม หลังจากนั้นคลิกที่เมนู Insert > Form > Form ฟอร์มจะถูกแทรกลงในเว็บเพจ หากอยู่ใน Design View จะเห็นขอบเขตของฟอร์มแสดงเป็นเส้นประสีแดง (หากไม่มีเส้นประสีแสดงขึ้นมา ให้คลิกที่เมนู View > Visual Aids > Invisible Elements)

 

3. คลิกวางตำแหน่งเคอร์เซอร์ลงภายในขอบเขตของฟอร์ม หลังจากนั้นให้คลิกเลือกแท็ก
จาก Tag Selector บริเวณขอบล่างซ้ายของเว็บเพจ เมื่อปรากฏไดอะล็อก Properties ช่อง Form Name ให้กำหนดชื่อของฟอร์ม เท่ากับ fmProcess ชื่อของฟอร์มนี้จะถูกใช้เพื่ออ้างอิงในสคริปต์ PHP



4. ไดอะล็อก Properties ช่อง Action ให้กำหนดชื่อไฟล์ หรือ URL ของสคริปต์ที่จะใช้ในการประมวลผลฟอร์ม เท่ากับ formprocess.php (หากต้องการระบุเป็น URL ให้พิมพ์เป็น http://localhost/phpweb/formprocess.php)

5. ไดอะล็อก Properties ช่อง Method ให้เลือกรูปแบบการส่งข้อมูลจากฟอร์มไปที่เว็บเซิร์ฟเวอร์ ซึ่งมีให้เลือก 3 รูปแบบ คือ


การทำงานของ METHOD:

• POST ส่งข้อมูลโดยส่งข้อมูลส่งไปกับ HTTP Request

• GET ส่งข้อมูลโดยการแปะค่าเป็น URL Parameter (Query String) ไปกับ URL (ข้อมูลที่ส่งจะแสดงอยู่บน URL ของเว็บเบราเซอร์)

• DEFAULT ส่งข้อมูลโดยขึ้นอยู่กับค่า default ของเว็บเบราเซอร์ โดยปกติจะเป็นแบบ GET
 
6. ไดอะล็อก Properties ช่อง Enctype ให้ระบุชนิดของการเข้ารหัสข้อมูล โดยค่า default ของ Enctype จะเป็น application/x-www-form-urlencode ซึ่งจะถูกใช้ร่วมกับ method แบบ POST หากใช้ฟอร์มในการอัปโหลดไฟล์ ให้เลือก Enctype เป็นแบบ multipart/form-data


7. ไดอะล็อก Properties ช่อง Target ให้พิมพ์ชื่อหน้าจอของเว็บเบราเซอร์ที่ต้องการแสดงผลลัพธ์ของฟอร์มหรือเลือกจากรายการที่กำหนดไว้ให้ หากเว็บเบราเซอร์ยังไม่มีชื่อหน้าจอที่ระบุ เว็บเบราเซอร์จะสร้างหน้าจอชื่อที่ระบุขึ้นมาใหม่ ตัวเลือกที่กำหนดไว้ให้ในช่อง Target
การทำงานของ TARGET:


• _blank ผลลัพธ์ของฟอร์มจะแสดงที่หน้าจอเว็บเบราเซอร์ที่สร้างขึ้นมาใหม่

• _parent ผลลัพธ์ของฟอร์มจะแสดงที่หน้าจอหลัก (parent) ของหน้าจอเว็บเบราเซอร์ขณะนั้น

• _self ผลลัพธ์จะแสดงที่หน้าจอเว็บเบราเซอร์เดียวกับฟอร์ม

• _top ผลลัพธ์ของฟอร์มจะแสดงที่หน้าจอหลัก ในกรณีที่หน้าจอเว็บเบราเซอร์แบ่งเป็นหลายเฟรม

8. คลิกปุ่ม Code View เพื่อเขียนโค้ด HTML ดังรูปด้านล่าง หลังจากนั้นบันทึกไฟล์ form.php
 
< html >

< body >
< form  action ="formprocess.php" method="POST" name="fmProcess " >
ชื่อ: < br >
นามสกุล: < input  name =" lastname" type ="text " size=" 32" maxlength = "30" > < br >
< input name =" btnSubmit" typ e=" submit" value= " บันทึก" >
< input name = " btnReset" type= "reset " value= " ยกเลิก" >
< / form >
< / body >
< / html>

9. เปิดโปรแกรม Dreamweaver MX คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ General เลือก Dynamic Page > PHP คลิกปุ่ม Create หลังจากนั้นให้เพื่อเขียนโค้ด PHP ดังรูปด้านล่าง บันทึกเป็นไฟล์ formprocess.php

< html >

< body >
< ?php
echo " ชื่อ: " . $_POST['firstname']  . " < br >";
echo " นามสกุล: " . $_POST['lastname']  . "< br >";
? >
< / body >
< / html >
10. ทดสอบการทำงานของฟอร์ม โดยเปิด Dreamweaver MX ไปที่หน้าจอไฟล์ form.php หลังจากนั้นกดปุ่ม F12 จะปรากฏหน้าจอ Internet Explorer เป็นแบบฟอร์มกรอกข้อมูล ให้กรอกข้อมูล แล้วคลิกปุ่ม "บันทึก" ให้สังเกตผลลัพธ์การทำงานของเว็บเพจ




11. เปลี่ยน METHOD ของฟอร์มในไฟล์ form.php จาก METHOD="POST" เป็น METHOD="GET"


12. เปลี่ยนชื่อตัวแปรในไฟล์ formprocess.php จาก $_ POST['firstname’ ] เป็น $_ GET['firstname' ] และ
 $_ POST[' lastname'] เป็น $_ GET ['lastname ']

13. ทดสอบการทำงานของฟอร์มใหม่อีกครั้ง ให้สังเกตผลลัพธ์การทำงานของเว็บเพจ

วันอังคารที่ 25 พฤษภาคม พ.ศ. 2553

ตัวแปร ใน PHP

ตัวแปร (Variables)
ตัวแปรคือการจองพื้นที่หน่วยความจำไว้เก็บข้อมูล และประกาศชื่อเพื่ออ้างอิง

หลักการประกาศชื่อตัวแปร
ตัวแปรภาษา PHP จะใช้สัญลักษณ์ $ ขึ้นนำ
ตัวแปรภาษา PHP จะต้องเริ่มต้นด้วยตัวอักษรหรือเครื่องหมาย underscore "_".
ตัวแปรภาษา PHP สามารถประกอบด้วยตัวอักษร ตัวเลข และเครื่องหมาย underscore คือ a-z, A-Z, 0-9, or _
ตัวแปรที่ประกอบด้วยคำมากกว่าหนึ่งคำ อาจคั่นด้วยเครื่องหมาย underscores เช่น $my_variable
ตัวแปรที่ประกอบด้วยคำมากกว่าหนึ่งคำ อาจแสดงให้ชัดเจนด้วยการใช้ตัวอักษรตัวใหญ่คั่นในคำต่อไป

เช่น $myVariable
การประกาศตัวแปร
ตัวอย่างการประกาศตัวแปรที่ถูกต้อง:



$total
$_cell1
$length_of_string

ตัวอย่างการประกาศตัวแปรที่ผิด:                      

total
$1_total
$2_length


การกำหนดค่าให้ตัวแปร


กำหนดค่าเป็นตัวเลข :

< ?
$total = 10;
$a = 4.5;
? >
ค่า $total จะเก็บค่า 10 และ $a จะเก็บค่า 4 เรา สามารถ นำมาแสดงได้ ด้วยการ echo ตัวแปรนั้นออกมา
การกำหนดค่าเป็นข้อความ (string)
ใช้เครื่องหมาย quotes (") หรือ single quote (') คร่อมข้อความที่ต้องการเก็บลงสู่ตัวแปร
< ?
$string1 = ‘hello my friend';
$string2 = “how are you?";
? >
ค่า $string1 และ $string2 จะเก็บตัวอักษรต่าง ๆ ที่ป้อนเอาไว้

การแสดงข้อความ The functions "echo" and "print"

< HTML >


< HEAD >

< TITLE > PHP-Test < / TITLE >

< / HEAD >

< BODY >

< ? PHP

echo "Good morning student!!! ";

echo " จะแสดง < I >ตัวเอียง ";

print " จะแสดง < B > ตัวหนา< / B >";

? >

< / BODY >

< / HTML  >

อีกหนึ่งคำสั่งคือ < ? =  “ ข้อความหรือตัวแปร" ?  >

การแสดงข้อความที่มีอักขระ “
        เนื่องจากถ้าใช้ “ลงไปในข้อความ จะซ้อนกับคำสั่ง echo “……………” โปรแกรมประมวลผลและเข้าใจผิดว่า จบคำสั่งแค่ตรง “ ที่พบอันต่อมาเช่น print “today” Sunday”; โปรแกรมจะคิดว่าให้ print ถึงแค่ไหน?เราสามารถแก้ไขได้โดยใช้ \ มาวางไว้หน้า “ ดังนี้   print “today \”Sunday”;

ข้อแตกต่างระหว่าง quotes (") กับ single quote ('):

ผลของการเก็บตัวแปรข้อความลงใน qoute ทั้งสองแบบ มีดังนี้

< ?
$ total = 10; 
$ a = ‘ The total is $total  ’;
$ b = “ The total is $total  ”;
? >
เมื่อ echo ผลการกำหนดค่าให้ตัวแปร $a คือ     The total is $total
เมื่อ echo ผลการกำหนดค่าให้ตัวแปร $b คือ    The total is 10
สรุปว่า ‘ และ “ ต่างกันตรงไหน?

วันจันทร์ที่ 24 พฤษภาคม พ.ศ. 2553

การทำเว็บขายของ

การทำเว็บไซต์ขายของ หรือการทำเว็บขายสินค้าออนไลน์นั้น กำลังได้รับความนิยมอย่างมาก เพื่อนๆหลานคนในที่นี้ก็อาจกำลังสนใจ เพราะเป็นแนวทางอีกแนวทางหนึ่ง ที่ช่วยสร้างธุรกิจออนไลน์ หรือธุรกิจ e-commerce ให้เพื่อนๆได้ แต่การทำร้านค้าออนไลน์นั้น เพื่อนๆจะต้องมีระบบ บริหารจัดการร้านค้าออนไลน์ของเพื่อนๆ ตั้งแต่ การทำหมวดสินค้า การเพิ่มลบสินค้า การจัดเรียงลำดับหมวดหมู่ รหัสสินค้า ระบบสั่งซื่อ การชำระเงิน ระบบตะกร้า นั่งนึกๆดูแล้วก็ไม่ง่ายเลยที่จะมีร้านค้าออนไลน์ที่มีระบบออนไลน์ครอบคลุมซักหนึ่งร้าน ผมขอแนะนำตัวนึงที่ช่วยให้เพื่อนๆได้ ร้านค้าออนไลน์ นั้นก็คือ joomla virtueMart นั้นเอง ตัว joomla virtueMart ก็คือโปรแกรมสำเร็จรูปที่มากด้วยคุณสมบัติการใช้งาน มีโปรแกรมเสริมการใช้งานมากมาย และที่มาคู่กันนั้นก็คือ virtueMart เป็น component หรือส่วนขยายใน joomla ไว้สำหรับจัดการเว็บไซต์ในส่วนของ e-commerce หรือ ส่วนร้านค้านั้นเอง มีลูกเล่นเพียบ อันนี้เพื่อนๆต้องลอง การใช้งานนั้น ก่อนอื่นๆเพื่อนๆสามารถดาวน์โหลด เจ้า joomla virtueMart ได้จาก ที่นี้ ซึ่งการติดตั้งการใช้งานนั้นก็ไม่ได้แตกต่างจาการติดตั้ง joomla ที่ผมเคยแนะนำไปในบทความก่อนหน้านี้เลย  ลองนำมาใช้งานดูนะครับ เท่านี้ เพื่อนๆก็จะมี  เว็บไซต์ขายสินค้าออนไลน์ กันแล้ว

วันอาทิตย์ที่ 23 พฤษภาคม พ.ศ. 2553

การเชื่อมต่อ เซิร์ฟเวอร์ผ่าน Dreamweaver

  บทความนี้จะเป็นการเชื่อมต่อระหว่างเซิร์ฟเวอร์กับ Dreamweaver เพื่อเรียกการทำงานของไฟล์ PHP ที่เก็บไว้ในผั่งของเซิร์ฟเวอร์ผ่าน Dreamweaver มีขั้นตอนดังนี้
1 เปิด โปรแกรม Dreamwaever  ไปที่เมนู  site เลือก New site

2 จะมีหน้าต่าง site definition  ขึ้นมาให้ใส่ชื่อลงไป


3 ที่หัวข้อ Do you want to work with a sever technology such as Coldfusion, ASP.NET,ASP,JSP,or PHP ?
คลิ๊ก Yes ไปนะครับ แล้วในช่อง Which Server technology ? ให้เลือกเป็น PHP MySQL แล้วกด NEXT


4 ต่อไปก็เลือกตามรูปเลยนะครับ แล้วเลือกที่เก็บไฟล์เป็น C:\AppServ\www กดNEXT


5 ต่อไปก็ใส่ Url ของเรานะครับ ใส่ตามนี้เลย http://localhost/ กด NEXT


6  หน้าต่อไปคลิ๊ก No เพราะเราจะทดสอบเฉพาะในเครื่องเราก่อน



7 คลิ๊ก Done ก็จะเสร็จ ขั้นตอนแล้ว


ถึงตอนนี้เพื่อนๆก็จะสามารถทดสอบการเขียน โปรแกรมด้วยPHP ในโปรแกรม Dreamweaver ของเพื่อนๆได้แล้ว