Dune Think

แก้ไขรหัสผ่าน root ของ MySQL

2011-09-27T09:21:00.001+07:00

MySQL: Resetting the Root Password: Generic Instructions

The preceding sections provide password-resetting instructions for Windows and Unix systems. Alternatively, on any platform, you can set the new password using the mysql client (but this approach is less secure):

Stop mysqld and restart it with the --skip-grant-tables option. This enables anyone to connect without a password and with all privileges. If you normally start the server with the --old-passwords option, include that option as well.

Connect to the mysqld server with this command:

shell> mysql
Issue the following statements in the mysql client. Replace the password with the password that you want to use.

mysql> UPDATE mysql.user SET Password=PASSWORD('MyNewPass')
-> WHERE User='root';
mysql> FLUSH PRIVILEGES;
The FLUSH statement tells the server to reload the grant tables into memory so that it notices the password change.

You should now be able to connect to the MySQL server as root using the new password. Stop the server and restart it normally
(without the --skip-grant-tables option).

การติดตั้ง SUN-Oracle Java 1.7.0 บน CentOS 6.0 (HowTo Install SUN-Oracle Java 1.7.0 on CentOS 6.0)

2011-09-02T00:39:00.000+07:00

การติดตั้ง SUN-Oracle Java 1.7.0 บน CentOS 6.0 (HowTo Install SUN-Oracle Java 1.7.0 on CentOS 6.0)

Step-1: ตรวจสอบเวอร์ชั่นของ Java บน CentOS จะเห็นได้ว่าเป็น Java OpenJDK
[root@bitcentos]# java -version
java version "1.6.0_17"
OpenJDK Runtime Environment (IcedTea6 1.7.9) (rhel-1.36.b17.el6_0-x86_64)
OpenJDK 64-Bit Server VM (build 14.0-b16, mixed mode)

Step-2: เปลี่ยนโฟลเดอร์ไปที่ /usr/src
[root@bitcentos]# cd /usr/src

Step-3: สร้างโฟลเดอร์ /usr/src/downloads
[root@bitcentos]# mkdir downloads

Step-4: เปลี่ยนโฟลเดอร์ไปที่ /usr/src/downloads เพื่อจัดเก็บไฟล์ดาวน์โหลด Java ลงที่โฟลเดอร์นี้
[root@bitcentos]# cd downloads

Step-5: ตรวจสอบโฟลเดอร์ปัจจุบัน ด้วยคำสั่ง pwd
[root@bitcentos]# pwd
/usr/src/downloads

Step-6: ดาวน์โหลดไฟล์ RPM ชุดติดตั้ง jdk เวอร์ชั่น 1.7.0 แบบ 64 บิต ด้วยคำสั่ง curl
[root@bitcentos]# curl -L -O 'http://download.oracle.com/otn-pub/java/jdk/7/jdk-7-linux-x64.rpm'
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 77.9M 100 77.9M 0 0 1183k 0 0:01:07 0:01:07 --:--:-- 1035k

Notes: รูปแบบคำสั่งและ URL สำหรับดาวน์โหลดชุดติดตั้ง Java อื่นๆ
- ชุดติดตั้ง jdk เวอร์ชั่น 1.7.0 แบบ 32 บิต
# curl -L -O 'http://download.oracle.com/otn-pub/java/jdk/7/jdk-7-linux-i586.rpm'
- ชุดติดตั้ง jre เวอร์ชั่น 1.7.0 แบบ 64 บิต
# curl -L -O 'http://download.oracle.com/otn-pub/java/jdk/7/jre-7-linux-x64.rpm'
- ชุดติดตั้ง jre เวอร์ชั่น 1.7.0 แบบ 32 บิต
# curl -L -O 'http://download.oracle.com/otn-pub/java/jdk/7/jre-7-linux-i586.rpm'
- ชุดติดตั้ง jre เวอร์ชั่น 1.6.0 แบบ 64 บิต
# curl -L -O 'http://download.oracle.com/otn-pub/java/jdk/6u27-b07/jre-6u27-linux-x64-rpm.bin'
- ชุดติดตั้ง jre เวอร์ชั่น 1.6.0 แบบ 32 บิต
# curl -L -O 'http://download.oracle.com/otn-pub/java/jdk/6u27-b07/jre-6u27-linux-i586-rpm.bin'

Step-7: ติดตั้ง jdk เวอร์ชั่น 1.7.0 แบบ 64 บิต ด้วยคำสั่ง yum
[root@bitcentos]# yum --nogpgcheck localinstall jdk-7-linux-x64.rpm

Step-8: ลงทะเบียน Java Compiler เวอร์ชั่น 1.7.0 แบบ 64 บิต ด้วยคำสั่ง alternatives
[root@bitcentos]# /usr/sbin/alternatives --install "/usr/bin/javac" "javac" "/usr/java/jdk1.7.0/bin/javac" 3

Step-9: ลงทะเบียน Java Runtime Environment (JRE) เวอร์ชั่น 1.7.0 แบบ 64 บิต ด้วยคำสั่ง alternatives
[root@bitcentos]# /usr/sbin/alternatives --install "/usr/bin/java" "java" "/usr/java/jdk1.7.0/bin/java" 4

Step-10: สวิทช์คอมไพเลอร์ของ Java Development Kit (JDK) ของ CentOS ให้ใช้ SUN (Oracle) JDK แทน OpenJDK โดยการเลือกข้อ (2) - /usr/java/jdk1.7.0/bin/javac
[root@bitcentos]# /usr/sbin/alternatives --config javac

There are 2 programs which provide 'javac'.
Selection Command
-----------------------------------------------
*+ 1 /usr/lib/jvm/java-1.6.0-openjdk.x86_64/bin/javac
2 /usr/java/jdk1.7.0/bin/javac

Enter to keep the current selection[+], or type selection number: 2

Step-11: ตรวจสอบเวอร์ชั่น Java Compiler
[root@bitcentos]# javac -version
javac 1.7.0

Step-12: สวิทช์คำสั่ง Java Runtime Environment (JRE) ของ CentOS ให้ใช้ของ SUN (Oracle) JRE แทน OpenJRE โดยเลือกข้อ (4) - /usr/java/jdk1.7.0/bin/java
[root@bitcentos]# /usr/sbin/alternatives --config java

There are 4 programs which provide 'java'.
Selection Command
-----------------------------------------------
1 /usr/lib/jvm/jre-1.5.0-gcj/bin/java
*+ 2 /usr/lib/jvm/jre-1.6.0-openjdk.x86_64/bin/java
3 /usr/java/jdk1.7.0/bin/javac
4 /usr/java/jdk1.7.0/bin/java

Enter to keep the current selection[+], or type selection number: 4

Step-13: ตรวจสอบเวอร์ชั่น Java Runtime Environment (JRE)
[root@bitcentos]# java -version
java version "1.7.0"
Java(TM) SE Runtime Environment (build 1.7.0-b147)
Java HotSpot(TM) 64-Bit Server VM (build 21.0-b17, mixed mode)

Good Luck!

การเซ็ต PHPBB ให้ใช้ Google SMTP ในการส่งออกอีเมล์

2011-08-21T13:42:00.001+07:00

ต้องเริ่มจาก...การไปสมัคร/สร้าง ชื่อผู้ใช้ของ gmail มาก่อน เพื่อนำมาระบุ ชื่อผู้ใช้/รหัสผ่าน ในหน้า ผู้ดูแลระบบ (หน้าหลัก ACP) ของ PHPBB
เว็บบอร์ด PHPBB จะใช้ชื่อผู้ใช้ gmail นี้ในการส่งเมล์ขาออกเสมอ
ในที่นี้่ไปสมัครมาแล้ว ชื่อผู้ใช้: dunesmtp@gmail.com รหัสผ่าน: 123456 (รหัสผ่านง่ายไปหรือเปล่า :-)

หลังจากนั้นเข้าไปที่หน้า ผู้ดูแลระบบ (หน้าหลัก ACP) > ทั่วไป > การตั้งค่าอีเมล์

Use SMTP server for e-mail (ที่อยู่ SMTP เซิร์ฟเวอร์): Yes (ใช่)
SMTP server address (อยู่ SMTP เซิร์ฟเวอร์): tls://smtp.gmail.com หรือ ssl://smtp.gmail.com
SMTP server port (SMTP เซิร์ฟเวอร์พอร์ต): 465
Authentication method for SMTP (วิธีการตรวจสอบสำหรับ SMTP): PLAIN
SMTP username (ชื่อผู้ใช้ SMTP): ชื่อผู้ใช้@gmail.com
SMTP password (รหัสของ SMTP): รหัสผ่านของชื่อผู้ใช้ gmail

ทดสอบกับ PHPBB ด้วยการลองสมัครสมาชิก PHPBB แล้ว ให้ส่งเมล์แจ้งเพื่อ activate PHPBB account

ลองทำความเข้าใจดู

องค์ประกอบของ Business Intelligence ที่จะดำเนินการเพิ่มเติมใน PROVIS Report ปีงบประมาณ 2554

2010-09-09T01:47:00.000+07:00

คำว่า Business Intelligence จะประกอบไปด้วยระบบข้อมูล และโปรแกรมแอพพลิเคชั่น ด้านการวิเคราะห์ มากมายหลายระบบ เช่น
- ดาต้าแวร์เฮ้าส์ (Data Warehouse) - รายการนี้มีแล้ว
- ดาต้ามาร์ท (Data Mart) - รายการนี้มีแล้ว
- การทำเหมืองข้อมูล (Data Mining) - รายการนี้ยังไม่มี
- การแก้ปัญหาทางคณิตศาสตร์ (Operations Research & Numerical Methods) - รายการนี้ยังไม่มี
- เครื่องมือที่ใช้ในการวิเคราะห์ข้อมูลในหลายมิติ (OLAP) แบบประมวลผลทันทีที่ป้อนข้อมูลเข้าไป - รายการนี้มีแล้ว ใช้ jasperserver OLAP
- ระบบสืบค้นและออกรายงานต่างๆ (Search, Report) - รายการนี้มีแล้ว

JasperServer - ปิด Refine filters ออกจากแถบค้นหา (search box) ด้านซ้ายหน้าจอ

2010-09-08T04:08:00.000+07:00

1. แก้ไขไฟล์ WEB0INF/applicationContext-search.xml หรือ WEB0INF/applicationContext-search-pro.xml:

เดิม:
แก้เป็น:

2. เปิดไฟล์ stylesheets/search.css ค้นหาคำว่า #filtersTable
เดิม:
#filtersTable {
width:100%;
border-top:none !important;
}

แก้เป็น:
#filtersTable {
width:100%;
border-top:none !important;
display:none;
}

ข้อมูลจำนวนประชากร , ข้อมูลจำนวนประชากร (แยกตามอายุ) จากเว็บไซต์ สำนักทะเบียนราษฎร์ กระทรวงมหาดไทย

2010-09-05T00:34:00.001+07:00

ดาวน์โหลดได้จากเว็บไซต์ สำนักทะเบียนราษฎร์ กระทรวงมหาดไทย
url http://www.dopa.go.th/TH/service.php
- ข้อมูลจำนวนประชากร ปี พ.ศ. 2536 - พ.ศ.2551
- ข้อมูลจำนวนประชากร (แยกตามอายุ) ปี พ.ศ. 2537 - พ.ศ.2551

ข้อมูลจำนวนประชากรแยกรายอายุ ได้จากเว็บไซต์ สำนักทะเบียนราษฎร์ กระทรวงมหาดไทย

2010-09-05T00:16:00.001+07:00

ดาวน์โหลด ข้อมูลจำนวนประชากรแยกรายอายุ ปี 2537 - 2551
ได้จากเว็บไซต์ สำนักทะเบียนราษฎร์ กระทรวงมหาดไทย
url http://www.dopa.go.th/xstat/xstat.html

วิธีเก็บไฟล์ .rpm จากการติดตั้งด้วย yum และ วิธีติดตั้งด้วย yum จากไฟล์แพ็กเกจ rpm ภายในเซิร์ฟเวอร์

2010-09-01T08:29:00.000+07:00

* วิธีเก็บไฟล์ rpm ที่ได้จากการติดตั้งด้วยคำสั่ง yum install
# nano /etc/yum.conf
แก้ไขค่า keepcache=0 เป็น keepcache=1
เมื่อเรียกคำส่ง yum install
โปรแกรมจะเก็บไฟล์ rpm ไว้ในไดเร็คทอรี่ /var/cache/yum/x86_64/12/updates/packages

* วิธีติดตั้งโปรแกรมด้วย yum จากไฟล์แพ็กเกจ rpm ภายในเซิร์ฟเวอร์
# yum localinstall *.rpm

คนถามกันจัง อัปเดตโปรแกรมบนวินโดว์ 7 หรือ วิสต้า ไม่ได้

2010-08-28T09:09:00.000+07:00

ระบบปฏิบัติการ วินโดว์ 7/วิสต้า ปกติแล้ว จะไม่อนุญาตให้เขียนไฟล์ลงที่ไดรว์ C: เป็นเหตุผลเรื่องความปลอดภัยของระบบ
นอกจากเราจะมั่นใจว่า ต้องการทำอะไรจริงๆ นั่นหมายถึง เราต้องเป็นผู้ดูแลระบบ หรือ ผู้ใช้ (username/account) Administrator ของวินโดว์

หากเราล็อกอินเข้าใช้งานด้วยผู้ใช้ (username/account) Administrator ของวินโดว์ ก็จะสามารถดำเนินการในเครื่องคอมพิวเตอร์นั้นได้ทุกอย่าง รวมทั้งเรื่องการเขียนไฟล์ลงไดรว์ C: หรือ การอัปเดตโปรแกรม JHCIS ด้วย

แต่...หลายๆ คนยังไม่ทราบเลยว่า ขณะนั้นกำลังล็อกอินด้วยผู้ใช้ (username/account) ใดอยู่ เนื่องจากไม่ได้ติดตั้งวินโดว์เอง ไปให้ร้านซ่อมคอมพิวเตอร์ติดตั้งให้ หรือ ให้เพื่อนบ้านติดตั้งให้ เป็นต้น ก็ขอบอกเลยว่า ส่วนใหญ่ไม่ได้ล็อกอินเข้าใช้ด้วยผู้ใช้ Administrator

นั่นก็หมายถึง ส่วนใหญ่ก็จะพบปัญหาเรื่องการอัปเดตโปรแกรม JHCIS แน่นอน แต่เราก็มีวิธีแก้ไข

ระบบปฏิบัติการ วินโดว์ 7/วิสต้า แบบ 32 บิต (ส่วนใหญ่เรายังใช้งานแบบ 32 บิต) โปรแกรม JHCIS ติดตั้งที่โฟลเดอร์ C:\Program Files\JHCIS
ระบบปฏิบัติการ วินโดว์ 7/วิสต้า แบบ 64 บิต โปรแกรม JHCIS ติดตั้งที่โฟลเดอร์ C:\Program Files (x86)\JHCIS

กรณีหากเป็นปัญหาเรื่องการอนุญาต (permission) ในการเขียนไฟล์ลงโฟลเดอร์ C:\Program Files\JHCIS (หรือ C:\Program Files (x86)\JHCIS ในวินโดว์ 7/วิสต้า แบบ 64 บิต) เราสามารถไปเปลี่ยนการอนุญาต (permission) ของโฟลเดอร์ที่ว่ามาได้

:idea: คลิกเม้าส์ขวาที่โฟลเดอร์ C:\Program Files\JHCIS > เลือกเมนู properties
:idea: เมื่อไดอะล็อก jhcis Properties ปรากฏขึ้นมา ให้คลิกแท็บ Security แล้ว คลิกปุ่ม Edit
:idea: เมื่อปรากฏไดอะล็อก Permissions fot jhcis ที่ช่อง Group or user names: ให้คลิกที่รายการ Users (COMPUTERNAME\Users) แล้วไปที่ช่อง Permissions for Users บรรทัด Full Control คอลัมน์ Allow แล้วคลิกปุ่ม Apply ด้านล่างของไดะอะล็อก

หากเป็นปัญหาเรื่องการอนุญาต (permission) ในการเขียนไฟล์หรือโฟลเดอร์ วิธีนี้ก็จะแก้ปัญหาได้

การกู้ข้อมูลจากฐานข้อมูล MySQL Storage Engine แบบ InnoDB (Forcing InnoDB Recovery)

2010-08-15T17:06:00.002+07:00

เริ่มมากันแล้ว ปัญหาฐานข้อมูล InnoDB เสีย
อ้างอิง: http://dev.mysql.com/doc/refman/5.0/en/forcing-recovery.html

1) เปิดไฟล์คอนฟิกของ MySQL ดาต้าเบสเซิร์ฟเวอร์ ด้วยโปรแกรม Notepad หรือ Wordpad
C:\Program Files\JHCIS\MySQL\my.ini
ค้นหา [mysqld] แล้วแทรกบรรทัด innodb_force_recovery = 4 ลงไป
บันทีกการแก้ไข

[mysqld]
innodb_force_recovery = 4

2) รีสตาร์ตเซอร์วิสของ MySQL ดาต้าเบสเซิร์ฟเวอร์
คลิก Start > All Programs > MySQL-JHCIS > MySQL Service Stop
คลิก Start > All Programs > MySQL-JHCIS > MySQL Service Start

3) หากเซอร์วิสของ MySQL ดาต้าเบสเซิร์ฟเวอร์ ทำงานได้ปกติ ก็จะสามารถติดต่อฐานข้อมูลได้ ให้ทำการสำรองข้อมูล (Backup) ออกมาด้วยโปรแกรม MySQL Administrator จะได้ไฟล์ jhcisdb.sql

4) นำไฟล์ jhcisdb.sql ที่ได้จากการสำรองข้อมูล (Backup) ไปทดสอบนำเข้า (Restore) ที่เครื่องคอมพิวเตอร์อื่น (ต้องหามา) เพื่อให้มั่นใจว่า ไฟล์สำรองข้อมูลนั้นใช้ได้

5) หากมั่นใจว่าไฟล์สำรองข้อมูลที่ทำมาใช้การได้ ให้ทำการลบฐานข้อมูล jhcisdb เดิม ทิ้งไป
คลิก Start > All Programs > MySQL-JHCIS > MySQL Administrator คลิกเมนู Catalogs คลิกเม้าส์ปุ่มขวาที่รายการ jhcisdb แล้วเลือกเมนู Drop Schema

6) นำไฟล์ jhcisdb.sql ที่ได้จากการสำรองข้อมูล (Backup) มานำเข้า (Restore) กลับเข้าไปในเครื่องคอมพิวเตอร์ที่จัดเก็บฐานข้อมูลระบบงาน JHCIS

7) เปิดไฟล์คอนฟิกของ MySQL ดาต้าเบสเซิร์ฟเวอร์ ด้วยโปรแกรม Notepad หรือ Wordpad
C:\Program Files\JHCIS\MySQL\my.ini
ค้นหา [mysqld] แล้วลบบรรทัด innodb_force_recovery = 4 ออกจากไฟล์
บันทีกการแก้ไข

8) รีสตาร์ตเซอร์วิสของ MySQL ดาต้าเบสเซิร์ฟเวอร์
คลิก Start > All Programs > MySQL-JHCIS > MySQL Service Stop
คลิก Start > All Programs > MySQL-JHCIS > MySQL Service Start

เสร็จสิ้นขั้นตอน ก็คาดหวังว่า เครื่องคอมพิวเตอร์ของคุณ พร้อมกับ ฐานข้อมูล jhcisdb จะสามารถใช้งานได้ปกติ

JasperServer Installation on Linux

2010-08-14T23:45:00.000+07:00

http://www.raj2u.net/jasperserver-installation-on-linux

Dulyawat's Blog: การเซ็ตให้รายงาน JasperServer ส่งออกเป็นไฟล์ PDF ที่มีฟอนต์ภาษาไทย

2010-08-13T14:32:00.000+07:00

Dulyawat's Blog: การเซ็ตให้รายงาน JasperServer ส่งออกเป็นไฟล์ PDF ที่มีฟอนต์ภาษาไทย

การเซ็ตให้รายงาน JasperServer ส่งออกเป็นไฟล์ PDF ที่มีฟอนต์ภาษาไทย

2010-08-13T12:41:00.006+07:00

เซ็ตให้รายงาน JasperServer ส่งออกเป็นไฟล์ PDF ที่มีฟอนต์ภาษาไทย ได้ใน 4 ขั้นตอน
1. สร้างไฟล์ jasperreports_extension.properties ในโฟลเดอร์ WEB-INF/classes ของ jasperserver

Windows: C:\Program Files\Apache Software Foundation\tomcat 6.0\webapps\jasperserver\WEB-INF\classes\
Linux Fedora 12: /usr/share/tomcat6/webapps/jasperserver/WEB-INF/classes/

เขียนโค้ดบรรทัดต่อไปนี้ลงในไฟล์

jasperreports_extension.properties
net.sf.jasperreports.extension.registry.factory.fonts=net.sf.jasperreports.extensions.SpringExtensionsRegistryFactory
net.sf.jasperreports.extension.fonts.spring.beans.resource=fonts.xml

2. สร้างไฟล์ fonts.xml ภายใต้โฟลเดอร์ WEB-INF/classes ของ jasperserver (โฟลเดอร์เดียวกับขั้นตอน 1)

เขียนโค้ดบรรทัดต่อไปนี้ลงในไฟล์

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-2.0.xsd">
<bean id="TahomaFontFamily" class="net.sf.jasperreports.engine.fonts.SimpleFontFamily">
<property name="name" value="Tahoma"/>
<property name="normal" value="fonts/tahoma.ttf"/>
<property name="pdfEncoding" value="Identity-H"/>
</bean>
</beans>

3. สร้างโฟลเดอร์ fonts ภายใต้โฟลเดอร์ WEB-INF/classes ของ jasperserver (โฟลเดอร์เดียวกับขั้นตอน 1) จะได้โฟลเดอร์ WEB-INF/classes/fonts

4. ก็อปปี้หรืออัปโหลดไฟล์ฟอนต์ที่ต้องการ เช่น tahoma.ttf, tahomabd.ttf ไปวางที่โฟลเดอร์ WEB-INF/classes/fonts ของ jasperserver (โฟลเดอร์ที่ได้จากขั้นตอน 3)

เสร็จสิ้นขั้นตอน

การแก้ปัญหา JasperServer เกี่ยวกับ webHelpModule is undefined

2010-08-12T22:34:00.000+07:00

แก้บรรทัดเหล่านี้ ก็ได้แล้ว

jpivot\ja-pro.js(194): $('helpLink').onclick = webHelpModule.displayWebHelp;

WEB-INF\jsp\olap\viewOlap.jsp(107): webHelpModule.currentContext = "analysis";
WEB-INF\jsp\rolesFlow\roleManager.jsp(65): webHelpModule.currentContext="admin";
WEB-INF\jsp\search\results.jsp(76): webHelpModule.currentContext = "search";
WEB-INF\jsp\userFlow\userManager.jsp(65): webHelpModule.currentContext="admin";

โค้ดจาวา แสดงชื่อ CPU

2010-07-08T23:50:00.001+07:00

/*
* CpuInfo.java
*
*/
package pcu.config;

import org.hyperic.sigar.CpuPerc;
import org.hyperic.sigar.Sigar;
import org.hyperic.sigar.SigarLoader;
import org.hyperic.sigar.SigarException;
import org.hyperic.sigar.cmd.Shell;
import org.hyperic.sigar.cmd.SigarCommandBase;

public class CpuInfo extends SigarCommandBase {

public boolean displayTimes = true;

public CpuInfo(Shell shell) {
super(shell);
}

public CpuInfo() {
super();
}

public String getUsageShort() {
return "Display cpu information";
}

private void output(CpuPerc cpu) {
println("User Time....." + CpuPerc.format(cpu.getUser()));
println("Sys Time......" + CpuPerc.format(cpu.getSys()));
println("Idle Time....." + CpuPerc.format(cpu.getIdle()));
println("Wait Time....." + CpuPerc.format(cpu.getWait()));
println("Nice Time....." + CpuPerc.format(cpu.getNice()));
println("Combined......" + CpuPerc.format(cpu.getCombined()));
println("Irq Time......" + CpuPerc.format(cpu.getIrq()));
if (SigarLoader.IS_LINUX) {
println("SoftIrq Time.." + CpuPerc.format(cpu.getSoftIrq()));
println("Stolen Time...." + CpuPerc.format(cpu.getStolen()));
}
println("");
}

public void output(String[] args) throws SigarException {
org.hyperic.sigar.CpuInfo[] infos = this.sigar.getCpuInfoList();

CpuPerc[] cpus = this.sigar.getCpuPercList();

org.hyperic.sigar.CpuInfo info = infos[0];
long cacheSize = info.getCacheSize();
println("Vendor........." + info.getVendor());
println("Model.........." + info.getModel());
println("Mhz............" + info.getMhz());
println("Total CPUs....." + info.getTotalCores());
if ((info.getTotalCores() != info.getTotalSockets()) ||
(info.getCoresPerSocket() > info.getTotalCores()))
{
println("Physical CPUs.." + info.getTotalSockets());
println("Cores per CPU.." + info.getCoresPerSocket());
}

if (cacheSize != Sigar.FIELD_NOTIMPL) {
println("Cache size...." + cacheSize);
}
println("");

if (!this.displayTimes) {
return;
}

for (int i=0; i println("CPU " + i + ".........");
output(cpus[i]);
}

println("Totals........");
output(this.sigar.getCpuPerc());
}

public static void main(String[] args) throws Exception {
//Determine System Architechture
String osName = System.getProperty("os.name");
String osArch = System.getProperty("os.arch");
String sigarFile = "";
if(osArch.toLowerCase().contains("x86")) {
if(osName.toLowerCase().contains("linux")) sigarFile = "libsigar-x86-linux.so";
else if(osName.toLowerCase().contains("windows")) sigarFile = "sigar-x86-winnt.dll";
} else if(osArch.toLowerCase().contains("amd64")) {
if(osName.toLowerCase().contains("linux")) sigarFile = "libsigar-amd64-linux.so";
else if(osName.toLowerCase().contains("windows")) sigarFile = "sigar-amd64-winnt.dll";
}
//Load library
String userDir = System.getProperty("user.dir");
System.load( (userDir+"/lib/lib_hyperic-sigar-1.6.3/"+sigarFile) );

//Execute
new CpuInfo().processCommand(args);
}
}

จะแสดงผลลัพธ์

Model..........Core(TM)2 Duo CPU P8700 @ 2.53GHz
Mhz............2527
Total CPUs.....2
Physical CPUs..1
Cores per CPU..2

CPU 0.........
User Time.....30.3%
Sys Time......36.3%
Idle Time.....33.2%
Wait Time.....0.0%
Nice Time.....0.0%
Combined......66.7%
Irq Time......0.0%

CPU 1.........
User Time.....33.2%
Sys Time......36.3%
Idle Time.....30.3%
Wait Time.....0.0%
Nice Time.....0.0%
Combined......69.6%
Irq Time......0.0%

Totals........
User Time.....6.4%
Sys Time......0.0%
Idle Time.....93.6%
Wait Time.....0.0%
Nice Time.....0.0%
Combined......6.4%
Irq Time......0.0%

บทที่ 12 การสร้างระบบแก้ไขข้อมูล

2010-06-28T01:04:00.001+07:00

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

รูปแสดงไฟล์ที่เกี่ยวข้องในระบบแก้ไขข้อมูล

ระบบแก้ไขข้อมูลที่จะยกตัวอย่างนี้ ประกอบด้วยไฟล์ 2 ไฟล์ ดังรูป

update.php ประกอบด้วย ฟอร์มสำหรับแสดงข้อมูลเดิมเพื่อให้ผู้ใช้ปรับปรุงแก้ไขข้อมูล
และ สคริปต์ PHP สำหรับจัดเก็บข้อมูลที่แก้ไขปรับปรุงแล้วลงตารางของฐานข้อมูล
updateok.php สำหรับแสดงข้อความแจ้งผลการแก้ไขปรับปรุงข้อมูล

ขั้นตอนการสร้างระบบแก้ไขข้อมูลที่ยกมาอธิบายในที่นี้ แบ่งเป็นขั้นตอนดังต่อไปนี้

การสร้างฟอร์มสำหรับแก้ไขข้อมูล
การสร้าง recordset สำหรับค้นหาข้อมูลเร็คคอร์ดที่ต้องการแก้ไข
การแทรกสคริปต์สำหรับแสดงข้อมูลเดิมในฟอร์ม HTML
การแทรก Update Record Server Behavior ลงในเว็บเพจ
การส่งและรับค่า URL Parameter เพื่อระบุเร็คคอร์ดที่ต้องการแก้ไข
การแสดงผลการแก้ไขข้อมูล
การใช้งานระบบแก้ไขข้อมูล

(1) การสร้างฟอร์มสำหรับแก้ไขข้อมูล

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

ขั้นตอนการสร้างฟอร์มสำหรับแก้ไขข้อมูล:

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

รูปแสดงแบบฟอร์มสำหรับแก้ไขข้อมูล

NOTE:

เปิดไฟล์ htmlform.htm จากขั้นตอนการสร้างฟอร์ม HTML หรือ \PHPWEB\labs\solutions\lab03_htmlform\htmlform.htm

ขึ้นมาแล้วบันทึกเป็นไฟล์ PHPWEB\update.php (หากปรากฏไดอะล็อก Update Links? ให้คลิก No)

ปรับแต่งรูปแบบของเว็บเพจโดยการแทรกไฟล์รูปภาพ และ ข้อความ
- กำหนด Document Title เป็น "Update an employee record" (ดังรูป)
- หัวข้อของเว็บเพจ ให้ใช้ไฟล์ images/title_update.gif (ดังรูป)

หน้าจอ Dreamweaver ที่เปิดไฟล์ update.php ให้ทำการกำหนดชื่อของฟอร์ม โดยคลิกแท็ก <FORM> ที่ Tag Selector

รูปแสดงการคลิกเลือกแท็ก <FORM> จาก Tag Selector
เปิดไดอะล็อก Properties โดยคลิกเมนู Window > Properties หลังจากนั้นให้พิมพ์ชื่อฟอร์ม frmUpdate ที่ช่อง Form name

รูปแสดง Property ของแท็ก <FORM>

ค่าของไดอะล็อก	ค่าที่กำหนด
Form name	fmUpdate

ตารางแสดงการกำหนด Property ของแท็ก <FORM>

จะเห็นได้ว่า ในการกำหนดคุณสมบัติของฟอร์ม HTML เรากำหนดเฉพาะคุณสมบัติในช่อง Form Name เท่านั้น
ส่วนคุณสมบัติในช่องอื่นๆ ในขั้นตอนต่อไป Dreamweaver จะกำหนดให้เราเองโดยอัตโนมัติ

(2) การสร้าง recordset สำหรับค้นหาข้อมูลเร็คคอร์ดที่ต้องการแก้ไข

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

ขั้นตอนการสร้าง recordset สำหรับค้นหาข้อมูลเร็คคอร์ดที่ต้องการแก้ไข:

คลิกที่เมนู Window > Server Behaviors หลังจากนั้นให้คลิกปุ่มเครื่องหมายบวก และเลือกรายการ Recordset

รูปแสดงการคลิกเลือกเมนู Recordset จาก Server Behaviors

เมื่อปรากฏไดอะล็อก Recordset ขึ้นมา ให้กำหนดค่าต่างๆ ดังรายละเอียดข้างล่างนี้ หลังจากนั้นคลิกปุ่ม OK

รูปแสดงไดอะล็อก Recordset

ค่าของไดอะล็อก	ค่าที่กำหนด
Name	rsEmp
Connection	dbconn
Table	employees
Column	All
Filter	employeeid และ =
URL Parameter	empid

บันทึกไฟล์ update.php

(3) การแสดงข้อมูลเดิมในฟอร์ม HTML

การแสดงข้อมูลลงในฟอร์ม ก็คือการแทรกสคริปต์สำหรับนำเอาฟิลด์จากการสร้าง Recordset ในขั้นตอนการค้นหาข้อมูลมา
แสดงผลในฟอร์มของเว็บเพจ เพื่อแสดงข้อมูลปัจจุบัน ก่อนที่จะแก้ไขปรับปรุง โดยวิธีการจะคล้ายกับขั้นตอนการทำระบบแสดงผลข้อมูล
ในไฟล์ detail.php

ขั้นตอนการแทรกสคริปต์สำหรับแสดงข้อมูลเดิมในฟอร์ม HTML:

เริ่มต้นเปิดโปรแกรม Dreamweaver ไปที่ไฟล์ update.php คลิกที่เมนู Window > Bindings หลังจากนั้นให้คลิกเครื่องหมายบวก
หน้ารายการ Recordset (rsEmp) จะปรากฏชื่อฟิลด์ ให้คลิกเลือกและแทรกฟิลด์ลงในอ็อบเจ็คต์ของฟอร์มเพื่อแสดงผลข้อมูล ดังรูปด้านล่าง

รูปการแสดงผลข้อมูลในฟอร์ม (Bindings)

บันทึกไฟล์ update.php ก็เป็นอันเสร็จการแสดงผลข้อมูลลงในฟอร์ม

(4) การแทรก Update Record Server Behavior ลงในเว็บเพจ

การแทรก Update Record Server Behavior ก็คือการแทรกสคริปต์ PHP เพื่อสั่งให้บันทึกการแก้ไขข้อมูลลงตารางของฐานข้อมูล

ขั้นตอนการแทรก Update Record Server Behavior ลงในเว็บเพจ:

เริ่มต้นที่โปรแกรม Dreamweaver เปิดไฟล์ update.php หลังจากนั้นให้คลิกเม้าส์ที่ตำแหน่งใดๆ ภายใต้เส้นประสีแดง ที่เป็นขอบเขตของฟอร์ม
คลิกเมนู Insert > Form > Hidden Field หลังจากนั้นคลิกเม้าส์ที่อ็อบเจ็คต์ Hidden Field จะปรากฏไดอะล็อก Properties ของ Hidden Field
(หากไม่ปรากฏไดอะล็อก Properties ให้คลิกที่เมนู Windows > Properties) และให้กำหนดค่าในไดอะล็อกดังต่อไปนี้

รูปแสดงการกำหนด Property ของ Hidden Field "empid"

ค่าของไดอะล็อก	ค่าที่กำหนด
HiddenField	empid
Value	<?php echo $row_rsEmp['employeeid']; ?>

ตารางแสดงการกำหนด Property ของ Hidden Field "empid"

เปิดแถบ Server Behaviors โดยคลิกเมนู Window > Server Behaviors แล้วคลิกที่ปุ่มเครื่องหมายบวก
เลือกรายการUpdate Record จากเมนู

ตารางแสดง Update Record Server Behaviors
เมื่อปรากฏไดอะล็อก Update Record ให้กำหนดค่าต่างๆ มีดังต่อไปนี้

รูปแสดงการกำหนดค่าต่างๆ ในไดอะล็อก Update Record

ค่าของไดอะล็อก	ค่าที่กำหนด
Submit Values From	fmUpdate
Connection	dbconn
Update Table	employees
Columns	จับคู่ฟิลด์ของฐานข้อมูลกับอ็อบเจ็คต์ของฟอร์มดังต่อไปนี้ employeeid -> FORM.empid firstname -> FORM.firstname lastname -> FORM.lastname birthdate -> FORM.birthdate startdate -> FORM.startdate deptid -> FORM.deptid phone -> FORM.phone extension -> FORM.extension email -> FORM.email notes -> FORM.notes photo -> FORM.photo
After Updating, Go To	updateok.php

ตารางแสดงการกำหนดค่าต่างๆ ในไดอะล็อก Update Record

บันทึกไฟล์ update.php ก็เป็นอันเสร็จขั้นตอนการแทรก Update Record Server behavior

(5) การส่งและรับค่า URL Parameter เพื่อระบุเร็คคอร์ดที่ต้องการแก้ไข

ขั้นตอนนี้ ก็คือการทำให้ไฟล์เว็บเพจ 2 ไฟล์ list.php และ update.php สามารถเชื่อมโยงเพื่อส่งและรับค่า URL Parameter กันได้นั่นเอง

ขั้นตอนการส่งและรับค่า URL Parameter เพื่อระบุเร็คคอร์ดที่ต้องการแก้ไข:

เริ่มต้นที่โปรแกรม Dreamweaver เปิดไฟล์ list.php ขึ้นมา แล้วลากเม้าส์ทำไฮไลต์ข้อความ "แก้ไข" ดังรูป

รูปแสดงการไฮไลต์ข้อความ "แก้ไข"

เปิดไดอะล็อก Properties โดยคลิกที่เมนู Window > Properties จะปรากฏไดอะล็อก Properties ขึ้นมา ให้คลิกไอคอนรูป
Folder สีเหลือง (Browse for File) ที่ตำแหน่งช่อง Link เพื่อสร้างไฮเปอร์ลิงค์สำหรับ URL Parameter ไปหาไฟล์ update.php

รูปแสดง Property ของลิงค์ "แก้ไข"

เมื่อปรากฏไดอะล็อก Select File ขึ้นมา ให้คลิกเลือกไฟล์ update.php เป็นการกำหนดว่าจะส่งค่า URL Parameter ไปที่ไฟล์นี้
หลังจากนั้นให้คลิกปุ่ม Parameters… ที่ด้านล่างของไดอะล็อก Select File เพื่อกำหนดการส่งค่า URL Parameter

รูปแสดงขั้นตอนการสร้างลิงค์ พร้อมกับการกำหนด "Parameters…"
เมื่อปรากฏไดอะล็อก Parameters ขึ้นมา ที่ช่อง Name ให้พิมพ์ชื่อ URL Parameter ที่ต้องการจะส่งไป
ในที่นี้ให้เราพิมพ์ empid หลังจากนั้นให้ไปที่ช่อง Value เพื่อกำหนดค่าที่จะส่งไป ในที่นี้เราต้องการกำหนดค่า
ให้เปลี่ยนไปแบบ Dynamic ตามข้อมูลที่แสดงในแต่ละเร็คคอร์ด ให้คลิกปุ่ม Dynamic Data ที่ช่อง Value

รูปแสดงขั้นตอนการสร้างลิงค์ พร้อมกับการกำหนด "Parameters…"

ค่าของไดอะล็อก	ค่าที่กำหนด
Name	empid
Value	<?php echo $row_rsEmp['employeeid']; ?>

ตารางแสดงการกำหนดค่า URL Parameter ในไดอะล็อก "Parameters"

เมื่อปรากฏไดอะล็อก Dynamic Data ขึ้นมา ให้คลิกเลือกฟิลด์ employeeid จาก Recordset (rsEmp) หลังจากนั้นคลิกปุ่ม OK

รูปแสดงการเลือกฟิลด์ employeeid จาก Recordset

บันทึกไฟล์ list.php ก็เป็นเสร็จขั้นตอนการกำหนดการส่งค่า URL Parameter
ขั้นตอนสุดท้ายคือกำหนดให้ไฟล์ update.php รับค่า URL Parameter ที่ส่งมาจากไฟล์ list.php ซึ่งวิธีการทำนั้น
เราได้ทำผ่านมาแล้วให้ย้อนกลับไปดูในขั้นตอน "การสร้าง recordset สำหรับค้นหาข้อมูลเร็คคอร์ดที่ต้องการแก้ไข"
จะเห็นได้ว่า เราได้มีการเรียกใช้ URL Parameter "empid" ซึ่งก็คือค่า URL Parameter ที่ส่งไปจากไฟล์ list.php นั่นเอง

(6) การแสดงผลลัพธ์การแก้ไขข้อมูล

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

รูปแสดงการสร้างไฟล์ updateok.php

(7) การใช้งานระบบแก้ไขข้อมูล

เริ่มต้นโดยใช้โปรแกรม Dreamweaver เปิดไฟล์ list.php ขึ้นมา แล้วกดปุ่ม F12 โปรแกรม Internet Explorer
จะถูกเปิดขึ้นมาเรียกใช้งานไฟล์ list.php หลังจากนั้นให้คลิกปุ่ม "แก้ไข" เพื่อแก้ไขข้อมูลแต่ละเร็คคอร์ด เสร็จแล้วคลิกปุ่ม
Update เพื่อบันทึกข้อมูล รอดูผลที่จะแสดงจากไฟล์ updateok.php

บทที่ 11 การสร้างระบบเพิ่มข้อมูล

2010-06-28T00:53:00.001+07:00

ระบบเพิ่มข้อมูล คือเว็บเพจที่ทำหน้าที่ในการรับข้อมูลจากผู้ใช้ผ่านฟอร์ม และบันทึกการกรอกข้อมูลเข้าจัดเก็บในฐานข้อมูล
ในที่นี้จะประกอบด้วยไฟล์ 2 ไฟล์ ดังรูป

รูปแสดงไฟล์ที่เกี่ยวข้องกับระบบเพิ่มข้อมูล

insert.php ประกอบด้วยฟอร์มสำหรับเป็นแบบฟอร์มกรอกข้อมูลและสคริปต์สำหรับจัดเก็บข้อมูลลงตารางของฐานข้อมูล
insertok.php ประกอบด้วยข้อความแสดงผลการเพิ่มข้อมูล

ขั้นตอนการสร้างระบบเพิ่มข้อมูลที่ยกมาอธิบายในที่นี้ แบ่งเป็นขั้นตอนดังต่อไปนี้

การสร้างฟอร์มกรอกข้อมูล
การแทรก Insert Record Server Behavior ลงในเว็บเพจ
การสร้างเว็บเพจแสดงผลลัพธ์การเพิ่มข้อมูล
การใช้งานระบบเพิ่มข้อมูล

(1) การสร้างฟอร์มกรอกข้อมูล

การสร้างฟอร์มกรอกข้อมูล คือ ขั้นตอนการสร้างแบบฟอร์มให้ผู้ใช้เว็บแอพพลิเคชั่น นำข้อมูลมากรอกในแบบฟอร์ม
และส่งข้อมูลไปประมวลผลบนแอพพลิเคชั่นเซิร์ฟเวอร์ เพื่อบันทึกลงตารางของฐานข้อมูล

ขั้นตอนการสร้างฟอร์มกรอกข้อมูล:

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

รูปแสดงแบบฟอร์มกรอกข้อมูล

NOTE:

เปิดไฟล์ htmlform.htm จากขั้นตอนการสร้างฟอร์ม HTML หรือ \PHPWEB\labs\solutions\lab03_htmlform\htmlform.htm

ขึ้นมาแล้วบันทึกเป็นไฟล์ PHPWEB\insert.php (หากปรากฏไดอะล็อก Update Links? ให้คลิก No)

หน้าจอ Dreamweaver ที่เปิดไฟล์ insert.php ให้ทำการกำหนดชื่อของฟอร์ม โดยคลิกแท็ก <FORM> ที่ Tag Selector

รูปแสดงการคลิกเลือกแท็ก <FORM> จาก Tag Selector
เปิดไดอะล็อก Properties โดยคลิกเมนู Window > Properties หลังจากนั้นให้พิมพ์ชื่อฟอร์ม fmAdd ที่ช่อง Form name

ค่าของไดอะล็อก	ค่าที่กำหนด
Form name	fmAdd

ตารางแสดงการกำหนด Property ของแท็ก <FORM>

รูปแสดง Property ของแท็ก <FORM>

จะเห็นได้ว่า ในการกำหนดคุณสมบัติของฟอร์ม เราไม่จำเป็นต้องกำหนดค่าใดๆ ในช่อง Action และ Method
เนื่องจากในขั้นตอนต่อไป Dreamweaver จะสร้างให้เราเองโดยอัตโนมัติ

(2) การแทรก Insert Record Server Behavior ลงในเว็บเพจ

การแทรก Insert Record Server Behavior เป็นการแทรกสคริปต์ PHP เพื่อบันทึกข้อมูลลงตารางของฐานข้อมูล

ขั้นตอนการแทรก Insert Record Server Behavior ลงในเว็บเพจ:

เปิดแถบ Server Behaviors โดยคลิกเมนู Window > Server Behaviors แล้วคลิกที่ปุ่มเครื่องหมายบวก
เลือกรายการ Insert Record จากเมนู

ดังรูป

รูปแสดงการคลิกเลือกเมนู Insert Record จาก Server Behaviors

เมื่อปรากฏไดอะล็อก Insert Record ขั้นตอนต่อจากนี้ ก็จะเป็นการกำหนดค่าในไดอะล็อก Insert Record
ซึ่งรายละเอียดการกำหนดค่าต่างๆ มีดังต่อไปนี้

รูปแสดงไดอะล็อก Insert Record

ค่าของไดอะล็อก	ค่าที่กำหนด
Submit Values From	fmAdd
Connection	dbconn
Insert Table	employees
Columns	จับคู่ฟิลด์ของฐานข้อมูลกับอ็อบเจ็คต์ของฟอร์มดังต่อไปนี้ firstname -> firstname lastname -> lastname birthdate -> birthdate startdate -> startdate deptid -> deptid phone -> phone extension -> extension email -> email notes -> notes photo -> photo
After Inserting, Go To	insertok.php

ตารางแสดงการเลือกฟิลด์จากไดอะล็อก Insert Record เพื่อเพิ่มข้อมูล

บันทึกไฟล์ insert.php ก็เป็นอันเสร็จขั้นตอนการแทรก Insert Record Server behavior

(3) การสร้างเว็บเพจแสดงผลลัพธ์การเพิ่มข้อมูล

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

(4) การใช้งานระบบเพิ่มข้อมูล

เริ่มต้นโดยใช้โปรแกรม Dreamweaver เปิดไฟล์ insert.php ขึ้นมา แล้วกดปุ่ม F12 โปรแกรม Internet Explorer
จะถูกเปิดขึ้นมาเรียกใช้งานไฟล์ insert.php หลังจากนั้นให้ทดลองกรอกข้อมูลและคลิกปุ่ม Insert เพื่อบันทึกข้อมูล
เสร็จแล้วรอดูผลที่จะแสดงจากไฟล์ insertok.php

บทที่ 10 การสร้างระบบค้นหาข้อมูล

2010-06-28T00:44:00.001+07:00

ระบบค้นหาข้อมูล คือเว็บเพจที่ทำหน้าที่ในการเรียกค้นหาข้อมูลจากฐานข้อมูล และนำผลลัพธ์มาแสดงผลที่หน้าจอเว็บเพจ

รูปแสดงไฟล์ที่เกี่ยวข้องกับระบบค้นหาข้อมูล

ระบบค้นหาข้อมูลในส่วนที่จะอธิบายนี้ จะประกอบด้วยไฟล์ 2 ไฟล์

search.php ทำหน้าที่รับค่าคำค้น แล้วส่งไปเป็น URL Parameter ชื่อ keywords ไปให้ไฟล์ result.php
ใช้เปรียบเทียบค้นหาข้อมูลจากตารางในฐานข้อมูล
result.php ทำหน้าแสดงรายละเอียดของพนักงานทีละคน โดยจะรับ URL Parameter ชื่อ keywords ใน
รูปแบบ $_GET['keywords'] จากฟอร์มในไฟล์ search.php

ขั้นตอนการสร้างระบบค้นหาข้อมูลที่ยกมาอธิบายในที่นี้ แบ่งเป็นขั้นตอนดังต่อไปนี้

การสร้างฟอร์มสำหรับพิมพ์คำค้น
การค้นหาข้อมูลแบบเงื่อนไขเดียว
การใช้งานระบบค้นหาข้อมูลแบบเงื่อนไขเดียว
การค้นหาข้อมูลแบบหลายเงื่อนไข
การใช้งานระบบค้นหาข้อมูลแบบหลายเงื่อนไข

(1) การสร้างฟอร์มสำหรับพิมพ์คำค้น

ขั้นตอนนี้จะเป็นการสร้างฟอร์มสำหรับพิมพ์คำค้น โดยการแทรกฟอร์มและอ็อบเจ็คต์ของฟอร์มชนิด Text Field สำหรับรับค่าคำค้น

ขั้นตอนการสร้างฟอร์มสำหรับพิมพ์คำค้น:

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

ค่าของไดอะล็อก	ค่าที่กำหนด
Appearance > Background Image	images/bkg_search.gif
Title/Encoding > Title	Search employees
Title/Encoding > Document Type (DTD)	None
Title/Encoding > Encoding	Thai (Windows)

ตารางแสดงการกำหนดค่าใน Page Properties

รูปแสดงการกำหนด Page Properties

แทรกฟอร์มลงในเว็บเพจ โดยคลิกไปที่เมนู Insert > Form > Form
กำหนด Properties ของฟอร์ม โดยเลือกแท็ก <form> จาก Tag Selector หลังจากนั้นคลิกเมนู Window > Properties
เมื่อปรากฏไดอะล็อก Properties ขึ้นมา ให้กำหนดค่าดังต่อไปนี้

ค่าของไดอะล็อก	ค่าที่กำหนด
Form name	fmSearch
Action	result.php
Method	GET

ตารางแสดงการกำหนด Property ของฟอร์ม

รูปแสดงการกำหนด Property ของฟอร์ม

แทรกตารางลงภายในแท็ก <FORM> โดยคลิกที่เมนู Insert > Table แล้วกำหนดค่าดังนี้

รูปแสดงการกำหนดค่าของไดอะล็อก Table

ค่าของไดอะล็อก	ค่าที่กำหนด
Rows	1
Columns	3
Table width	400 pixel
Border thickness	1 pixels
Cell padding	3
Cell spacing	1

ตารางแสดงการกำหนดค่าของไดอะล็อก Table

คอลัมน์ที่ 1 ของตาราง และให้แทรกข้อความ "คำค้น:" ลงไป

รูปแสดงการแทรกข้อความ "คำค้น"

คอลัมน์ที่ 2 ของตาราง และให้แทรกอ็อบเจ็คต์ของฟอร์มชนิด Text Field ลงไป โดยคลิกที่เมนู
Insert > Form > Text Field หลังจากนั้นให้กำหนดคุณสมบัติของ Text Field ดังต่อไปนี้

ค่าของไดอะล็อก	ค่าที่กำหนด
TextField	keywords
Char Width	25
Max Chars	25
Type	Single line

ตารางแสดงการกำหนด Property ของ Text Field

รูปแสดงการกำหนด Property ของ Text Field

รูปแสดงไฟล์ search.php หลังการแทรก Text Field

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

ค่าของไดอะล็อก	ค่าที่กำหนด
Label	Search
Action	Submit form

ตารางแสดงการกำหนด Property ของ Button

รูปแสดงการกำหนด Property ของ Button

บันทึกไฟล์ search.php

รูปแสดงหน้าจอไฟล์ search.php หลังการแทรก Button

(2) การค้นหาข้อมูลแบบเงื่อนไขเดียว (Basic)

ขั้นตอนนี้ จะเป็นการ Recordset (Query) สำหรับค้นหาข้อมูลจากฐานข้อมูล โดยจะมีการกำหนดเงื่อนไขในการค้นหาข้อมูลจาก
URL Parameter ชื่อ $_GET['keywords'] ที่ส่งมาจากไฟล์ searchadv.php

การแทรก Recordset (Query) นี้ จะคล้ายกับขั้นตอนการสร้างในไฟล์ list.php เพื่อเป็นการประหยัดเวลา จึงแนะนำให้เปิดไฟล์
list.php ขึ้นมาแล้วบันทึกเป็นไฟล์ resultadv.php

ขั้นตอนการค้นหาข้อมูลแบบเงื่อนไขเดียว (Basic):

เปิดไฟล์ list.php ของระบบแสดงผลข้อมูลขึ้นมา ให้บันทึก (SAVE AS…) เป็นไฟล์ result.php
คลิกที่เมนู Window > Bindings ดับเบิลคลิกที่รายการ Recordset (rsEmp) เมื่อปรากฏไดอะล็อก Recordset ขึ้นมา
ให้กำหนดค่าของตัวแปรต่างๆ ดังรายละเอียดต่อไปนี้

NOTE:

เปิดไฟล์ list.php จากขั้นตอนการสร้างระบบแสดงผลข้อมูลหรือ PHPWEB\labs\solutions\lab05_displayrecords\list.php
ขึ้นมาแล้วบันทึกเป็นไฟล์ PHPWEB\result.php (หากปรากฏไดอะล็อก Update Links? ให้คลิก No)

รูปแสดงการดับเบิลคลิก Recordset (rsEmp)

รูปแสดงไดอะล็อก Recordset

ค่าของไดอะล็อก	ค่าที่กำหนด
Name	rsEmp
Connection	dbconn
Table	employees
Columns	employeeid, firstname, lastname, deptid, phone, extension
Filter	ช่องที่ 1: firstname หมายถึงให้ค้นหาจากฟิลด์ firstname
	ช่องที่ 2: contains หมายถึงให้ค้นหาแบบประกอบด้วย (LIKE)
	ช่องที่ 3: URL Parameter หมายถึง รับค่าคำค้นจาก URL Parameter (ส่งมาจากฟอร์มที่ METHOD="GET")
	ช่องที่ 4: keywords หมายถึง คำค้นถูกส่งมาเป็น URL Parameter ชื่อ keywords
Sort	Firstname , Ascending หมายถึง เรียงลำดับตาม firstname น้อยไปหามาก

(3) การใช้งานระบบค้นหาข้อมูลแบบเงื่อนไขเดียว (Basic)

เริ่มต้นโดยใช้โปรแกรม Dreamweaver เปิดไฟล์ search.php ขึ้นมา แล้วกดปุ่ม F12 โปรแกรม Internet Explorer
จะถูกเปิดขึ้นมาเรียกใช้งานไฟล์ search.php หลังจากนั้นให้พิมพ์คำค้น และคลิกปุ่ม Search เพื่อค้นหาข้อมูลจากฟิลด์ firstname

(4) การค้นหาข้อมูลแบบหลายเงื่อนไข

ในขั้นตอนที่ผ่านมา เราได้ค้นหาข้อมูลโดยในการ Filter ข้อมูลนั้นจะเป็นการเปรียบเทียบค่าฟิลด์ firstname กับ URL Parameter
$_GET['keywords'] ซึ่งก็หมายถึง ค้นหาข้อมูลจากฟิลด์ firstname ฟิลด์เดียวเท่านั้น

การค้นหาด้วยเงื่อนไขที่ซับซ้อนมากกว่านี้ สามารถทำได้โดยการดับเบิลคลิก Recordset(rsEmp) ขึ้นมา แล้วคลิกปุ่ม Advanced…
เพื่อเข้าไปเพิ่มเติมเงื่อนไขการค้นหาข้อมูล

ขั้นตอนการค้นหาข้อมูลแบบหลายเงื่อนไข:

เปิดไฟล์ list.php ของระบบแสดงผลข้อมูลขึ้นมา ให้บันทึก (SAVE AS…) เป็นไฟล์ result.php
คลิกที่เมนู Window > Bindings ดับเบิลคลิกที่รายการ Recordset (rsEmp) เมื่อปรากฏไดอะล็อก Recordset ขึ้นมา
ให้คลิกปุ่ม Advanced… เพื่อกำหนดแก้ไขคำสั่ง SQL สำหรับค้นหาหลายเงื่อนไข

รูปแสดงการดับเบิลคลิก Recordset (rsEmp)

รูปแสดงไดอะล็อก Recordset

รูปแสดงไดอะล็อก Recordset ในโหมด Advanced

เมื่ออยู่ในโหมด Advanced จะเห็นว่าในช่อง SQL จะแสดงชุดคำสั่ง SQL ในการเรียกค้นหาข้อมูล ดังรูปคำสั่งด้านล่าง
แล้วทดสอบการค้นหาโดยการกด F12

SELECT employeeid, firstname, lastname, phone, extension

FROM employees

WHERE (employees.firstname LIKE '%colname%')

ORDER BY firstname ASC

รูปแสดงการกำหนดเงื่อนไขให้ค้นหาจาก firstname

ปรับคำสั่งในไดอะล็อก Recordset ดังรูปคำสั่งด้านล่าง เพื่อ JOIN ตาราง departments เอาฟิลด์ชื่อแผนก (deptname)
มาแสดงผลและเพิ่มเงื่อนไขให้ค้นหาจากฟิลด์ firstname และ lastname หลังจากนั้นให้ทดสอบการค้นหาโดยเปิด
Dreamweaver ไปที่ไฟล์ search.php แล้วกด F12

SELECT employees.*, departments.deptname

FROM employees, departments

WHERE employees.deptid = departments.deptid

AND ( employees.firstname LIKE '%colname%' OR employees.lastname LIKE '%colname%' )

ORDER BY firstname ASC

รูปแสดงการ JOIN ตาราง departments เพื่อเอาชื่อแผนกมาแสดง และค้นหาจาก fistname และ lastname

ปรับคำสั่งในไดอะล็อก Recordset ดังรูปคำสั่งด้านล่าง และเพิ่มเงื่อนไขให้ค้นหาจากฟิลด์ employeeid firstname
lastname email และ deptname หลังจากนั้นให้ทดสอบการค้นหาโดยเปิด Dreamweaver ไปที่ไฟล์ searchadv.php
แล้วกด F12

SELECT employees.*, departments.deptname

FROM employees, departments

WHERE employees.deptid = departments.deptid

AND ( employees.employeeid LIKE '%colname%'

OR employees.firstname LIKE '%colname%'
OR employees.lastname LIKE '%colname%'

OR employees.email LIKE '%colname%'

OR departments.phone LIKE '%colname%'

)

ORDER BY firstname ASC

รูปแสดงการกำหนดเงื่อนไขให้ค้นหาจากฟิลด์ firstname, lastname, email, phone

บันทึกไฟล์ resultadv.php

(5) การใช้งานระบบค้นหาข้อมูลแบบหลายเงื่อนไข (Advanced)

เริ่มต้นโดยใช้โปรแกรม Dreamweaver เปิดไฟล์ searchadv.php ขึ้นมา แล้วกดปุ่ม F12 โปรแกรม Internet Explorer
จะถูกเปิดขึ้นมาเรียกใช้งานไฟล์ searchadv.php หลังจากนั้นให้พิมพ์คำค้น และคลิกปุ่ม Search เพื่อค้นหาข้อมูล
โดยให้ทดสอบพิมพ์คำค้นที่ตรงกับค่าในฟิลด์ employeeid firstname lastname email และ deptname ทีละเงื่อนไข

แล้วสังเกตผลลัพธ์ว่าถูกต้องหรือไม่

บทที่ 9 การแบ่งหน้าแสดงผลข้อมูล

2010-06-28T00:17:00.001+07:00

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

ในบทนี้จะกล่าวถึงการแสดงผลข้อมูลโดยแบ่งผลลัพธ์ออกเป็นหลายๆ หน้า โดยขั้นตอนการแบ่งหน้าแสดงผลนี้ จะทำต่อจากขั้นตอนการแสดงผลข้อมูลที่ผ่านมา

การแบ่งหน้าแสดงผลข้อมูลที่ยกมาอธิบายในที่นี้ แบ่งเป็นขั้นตอนได้ดังต่อไปนี้

การกำหนดจำนวนเร็คคอร์ดสำหรับแสดงผลต่อ 1 หน้า
การสร้างลิงค์สำหรับคลิกแสดงผลทีละ 1 หน้า
การใช้งานระบบแสดงผลข้อมูลแบบแบ่งหน้า

(1) การกำหนดจำนวนเร็คคอร์ดแสดงผลต่อ 1 หน้า

ในขั้นตอนนี้ จะเป็นการกำหนดให้เว็บเพจแสดงผลวนซ้ำจนกว่าจะครบจำนวนเร็คคอร์ดต่อ 1 หน้าที่ระบุ

ขั้นตอนการกำหนดจำนวนเร็คคอร์ดแสดงผลต่อ 1 หน้า:

เริ่มต้นที่หน้าจอ Dreamweaver เปิดไฟล์ list.php คลิกเลือกบริเวณที่ต้องการแสดงผลข้อมูลวนซ้ำ คือบรรทัดที่ 2 ของตาราง เพื่อให้ตำแหน่งของเคอร์เซอร์อยู่ภายในบริเวณบรรทัดที่แสดงผล หลังจากนั้นให้คลิกเลือกแท็ก <TR> บน Tag Selector

รูปแสดงการกำหนดการวนลูปแสดงผลซ้ำ
คลิกที่เมนู Window > Server Behaviors หลังจากนั้นให้ดับเบิลคลิกรายการ Repeat Region ที่ได้สร้างไว้ก่อนหน้านี้
ดังรูป

รูปแสดงไดอะล็อก Repeat Region แสดงการกำหนดแสดงผล 10 เร็คคอร์ดต่อ 1 หน้า

(2) การสร้างลิงค์สำหรับคลิกแสดงผลทีละ 1 หน้า

ในขั้นตอนการกำหนดจำนวนเร็คคอร์ดแสดงผลต่อ 1 หน้า ที่ผ่านมา จะเห็นว่าเราได้กำหนดให้แสดงผลข้อมูล
ครั้งละ 10 เร็คคอร์ด ดังนั้น หากลองทดสอบการทำงานไฟล์ list.php จะพบว่ามีข้อมูลที่แสดงผลเพียง 10 เร็คคอร์ด
เท่านั้น ซึ่งในความเป็นจริงอาจจะมีมากกว่านั้นก็ได้ ในส่วนนี้ก็จะเป็นการสร้างลิงค์สำหรับคลิกกลับไป-มาทีละ 10 เร็คคอร์ด
หรือแล้วแต่จำนวนที่เรากำหนดในขั้นตอนการแสดงผลซ้ำนั่นเอง

ขั้นตอน:

เริ่มต้นที่หน้าจอ Dreamweaver เปิดไฟล์ list.php
คลิกเม้าส์เพื่อวางเคอร์เซอร์ที่ตำแหน่งด้านล่างถัดจากตารางแสดงผล หลังจากนั้นให้คลิกเลือกเมนู
Insert > Application Objects > Display Record Count > Recordset Navigation Status

เมื่อปรากฏไดอะล็อก Recordset Navigation Status ขึ้นมา เป็นการให้เลือกว่าจะกระทำกับ Recordset ใด
(กรณีที่ใน 1 เว็บเพจมีการสร้างหลาย Recordset) ในที่นี้ให้เลือก rsEmp หลังจากนั้นให้คลิก OK

รูปแสดงไดอะล็อก Recordset Navigation Status

จะปรากฏข้อความแสดงสถานะว่าขณะนี้กำลังแสดงผลเร็คคอร์ดใดบ้าง

รูปแสดง Recordset Navigation Status

คลิกเลือกเมนู Insert > Application Objects > Recordset Paging > Recordset Navigation Bar
เมื่อปรากฏไดอะล็อก Recordset Navigation Bar ขึ้นมา เป็นการให้เลือกว่าจะกระทำกับ Recordset ใด
(กรณีที่ใน 1 เว็บเพจมีการสร้างหลาย Recordset) ในที่นี้ให้เลือก rsEmp ในช่อง Display Using ให้เลือก Text หลังจากนั้นให้คลิก OK

รูปแสดงไดอะล็อก Recordset Navigation Bar

จะปรากฏลิงค์สำหรับคลิกเพื่อแสดงผลข้อมูลกลับไป-มาทีละ 10 เร็คคอร์ด หรือแล้วแต่จำนวนที่เรากำหนดในขั้นตอนการแสดงผลซ้ำ

รูปแสดง Recordset Navigation Bar

บันทึกไฟล์ list.php

(3) การใช้งานระบบแสดงผลข้อมูลแบบแบ่งหน้า

เริ่มต้นโดยใช้โปรแกรม Dreamweaver เปิดไฟล์ list.php ขึ้นมา แล้วกดปุ่ม F12 โปรแกรม Internet Explorer
จะถูกเปิดขึ้นมาเรียกใช้งานไฟล์ list.php หลังจากนั้นทดสอบคลิกที่ลิงค์ First Previous Next และ Last ด้านล่างของหน้าเว็บเพจ
เร็คคอร์ดที่แสดงผลจะปรากฏขึ้นมาทีละ 10 เร็คคอร์ด

บทที่ 8 การสร้างระบบแสดงผลข้อมูล

2010-06-28T00:09:00.001+07:00

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

ระบบแสดงผลข้อมูล คือเว็บเพจที่ทำหน้าที่ในการเรียกข้อมูลจากตาราง (Table) ในฐานข้อมูล นำมาแสดงผลบนหน้าเว็บเพจ

รูปแสดงไฟล์ที่เกี่ยวข้องกับระบบแสดงผลข้อมูล

ระบบแสดงผลข้อมูลในส่วนที่จะอธิบายนี้ จะประกอบด้วยไฟล์ 2 ไฟล์

list.php ทำหน้าที่แสดงข้อมูลพนักงานหน้าละหลายเร็คคอร์ด มีลิงค์สำหรับคลิกส่ง URL Parameter ไปยัง
ไฟล์ detail.php เพื่อดูรายละเอียดพนักงานแต่ละคน

detail.php ทำหน้าแสดงรายละเอียดของพนักงานแต่ละคน โดยรับค่า URL Parameter จากไฟล์ list.php

การสร้างระบบแสดงข้อมูลที่ยกมาอธิบายในที่นี้ แบ่งเป็นขั้นตอนได้ดังต่อไปนี้

การสร้างตารางสำหรับแสดงผลข้อมูล
การแทรก Recordset (Query) ลงในเว็บเพจ
การแทรกสคริปต์สำหรับแสดงผลข้อมูลลงในเว็บเพจ
การตรวจสอบว่ามีข้อมูลสำหรับแสดงผลหรือไม่
การวนลูปแสดงผลซ้ำ (Repeat)
การค้นหาข้อมูลที่ต้องการแสดงรายละเอียดทีละ 1 เร็คคอร์ด
การแทรกสคริปต์สำหรับแสดงผลข้อมูลทีละ 1 เร็คคอร์ดลงในเว็บเพจ
การส่งและรับค่า URL Parameter เพื่อระบุเร็คคอร์ดที่ต้องการแสดงผล
การใช้งานระบบแสดงผลข้อมูล

(1) การสร้างตารางสำหรับแสดงผลข้อมูล

ขั้นตอนนี้ จะเป็นการสร้างตารางสำหรับแสดงผลข้อมูล โดยจะเป็นการแสดงข้อมูลทีละหลายๆ เร็คคอร์ดลงในเว็บเพจ พร้อมทั้งมีการปรับแต่งรูปแบบโดยใช้เครื่องมือของ Dreamweaver

ขั้นตอน:

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

เลือกเมนู Modify > Page Properties… เมื่อปรากฏไดอะล็อก Page Properties ขึ้นมา ให้กำหนด Properties ของเว็บเพจ ดังรายละเอียดด้านล่างนี้ หลังจากนั้นคลิกปุ่ม OK

ค่าของไดอะล็อก	ค่าที่กำหนด
Appearance > Background Image	images/bkg_list.gif
Title/Encoding > Title	List Employees
Title/Encoding > Document Type (DTD)	None
Title/Encoding > Encoding	Thai (Windows)

ตารางแสดงการกำหนดค่าในไดอะล็อก Page Properties

แทรกตาราง HTML สำหรับแสดงผล โดยคลิกเมนู Insert > Table เมื่อปรากฏไดอะล็อก Table ขึ้นมา ให้กำหนดค่าดังนี้

ค่าของไดอะล็อก	ค่าที่กำหนด
Rows	3
Columns	4
Table width	770 pixel
Border thichness	1 pixels
Cell padding	1
Cell spacing	1

ตารางแสดงการกำหนดค่าในไดอะล็อก Table

รูปแสดงการกำหนดค่าในไดอะล็อก Table

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

รูปแสดงหน้าเว็บเพจ list.php

NOTE: เปิดไฟล์ htmltable.htm ในขั้นตอนที่ผ่านมา หรือ PHPWEB\labs\solutions\lab01_basichtml\htmltable.htm ขึ้นมาแล้วบันทึกเป็นไฟล์ PHPWEB\list.php (หากปรากฏไดอะล็อก Update Links? ให้คลิก No)

(2) การแทรก Recordset (Query) ลงในเว็บเพจ

การแทรก Recordset (Query) คือ ขั้นตอนการแทรกสคริปต์ PHP สำหรับการสร้างเร็คคอร์ดเซ็ต เพื่อนำข้อมูลจากเร็คคอร์ดเซ็ต มาแสดงบนเว็บเพจ ซึ่งจะกล่าวถึงในขั้นตอนต่อไป

ขั้นตอน:

คลิกที่เมนู Windows > Bindings หลังจากนั้นให้คลิกเครื่องหมายบวก เลือกเมนู Recordset (Query)
เมื่อปรากฏไดอะล็อก Recordset ขึ้นมา ให้กำหนดค่าต่างๆ ดังรายละเอียดข้างล่างนี้ หลังจากนั้นให้บันทึกไฟล์ list.php

ค่าของไดอะล็อก	ค่าที่กำหนด
Name	rsEmp
Connection	dbconn
Table	employees
Columns	All
Filter	None
Sort	firstname , Ascending

ตารางแสดงการกำหนดค่าไดอะล็อก Recordset

รูปแสดงการเลือกเมนู
Recordset (Query)

รูปแสดงการกำหนดค่าไดอะล็อก Recordset

(3) การแทรกสคริปต์สำหรับแสดงผลข้อมูลลงในเว็บเพจ

การแทรกสคริปต์สำหรับแสดงผลข้อมูล ก็คือการแทรกสคริปต์ PHP สำหรับนำเอาข้อมูลจากเร็คคอร์ดเซ็ตที่ได้จากขั้นตอนที่แล้ว มาแสดงผลข้อมูลในเว็บเพจ

ขั้นตอน:

คลิกไปที่เมนู Windows > Bindings หลังจากนั้นให้คลิกเครื่องหมายบวก หน้ารายการ Recordset (rsEmp) จะปรากฏชื่อฟิลด์ของตารางในฐานข้อมูล ให้คลิกเลือกและแทรกฟิลด์ลงเว็บเพจ เพื่อแสดงผลข้อมูล ตามขั้นตอน ดังรูปด้านล่าง

คอลัมน์ของตาราง	ฟิลด์ของ Recordset (rsEmp)
ชื่อ-นามสกุล	firstname, lastname
แผนก	deptid
โทรศัพท์	phone , extension

ตารางแสดงการเลือกฟิลด์จากเร็คคอร์ดเซ็ตวางลงในเว็บเพจ

รูปแสดงการเลือกฟิลด์จากเร็คคอร์ดเซ็ตวางลงในเว็บเพจ

บันทึกไฟล์ list.php
สามารถทดสอบดูผลการทำงานได้ โดยกดปุ่ม F12 จากหน้าจอ Dreamweaver

(4) การตรวจสอบว่ามีข้อมูลสำหรับแสดงผลหรือไม่

การตรวจสอบข้อมูลก่อนการแสดง จะเป็นขั้นตอนที่ช่วยให้เว็บแอพพลิเคชั่นน่าใช้ยิ่งขึ้น หากการตรวจสอบไม่พบข้อมูลที่จะแสดงผล ควรมีข้อความแจ้งผู้ใช้งานว่า "ไม่มีข้อมูล"

ขั้นตอน:

คลิกที่เมนู Window > Server Behaviors หลังจากนั้นให้คลิกเครื่องหมายบวก เพื่อเลือกเมนู
Show Region > Show If Recordset Is Not Empty

รูปการกำหนดการตรวจสอบว่ามีข้อมูลหรือไม่

รูปการเลือกเมนู Server Behaviors เพื่อตรวจสอบว่ามีข้อมูลหรือไม่

(5) การวนลูปแสดงผลซ้ำ (Repeat)

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

ขั้นตอน:

เริ่มต้นที่หน้าจอ Dreamweaver เปิดไฟล์ list.php ให้คลิกเลือกบริเวณที่ต้องการแสดงผลข้อมูลวนซ้ำ คือบรรทัดที่ 2 ของตาราง เพื่อให้ตำแหน่งของเคอร์เซอร์อยู่ภายในบริเวณบรรทัดที่แสดงผล หลังจากนั้นให้คลิกเลือกแท็ก <TR> บน Tag Selector

รูปการกำหนดการวนลูปแสดงผลซ้ำ
จากนั้นคลิกที่เมนู Window > Server Behaviors หลังจากนั้นให้คลิกเครื่องหมายบวก เพื่อเลือกเมนู Repeat Region เมื่อปรากฏไดอะล็อก Repeat Region ให้กำหนดค่าต่างๆ ดังรายละเอียดข้างล่างนี้ หลังจากนั้นให้คลิกปุ่ม OK

รูปแสดงการกำหนด Repeat Region

รูปการกำหนดแสดงผลทุกเร็คคอร์ด
บันทึกไฟล์ list.php
ทดสอบการทำงานของไฟล์ list.php โดยการกด F12

(6) การค้นหาข้อมูลที่ต้องการแสดงรายละเอียดทีละ 1 เร็คคอร์ด

การแทรกสคริปต์ค้นหาข้อมูลนี้ จะเป็นการแทรกลงในไฟล์ detail.php เพื่อนำเอาข้อมูลพนักงานออกมาแสดงรายละเอียดในเว็บเพจทีละเร็คคอร์ด โดยเงื่อนไขการค้นหาข้อมูลนั้น จะใช้ฟิลด์ employeeid ของตารางในฐานข้อมูล เปรียบเทียบกับค่า URL Parameter "empid" ที่ถูกส่งมาจากไฟล์ list.php

ขั้นตอน:

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

รูปแสดงแบบตารางสำหรับแสดงผลข้อมูล

NOTE:
เปิดไฟล์ htmltable2.htm จากขั้นตอนที่ผ่านมา หรือ PHPWEB\labs\solutions\lab01_basichtml\htmltable2.htm
ขึ้นมาแล้วบันทึกเป็นไฟล์ PHPWEB\detail.php (หากปรากฏไดอะล็อก Update Links? ให้คลิก No)

เลือกเมนู Modify > Page Properties เมื่อปรากฏไดอะล็อก Page Properties ขึ้นมา ให้กำหนด Properties ของเว็บเพจ ดังรายละเอียดด้านล่างนี้ หลังจากนั้นคลิกปุ่ม OK

ค่าของไดอะล็อก	ค่าที่กำหนด
Appearance > Background Image	images/bkg_detail.gif
Title/Encoding > Title	Employee Details
Title/Encoding > Document Type (DTD)	None
Title/Encoding > Encoding	Thai (Windows)

คลิกที่เมนู Window > Bindings หลังจากนั้นให้คลิกปุ่มเครื่องหมายบวก และเลือกรายการ Recordset (Query)
เมื่อปรากฏไดอะล็อก Recordset ขึ้นมา ให้กำหนดค่าต่างๆ ดังรายละเอียดข้างล่างนี้ หลังจากนั้นให้คลิกปุ่ม OK

รูปแสดงไดอะล็อก Recordset

ค่าของไดอะล็อก	ค่าที่กำหนด
Name	rsEmp
Connection	dbconn
Table	employees
Column	All
Filter	employeeid และ =
URL Parameter	empid

บันทึกไฟล์ detail.php

(7) การแทรกสคริปต์สำหรับแสดงผลข้อมูลทีละ 1 เร็คคอร์ดลงในเว็บเพจ

การแทรกสคริปต์ในขั้นตอนนี้ จะกระทำในไฟล์ detail.php จะเป็นการแทรกสคริปต์สำหรับนำเอาฟิลด์จากการสร้าง Recordset ในขั้นตอนการค้นหาข้อมูลที่ต้องการแสดงรายละเอียดทีละ 1 เร็คคอร์ด มาแสดงผลในเว็บเพจ โดยวิธีการจะคล้ายกับขั้นตอนการทำไฟล์ list.php

ขั้นตอนการแทรกสคริปต์สำหรับแสดงผลข้อมูลทีละ 1 เร็คคอร์ดลงในเว็บเพจ:

เริ่มต้นที่ไฟล์ detail.php คลิกที่เมนู Window > Bindings หลังจากนั้นให้คลิกเครื่องหมายบวก หน้ารายการ Recordset (rsEmp) จะปรากฏชื่อฟิลด์ ให้คลิกเลือกและแทรกฟิลด์ลงเว็บเพจ เพื่อแสดงผลข้อมูล ตามขั้นตอนที่เคยทำในไฟล์ list.php ที่ผ่านมา ดังรูป

รูปการแสดงผลข้อมูลในตาราง (Bindings)

สำหรับฟิลด์ photo ซึ่งเก็บชื่อไฟล์รูปภาพพนักงาน เช่น Amit_Kelly.jpg เราต้องการให้แสดงในลักษณะรูปภาพ โดยให้เอาไฟล์รูปภาพ

photos\Amit_Kelly.jpg มาแสดงบนเว็บเพจ ให้คลิกที่เมนู Insert > Image จะปรากฏไดอะล็อก Select Image Source
ให้กำหนดค่าต่างๆ ดังตารางด้านล่าง หลังจากนั้นให้คลิกปุ่ม OK

ค่าของไดอะล็อก	ค่าที่กำหนด
Select File Name From	Data Sources
Field	photo
Format	None
URL	photos/<?php echo $row_rsEmp['photo']; ?>

ตารางแสดงการกำหนดค่าในไดอะล็อก Select Image Source เพื่อแสดงไฟล์รูปภาพ

รูปแสดงการกำหนดค่าในไดอะล็อก Select Image Source เพื่อแสดงไฟล์รูปภาพ

(8) การส่งและรับค่า URL Parameter เพื่อระบุเร็คคอร์ดที่ต้องการแสดงผล

ขั้นตอนนี้ ก็คือการทำให้ไฟล์เว็บเพจ 2 ไฟล์ list.php และ detail.php สามารถเชื่อมโยงเพื่อส่งและรับค่า URL Parameter กันได้นั่นเอง

ขั้นตอนการส่งและรับค่า URL Parameter เพื่อระบุเร็คคอร์ดที่ต้องการแสดงผล:

เริ่มต้นที่โปรแกรม Dreamweaver เปิดไฟล์ list.php ขึ้นมา แล้วลากเม้าส์ทำไฮไลต์ตำแหน่งแสดงผลฟิลด์ firstname และ lastname ดังรูป

รูปแสดงการลากเม้าส์ทำไฮไลต์ฟิลด์ firstname และ lastname
เปิดไดอะล็อก Properties โดยคลิกที่เมนู Window > Properties จะปรากฏไดอะล็อก Properties ขึ้นมา ให้คลิกไอคอนรูป Folder สีเหลือง (Browse for File) ที่ตำแหน่งช่อง Link เพื่อสร้างไฮเปอร์ลิงค์สำหรับ URL Parameter ไปหาไฟล์ detail.php

รูปแสดง Property ของลิงค์บริเวณที่ลากเม้าส์ฟิลด์ firstname และ lastname

เมื่อปรากฏไดอะล็อก Select File ขึ้นมา ให้คลิกเลือกไฟล์ detail.php เป็นการกำหนดว่าจะส่งค่า URL Parameter ไปที่ไฟล์นี้ หลังจากนั้นให้คลิกปุ่ม Parameters… ที่ด้านล่างของไดอะล็อก Select File เพื่อกำหนดการส่งค่า URL Parameter

รูปแสดงขั้นตอนการสร้างลิงค์ พร้อมกับการกำหนด "Parameters…"

เมื่อปรากฏไดอะล็อก Parameters ขึ้นมา ที่ช่อง Name ให้พิมพ์ชื่อ URL Parameter ที่ต้องการจะส่งไป ในที่นี้ให้เราพิมพ์ empid หลังจากนั้นให้ไปที่ช่อง Value เพื่อกำหนดค่าที่จะส่งไป ในที่นี้เราต้องการกำหนดค่าให้เปลี่ยนไปแบบ Dynamic ตามข้อมูลที่แสดงในแต่ละเร็คคอร์ด ให้คลิกปุ่ม Dynamic Data ที่ช่อง Value

รูปแสดงขั้นตอนการสร้างลิงค์ พร้อมกับการกำหนด "Parameters…"

ค่าของไดอะล็อก	ค่าที่กำหนด
Name	empid
Value	<?php echo $row_rsEmp['employeeid']; ?>

ตารางแสดงการกำหนดค่า URL Parameter ในไดอะล็อก "Parameters"

เมื่อปรากฏไดอะล็อก Dynamic Data ขึ้นมา ให้คลิกเลือกฟิลด์ employeeid จาก Recordset (rsEmp)
หลังจากนั้นคลิกปุ่ม OK

รูปแสดงการเลือกฟิลด์ employeeid จาก Recordset

บันทึกไฟล์ list.php ก็เป็นเสร็จขั้นตอนการกำหนดการส่งค่า URL Parameter
ขั้นตอนสุดท้ายคือกำหนดให้ไฟล์ detail.php รับค่า URL Parameter ที่ส่งมาจากไฟล์ list.php ซึ่งวิธีการทำนั้น
เราได้ทำผ่านมาแล้วให้ย้อนกลับไปดูในขั้นตอน "การค้นหาข้อมูลที่ต้องการแสดงรายละเอียดทีละ 1 เร็คคอร์ด"

จะเห็นได้ว่า เราได้มีการเรียกใช้ URL Parameter "empid" ซึ่งก็คือค่า URL Parameter ที่ส่งไปจากไฟล์ list.php นั่นเอง

(9) การใช้งานระบบแสดงผลข้อมูล

เริ่มต้นโดยใช้โปรแกรม Dreamweaver เปิดไฟล์ list.php ขึ้นมา แล้วกดปุ่ม F12 โปรแกรม Internet Explorer
จะถูกเปิดขึ้นมาเรียกใช้งานไฟล์ list.php ให้ทดสอบคลิกที่ข้อมูล ชื่อ-นามสกุลของพนักงานแต่ละคน
จะปรากฏหน้าเว็บเพจแสดงรายละเอียดประวัติข้อมูลพนักงานทีละคน

บทที่ 6 การใช้งานฟอร์มกับ PHP

2010-06-27T13:28:00.001+07:00

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

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

รูปแสดงการทำงานของฟอร์ม

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

จากรูปด้านบน แสดงวิธีการทำงานของฟอร์มดังนี้

เริ่มต้นเมื่อผู้ใช้กรอกแบบฟอร์มบนเว็บเพจและคลิกปุ่มส่งข้อมูลมาที่เว็บเซิร์ฟเวอร์
ข้อมูลจากฟอร์มจะถูกประมวลผลที่ไฟล์ PHP, ASP หรือไฟล์ CGI อื่นๆบนเว็บเซิร์ฟเวอร์
เมื่อประมวลผลเสร็จแล้ว ผลลัพธ์จะถูกส่งกลับไปให้ผู้ใช้ในรูปแบบเอกสาร HTML เพื่อให้เว็บเบราเซอร์แสดงผล

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

ขั้นตอนการสร้างฟอร์ม:

เปิดโปรแกรม Dreamweaver คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ General เลือก Dynamic Page > PHP หลังจากนั้นคลิกปุ่ม Create บันทึกเป็นไฟล์ form.php
ที่หน้าจอของเว็บเพจ ให้คลิกเพื่อวางเคอร์เซอร์ในตำแหน่งที่ต้องการสร้างฟอร์ม หลังจากนั้นคลิกที่เมนู
Insert > Form > Form ฟอร์มจะถูกแทรกลงในเว็บเพจ หากอยู่ใน Design View จะเห็นขอบเขตของฟอร์มแสดงเป็นเส้นประสีแดง (หากไม่มีเส้นประสีแสดงขึ้นมา ให้คลิกที่เมนู View > Visual Aids > Invisible Elements)

รูปแสดงเว็บเพจที่แทรกฟอร์ม

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

รูปแสดง Property ของฟอร์ม

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

ไดอะล็อก Properties ช่อง Method ให้เลือกรูปแบบการส่งข้อมูลจากฟอร์มไปที่เว็บเซิร์ฟเวอร์ ซึ่งมีให้เลือก 3 รูปแบบ คือ
การทำงานของ METHOD:
- POST ส่งข้อมูลโดยส่งข้อมูลส่งไปกับ HTTP Request
- GET ส่งข้อมูลโดยการแปะค่าเป็น URL Parameter (Query String) ไปกับ URL (ข้อมูลที่ส่งจะแสดงอยู่บน URL ของเว็บเบราเซอร์)
- DEFAULT ส่งข้อมูลโดยขึ้นอยู่กับค่า default ของเว็บเบราเซอร์ โดยปกติจะเป็นแบบ GET

NOTE: วิธีการส่งข้อมูลแบบ GET ไม่ควรใช้กับฟอร์มที่มีการส่งข้อมูลจำนวนมาก รวมทั้งไม่ควรใช้ในการส่งข้อมูลที่เป็นความลับ เช่น username, password หรือเลขที่บัตรเครดิต เป็นต้น เนื่องจากวิธีการส่งแบบ GET นี้ ข้อมูลที่เราส่งจะถูกแสดงบน URL เช่น http://localhost/phpweb/detail.php?empid=01020489

ไดอะล็อก Properties ช่อง Enctype ให้ระบุชนิดของการเข้ารหัสข้อมูล โดยค่า default ของ Enctype จะเป็น application/x-www-form-urlencode ซึ่งจะถูกใช้ร่วมกับ method แบบ POST หากใช้ฟอร์มในการอัปโหลดไฟล์ ให้เลือก Enctype เป็นแบบ multipart/form-data
ไดอะล็อก Properties ช่อง Target ให้พิมพ์ชื่อหน้าจอของเว็บเบราเซอร์ที่ต้องการแสดงผลลัพธ์ของฟอร์มหรือเลือกจากรายการที่กำหนดไว้ให้ หากเว็บเบราเซอร์ยังไม่มีชื่อหน้าจอที่ระบุ เว็บเบราเซอร์จะสร้างหน้าจอชื่อที่ระบุขึ้นมาใหม่ ตัวเลือกที่กำหนดไว้ให้ในช่อง Target
การทำงานของ TARGET:
- _blank ผลลัพธ์ของฟอร์มจะแสดงที่หน้าจอเว็บเบราเซอร์ที่สร้างขึ้นมาใหม่
- _parent ผลลัพธ์ของฟอร์มจะแสดงที่หน้าจอหลัก (parent) ของหน้าจอเว็บเบราเซอร์ขณะนั้น
- _self ผลลัพธ์จะแสดงที่หน้าจอเว็บเบราเซอร์เดียวกับฟอร์ม
- _top ผลลัพธ์ของฟอร์มจะแสดงที่หน้าจอหลัก ในกรณีที่หน้าจอเว็บเบราเซอร์แบ่งเป็นหลายเฟรม
คลิกปุ่ม Code View เพื่อเขียนโค้ด HTML ดังรูปด้านล่าง หลังจากนั้นบันทึกไฟล์ form.php

<html>

<body>

ชื่อ: <input name="firstname" type="text" size="32" maxlength="30"> <br>

นามสกุล: <input name="lastname" type="text" size="32" maxlength="30"> <br>

</form>

</body>

</html>

รูปแสดงโค้ดไฟล์ form.php

เปิดโปรแกรม Dreamweaver คลิกเมนู 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>

รูปแสดงโค้ดไฟล์ formprocess.php

ทดสอบการทำงานของฟอร์ม โดยเปิด Dreamweaver ไปที่หน้าจอไฟล์ form.php หลังจากนั้นกดปุ่ม F12 จะปรากฏหน้าจอ Internet Explorer เป็นแบบฟอร์มกรอกข้อมูล ให้กรอกข้อมูล แล้วคลิกปุ่ม "บันทึก" ให้สังเกตผลลัพธ์การทำงานของเว็บเพจ

รูปแสดงการทำงานของไฟล์ form.php

รูปแสดงการทำงานของไฟล์ formprocess.php
เปลี่ยน METHOD ของฟอร์มในไฟล์ form.php จาก METHOD="POST" เป็น METHOD="GET"
เปลี่ยนชื่อตัวแปรในไฟล์ formprocess.php จาก $_POST['firstname'] เป็น $_GET['firstname']

และ $_POST['lastname'] เป็น $_GET['lastname']
ทดสอบการทำงานของฟอร์มใหม่อีกครั้ง ให้สังเกตผลลัพธ์การทำงานของเว็บเพจ

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

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

รูปแสดงฟอร์มและอ็อบเจ็คต์บน Insert Bar

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

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

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

รูปแสดง Property ของอ็อบเจ็คต์ Text Field แบบ Single line

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

TextField กำหนดชื่อของอ็อบเจ็คต์ Text Field
Char Width กำหนดความกว้างของ Text Field
Max Chars กำหนดจำนวนตัวอักษรสูงสุดที่กรอกข้อมูลได้ของ Text Field
Type กำหนดชนิดของ Text Field มี 3 ลักษณะ คือ
- Single Line กำหนดให้แสดงเป็นแบบบรรทัด (Textarea)
- Multi Line กำหนดให้แสดงเป็นแบบหลายบรรทัด
- Password กำหนดให้แสดงแบบรหัสผ่าน
Init Val กำหนดค่าเริ่มต้น

รูปแสดงการใช้งานอ็อบเจ็คต์ Text Field

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

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

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

รูปแสดง Property ของอ็อบเจ็คต์ Textarea

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

TextField กำหนดชื่อของอ็อบเจ็คต์ Textarea
Char Width กำหนดความกว้างของ Textarea
Max Chars กำหนดจำนวนตัวอักษรสูงสุดที่กรอกข้อมูลได้ของ Textarea
Type กำหนดชนิดของ Textarea คือ Multi Line
Init Val กำหนดค่าเริ่มต้น

รูปแสดงการใช้งานอ็อบเจ็คต์ Textarea

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

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

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

รูปแสดง Property ของอ็อบเจ็คต์ Button

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

Button name กำหนดชื่อของอ็อบเจ็คต์ Button
Label กำหนดข้อความที่จะแสดงบนปุ่ม Button
Action กำหนดชนิดของ Action มี 3 ลักษณะ คือ
- Submit Form กำหนดให้ใช้สำหรับส่งฟอร์มไปประมวลผล
- Reset Form กำหนดให้ใช้สำหรับยกเลิกการกรอกข้อมูลในฟอร์ม
- None กำหนดให้เป็นปุ่มที่คลิกแล้วไม่ทำงานใดๆ
รูปแสดงการใช้งานอ็อบเจ็คต์ Button

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

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

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

รูปแสดง Property ของอ็อบเจ็คต์ Check Box

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

CheckBox กำหนดชื่อของอ็อบเจ็คต์ Check Box
Checked Value กำหนดค่าให้ Check Box
Initial State กำหนดสถานะเริ่มต้นเมื่อแสดงบนเว็บเพจ มี 2 ลักษณะ คือ
- Checked กำหนดให้เริ่มต้นโดยให้สถานะเป็นถูกเลือกไว้
- Unchecked กำหนดให้เริ่มต้นโดยสถานะไม่ให้ถูกเลือก
รูปแสดงการใช้งานอ็อบเจ็คต์ Check Box

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

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

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

รูปแสดง Property ของอ็อบเจ็คต์ Radio button

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

RadioButton กำหนดชื่อของอ็อบเจ็คต์ Radio Button หากเป็นการเลือกอย่างใดอย่างหนึ่ง จากตัวเลือกตั้งแต่ 2 ตัวขึ้นไป จะต้องกำหนดชื่อของ Radio Button ทุกตัวให้ชื่อเหมือนกัน มิฉะนั้น การทำงานของ Radio Button จะไม่ถูกต้อง
Checked Value กำหนดค่าให้ Radio Button
Initial State กำหนดสถานะเริ่มต้นเมื่อแสดงบนเว็บเพจ มี 2 ลักษณะ คือ
- Checked กำหนดให้เริ่มต้นโดยให้สถานะเป็นถูกเลือกไว้
- Unchecked กำหนดให้เริ่มต้นโดยสถานะไม่ให้ถูกเลือก
รูปแสดงการใช้งานอ็อบเจ็คต์ Radio Button

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

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

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

รูปแสดงการกำหนด Property ของอ็อบเจ็คต์ List/Menu

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

List/Menu กำหนดชื่อของอ็อบเจ็คต์ List/Menu
Type เลือกการทำงานเป็นแบบ Menu หรือ List
Initially Selected แสดงค่าตัวเลือกที่กำหนดมาจาก List Values

รูปแสดงการใช้งานอ็อบเจ็คต์ List/Menu

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

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

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

รูปแสดง Property ของอ็อบเจ็คต์ File Field

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

FileField กำหนดชื่อของอ็อบเจ็คต์ File Field
Char Width กำหนดความกว้างของ File Field
Max Chars กำหนดจำนวนตัวอักษรสูงสุด

รูปแสดงการใช้งานอ็อบเจ็คต์ File Field

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

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

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

รูปแสดง Property ของอ็อบเจ็คต์ Hidden Field

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

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

รูปแสดงการใช้งานอ็อบเจ็คต์ Hidden Field

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

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

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

รูปแสดง Property ของอ็อบเจ็คต์ Image Field

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

ImageField กำหนดชื่อของอ็อบเจ็คต์ Image
Field
W กำหนดค่าความกว้างของ Image
Field ที่แสดง
H กำหนดค่าความสูงของ Image
Field ที่แสดง
Src ชื่อไฟล์รูปภาพของ Image
Field ที่แสดง
Alt กำหนดข้อควาที่จะใช้แสดงแทน ในกรณีที่ไม่พบไฟล์รูปภาพ
Align กำหนดตำแหน่งการแสดง Image Field

รูปแสดงการใช้งานอ็อบเจ็คต์ Image Field

Exercise:

สร้างฟอร์มสำหรับกรอกข้อมูลพนักงาน บันทึกเป็นไฟล์ htmlform.htm ดังรูปด้านล่าง
Hint:
- ประยุกต์การใช้งานแท็ก <TABLE> <IMG> <A> และ <FORM>
- Backgroung Image ใช้ไฟล์ PHPWEB\images\bkg_insert.gif
- Title ใช้ไฟล์ PHPWEB\images\title_insert.gif

บทที่ 5 ความรู้พื้นฐานเกี่ยวกับภาษา PHP

2010-06-27T13:23:00.001+07:00

การเปิดปิดแท็ก PHP (PHP Code Syntax)

รูปแบบแท็ก	เปิดแท็ก PHP	ปิดแท็ก PHP
แบบมาตรฐาน	<?php	?>
แบบสั้น	<?	?>
แบบ ASP	<%	%>
แบบ Script	<script language="PHP">	</script>

รูปแบบคำสั่ง (PHP Statement)

<HTML>
<BODY>

<?php
echo "Hello, World!!";
?>

</BODY>
</HTML>
ตัวแปร (Variables)

ตัวแปร คือ การเขียนคำสั่งให้โปรแกรม (PHP) จองพื้นที่ในหน่วยความจำ (memory) ไว้ส่วนหนึ่ง เพื่อเก็บข้อมูลบางอย่าง ตามที่ผู้เขียนโปรแกรมกำหนด

การประกาศตัวแปร
- การประกาศตัวแปรเริ่มต้นด้วยเครื่องหมาย $ (Dollar sign)
- ชื่อตัวแปรต้องเริ่มต้นด้วยตัวอักษรภาษาอังกฤษหรือเครื่องหมาย underscore ("_")
- ตัวอย่างการประกาศตัวแปรที่ถูกต้อง:
  $total
  $_cell1
  $length_of_string
- ตัวอย่างการประกาศตัวแปรที่ผิด:
  total
  $1_total
  $2_length

การกำหนดค่าให้ตัวแปร
- กำหนดค่าเป็นตัวเลขจำนวนเต็ม:
  
  <?php
  $total = 10;
  ?>
- กำหนดค่าเป็นตัวเลขทศนิยม:
  
  <?php
  $PI = 3.14;
  ?>
- การกำหนดค่าเป็นข้อความ (string) ให้ใช้ quotes (") หรือ single quote ( ' ):
  
  <?php
  $example1 = 'This is a single quoted string';
  $example2 = "This is a double quoted string";
  ?>
- ข้อแตกต่างระหว่าง quotes ( " ) กับ single quote ( ' ) คือ ภายใต้ single quote ( ' ) ตัวแปรไม่สามารถแสดงค่าได้:
  
  <php
  $total = 10;
  $example1 = ' The total is $total ';
  $example2 = " The total is $total ";
  ?>
  ผลการกำหนดค่าให้ตัวแปร $example1: "The total is $total"
  ผลการกำหนดค่าให้ตัวแปร $example2: "The total is 10"
- การนำข้อความ (string) มาเชื่อมต่อกันโดยใช้จุด "." :
  
  <php
  $a = 'apples';
  $b = 'bananas';
  $c = $a . ' and ' . $b;
  ?>
ผลการกำหนดค่าให้ตัวแปร $c: "apples and bananas"
- การนำข้อความ (string) มาเชื่อมต่อกันโดยใช้ ".=" :
  
  <php
  $a = 'apples';
  $a .= ' and bananas';
  ?>
ผลการกำหนดค่าให้ตัวแปร $a: "apples and bananas"

อักขระต้องห้าม (Escape Characters)

ตัวอักขระต้องห้าม (Escape Characters) คือตัวอักษรที่ตัวแปรภาษาไม่สามารถดำเนินการประมวลผลได้ เนื่องจากจะซ้ำกับกฏ หรือ คำบังคับของภาษา ดังนั้นต้องหลีกเลี่ยงโดยการใช้เครื่องหมายบางอย่างไปกำกับไว้ ในภาษา PHP จะใช้ Back Slash ( \ ) ไปเขียนกำกับไว้ข้างหน้าตัวอักขระต้องห้าม

Character	Escaped Character	Description
ไม่มี	\n	Adds a linefeed
ไม่มี	\r	Adds a carriage return
ไม่มี	\t	Adds a tab
\	\\	Back Slash
$	\$	Dollar Sign
"	\"	Double Quote

การแสดงผลเครื่องหมาย Double Quote ( " )

<?php echo " \" "; ?>
การแสดงผลเครื่องหมาย Dollar Sign ( ? )

<?php echo " \? "; ?>
การแสดงผลเครื่องหมาย Back Slash ( \ )

<?php echo " \\ "; ?>

อาร์เรย์ (Arrays)
- อาร์เรย์ คือ ตัวแปรชนิดหนึ่งที่สามารถเก็บข้อมูลได้หลายค่าในเวลาเดียวกัน โดยเก็บข้อมูลในลักษณะคู่ลำดับ
  - การสร้างอาร์เรย์ทำได้ 2 วิธีการ
    - การสร้างอาร์เรย์โดยใช้ฟังก์ชั่น array()
      <?php
            $personInfo = array( "cid" => "1296857369124" ,
    "firstname" => "Dulyawat" ,
             "lastname" => "Mapong" ,
                 "age" => 30 );
            ?>
    - การสร้างอาร์เรย์โดยวิธีการกำหนดค่าแบบ Dynamic
            <?php
            $personInfo["cid"] = "1296857369124";
    $personInfo["firstname"] = "Dulyawat";
    $personInfo["lastname"] = "Mapong";
        $personInfo["age"] = 30;
            ?>
  - อาร์เรย์เก็บข้อมูลในลักษณะเป็นคู่ลำดับ โดยข้อมูลที่เก็บในอาร์เรย์แต่ละค่า ประกอบด้วย
    คีย์ (Key) เป็นตัวชี้ตำแหน่ง และข้อมูลที่เก็บ (Value)
    
    คีย์ (Key)
    ค่า (Value)
    cid 1296857369124
    firstname Dulyawat
    lastname Mapong
    age 30
  - การแสดงค่าจากอาร์เรย์ ใช้คำสั่ง echo และระบุชื่อของอาร์เรย์พร้อมทั้งชื่อคัย์ (Key) ของอาร์เรย์:
  <?php
  echo "หมายเลข CID : " . $personInfo["cid"] . "<BR>";
  echo "ชื่อ : " . $personInfo["firstname"] . "<BR>";
  echo "นามสกุล : " . $personInfo["lastname"] . "<BR>";
  echo "อายุ : " . $personInfo["age"] . "<BR>";
  ?>
  ผลลัพธ์:
      หมายเลข CID : 1296857369124
      ชื่อ : Dulyawat
      นามสกุล : Mapong
      อายุ : 30
คำสั่งควบคุม (Control Structures)
- if
if ($apples > $bananas) echo "You have more apples than bananas!";
- if … else
  
  if ($apples > $bananas) echo "You have more apples than bananas!";
  else if ($apples == $bananas) echo "You have apples less than or equal to bananas!";
- if … else if … else
  if ($apples > $bananas) echo "You have more apples than bananas!";
  else if ($apples == $bananas) echo "You have apples equal to bananas!";
  else echo "You have less apples than bananas!";

ตัวดำเนินการ (Operators)

Operator	ความหมาย
==	เท่ากับ (Equal to)
!=	ไม่เท่ากับ (Not equal to)
<>	ไม่เท่ากับ (Not equal to)
<	น้อยกว่า (Less than)
>	มากกว่า (Greater than)
<=	น้อยกว่าหรือเท่ากับ (Less than or equal to)
>=	มากกว่าหรือเท่ากับ (Greater than or equal to)

การใช้คำสั่งควบคุมและตัวดำเนินการ (Control Structures and Operators)
if ($apples > $bananas)
{
echo "You have more apples than bananas, so I'm taking away your bananas!";
$bananas = 0;
}

การวนลูปแบบ for (for Loop)
- การใช้ fore สำหรับการวนลูปค่าทั้งหมดอาร์เรย์
  <?php
  //สร้างอาร์เรย์ชื่อ $arrayAmpur โดยใช้ฟังก์ชั่น array()
  $arrayAmpur = array( "เมื่อง" , "บางกรวย" , "บางใหญ่" );
  
  for ( $i = 0; $i < count($arrayAmpur); $i ++)
  {
  echo " $i : " . $arrayAmpur[$i] . "<BR>";
  }
  ?>
  ผลลัพธ์:
  0 : เมื่อง
  1 : บางกรวย
  2 : บางใหญ่

การวนลูปแบบ foreach (foreach Loop)
- การใช้ foreach สำหรับการวนลูปค่าทั้งหมดอาร์เรย์
  <?php
  //สร้างอาร์เรย์ชื่อ $arrayAmpur โดยใช้ฟังก์ชั่น array()
  $arrayAmpur = array( "1201" => "เมื่อง" , "1202" => "บางกรวย" );
  
  foreach ( $arrayAmpur as $kAmpur => $vAmpur)
  {
  echo " $kAmpur : $vAmpur <BR>";
  }
  ?>
  ผลลัพธ์:
  1201 : เมื่อง
  1202 : บางกรวย

การวนลูปแบบ while (while Loop)
- การใช้ while สำหรับการวนลูปค่าทั้งหมดจากตาราง employees ของฐานข้อมูลชื่อ "compasstravel"
  <?php
  //การติดต่อฐานข้อมูล กำหนดให้ connection ชื่อ $dbconn
  $dbconn = mysql_connect("localhost" , "root" , "rootpass");
  //การเลือกใช้งานฐานข้อมูลชื่อ "compasstravel" โดยติดต่อผ่าน connection ชื่อ $dbconn
  mysql_select_db("compasstravel" , $dbconn);
  //ประมวลผลคำสั่ง SQL ผลลัพธ์ที่ได้เก็บในตัวแปร $rsEmp โดยติดต่อผ่าน connection ชื่อ $dbconn
  $rsEmp = mysql_query("SELECT * FROM employees" , $dbconn);
  while ( $row_rsEmp = mysql_fetch_array($rsEmp) ) //เริ่มต้นวนลูป while
  {
  echo "Employee ID: " . $row_rsEmp['employeeid'] . "<BR>";
  echo "First Name: " . $row_rsEmp['firstname'] . "<BR>";
  echo "Last Name: " . $row_rsEmp['lastname'] . "<BR>";
  } //จบการวนลูป while
  
  //ปิดการติดต่อฐานข้อมูลชื่อ $dbconn
  mysql_close($dbconn);
  ?>
  ผลลัพธ์:
  Employee ID: 26
  First Name: David
  Last Name: Beckham

ฟังก์ชั่น (Functions)
- ฟังก์ชั่นของ PHP (PHP Built-In Functions)
  echo()        เช่น    echo(" Hello, World ")
  print()        เช่น    print(" Hello, World ")
  date()        เช่น     date("Y-m-d H:i:s")
  substr()        เช่น     substr("ABCDEF" , 0 , 4)
  strlen()        เช่น     strlen("ABCDEFGH")
  strpos()        เช่น     strpos("ABCDEFGHI" , "DE")
  strtoupper()    เช่น    strtolower("AbCdEfGh")
  strtolower()    เช่น    strtolower("AbCdEfGh")
  trim()        เช่น    trim(" A B C ")
  explode()        เช่น     explode("|" , "ABC|DEF|GHI")
  list()        เช่น     list($a , $b , $c) = explode("|" , "ABC|DEF|GHI")
  sprintf()        เช่น    sprintf("%01.2f" , 5.56)
- ฟังก์ชั่นที่สร้างขึ้นเอง (PHP User-Defined Functions)
  - รูปแบบการประกาศฟังก์ชั่น
    function function_name ( argument )
    {
    statement;
    .....
    }
  - ฟังก์ชั่นสำหรับแปลงข้อมูลวันเดือนปี จากรูปแบบมาตรฐาน YYYY-MM-DD (ปี ค.ศ.)
    <?php
    function thaidate($vardate) //เริ่มต้นการประกาศฟังก์ชั่น
    {
    $arrayDate = explode("-", $vardate);
        list($yearno, $monthno, $dayno) = $arrayDate;
        $temp = $dayno . "/" . $monthno . "/" . ($yearno+543);
        return $temp;
    } //สิ้นสุดการประกาศฟังก์ชั่น
    ?>
    
    ฟังก์ชั่นนี้สามารถเรียกใช้ได้จากที่ใดๆ ในไฟล์ PHP ที่ประกาศฟังก์ชั่น thaidate() ไว้
    <?php
    //ข้อมูล YYYY-MM-DD ที่จะป้อนให้ฟังก์ชั่น
    $birthdate = "1971-05-20";
    
    //เรียกใช้ฟังก์ชั่น ให้แปลงข้อมูลรูปแบบ DD/MM/YYYY (ปี พ.ศ.) จะได้ผลลัพธ์ 20/05/2514
    echo thaidate($birthdate);
    ?>
  - ฟังก์ชั่นสำหรับเรียกค้นหาข้อมูลชื่อแผนก
    <?php
    function GetDept($deptid) //เริ่มต้นการประกาศฟังก์ชั่น
    
    //การติดต่อฐานข้อมูล กำหนดให้ connection ชื่อ $dbconn
    $dbconn = mysql_connect("localhost" , "root" , "rootpass");
    //การเลือกใช้งานฐานข้อมูลชื่อ "compasstravel" ผ่าน connection ชื่อ $dbconn
    mysql_select_db("compasstravel" , $dbconn);
    //ประมวลผลคำสั่ง SQL ผลลัพธ์ที่ได้เก็บในตัวแปร $rsDep ผ่าน connection ชื่อ $dbconn
    $rsDep = mysql_query("SELECT * FROM departments WHERE deptid=$deptid ",$dbconn);
    $row_rsDep = mysql_fetch_array($rsDep);
    if ( $row_rsDep && ( mysql_num_rows($row_rsDep) > 0 ) ) {
    $temp = $row_rsDep['deptname'];
    } //end If
    
    //ปิดการติดต่อฐานข้อมูลชื่อ $dbconn
    mysql_close($dbconn);

return $temp; //ส่งค่าออกจากฟังก์ชั่น

} //สิ้นสุดการประกาศฟังก์ชั่น

ฟังก์ชั่นนี้สามารถเรียกใช้ได้จากที่ใดๆ ในไฟล์ PHP ที่ประกาศฟังก์ชั่น GetDept() ไว้

<?php

//ข้อมูลรหัสแผนกปัจจุบัน

$current_deptid = "7";

//เรียกใช้ฟังก์ชั่น ให้แสดงชื่อแผนก โดยส่งค่าพารามิเตอร์ $current_deptid ให้ฟังก์ชั่น

echo GetDept($current_deptid);
?>

บทที่ 4 ความรู้พื้นฐานเกี่ยวกับภาษา HTML

2010-06-27T13:14:00.001+07:00

เนื้อหาบทนี้จะทบทวนความรู้เกี่ยวกับภาษา HTML ซึ่งจะกล่าวถึงวิธีการใช้โปรแกรม Dreamweaver แทรกแท็ก HTML ลงในเว็บเพจ เฉพาะแท็กที่จำเป็นต้องใช้ในการพัฒนา PHP เว็บแอพพลิเคชั่นเท่านั้น

การแสดงไฟล์รูปภาพและข้อความในเว็บเพจ

การนำรูปภาพชนิดต่างๆ เข้ามาตกแต่งหน้าเว็บเพจ นอกจากจะช่วยทำให้เกิดความสวยงามแล้ว ยังสามารถทำเป็นลิงค์ (Hyperlink) เพื่อใช้ในการลิงค์หน้าเว็บเพจได้ด้วย ชนิดของรูปภาพที่นิยมนำมาใช้ตกแต่งเว็บเพจ คือ

.JPG เป็นรูปภาพที่มีลักษณะเป็นภาพนิ่ง ถูกสร้างขึ้นมาจากโปรแกรมทางด้านกราฟิก เช่น Photoshop หรือเป็นการไฟล์รูปภาพจากกล้องดิจิตอล

.GIF รูปภาพชนิดนี้จะมีขนาดเล็กกว่า .jpg เล็กน้อย จะมีลักษณะทั้งรูปแบบภาพนิ่ง และภาพเคลื่อนไหว ถูกสร้างขึ้นมาจากโปรแกรมทางด้านกราฟิก เช่น Photoshop ImageReady เป็นต้น

นอกเหนือจากนี้ ยังมีรูปแบบอื่นๆ อีก เช่น .PNG .BMP ฯลฯ รวมทั้งไฟล์จาก Flash หรือ Shockwave

ขั้นตอนการแสดงไฟล์รูปภาพและข้อความในเว็บเพจ:

เริ่มต้นที่โปรแกรม Dreamweaver คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ General คลิกเลือก Basic Page > HTML หลังจากนั้นคลิกปุ่ม Create บันทึกเป็นไฟล์ memberprofile.htm
คลิกที่เมนู Insert > Image จะปรากฏไดอะล็อก Select Image Source ขึ้นมา ให้คลิกเลือกไฟล์รูปภาพ หลังจากนั้นคลิกปุ่ม OK

รูปแสดงไดอะล็อก Select Image Source สำหรับคลิกเลือกไฟล์รูปภาพมาแสดงในเว็บเพจ
หากเป็นการสร้างไฟล์เว็บเพจใหม่ ที่ยังไม่ได้มีการบันทึกไฟล์ จะปรากฏไดอะล็อกแจ้งให้ทราบ ให้คลิกปุ่ม OK

แทรกข้อความลงด้านล่างของรูปภาพ จะได้หน้าเว็บเพจ ดังรูปด้านล่าง

รูปการแสดงไฟล์รูปภาพในเว็บเพจ

บันทึกไฟล์ memberprofile.htm
กดปุ่ม F12 เพื่อทดสอบผ่านเว็บเบราเซอร์

การสร้างลิงค์เชื่อมโยงเว็บเพจ

การสร้างจุดลิงค์ระหว่างหน้าเว็บเพจหรือระหว่างเว็บไซต์ เราเรียกว่า ไฮเปอร์ลิงค์ (Hyperlink) ซึ่งมีหน้าที่ในการเปิดหน้าเว็บเพจนั้นๆ ตามที่ได้กำหนดไว้ การลิงค์เว็บเพจเป็นการสั่งให้เว็บเบราเซอร์ไปทำงานที่อีกเว็บเพจหนึ่ง หรือไปทำงานที่เว็บไซต์อื่นๆ หรือแม้แต่ในหน้าเว็บเพจเดียวกัน ในที่นี้จะยกตัวอย่างการสร้างลิงค์แบบต่างๆ ดังต่อไปนี้

การสร้างลิงค์จากข้อความ

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

ขั้นตอนการสร้างลิงค์จากข้อความ:

เริ่มต้นที่โปรแกรม Dreamweaver คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ General คลิกเลือก Basic Page > HTML หลังจากนั้นคลิกปุ่ม Create บันทึกเป็นไฟล์ link.htm
แทรกไฟล์รูปภาพ "photos\amit_kelley.jpg" และข้อความ "Amit Kelly" ลงในเว็บเพจ
ลากเม้าส์เพื่อทำไฮไลต์เลือกข้อความ "Amit Kelly" เพื่อสร้างลิงค์ ดังรูป

รูปแสดงการไฮไลต์ข้อความเพื่อสร้างลิงค์
คลิกที่เมนู Window > Properties จะปรากฏไดอะล็อก Properties แสดงขึ้นมา ให้คลิกที่ปุ่ม Browse for File เพื่อเลือกไฟล์ที่ต้องการลิงค์ไป หรือพิมพ์ชื่อ URL หรือชื่อไฟล์ ที่ต้องการลิงค์ไปที่ช่อง Link ได้เลย

หากเลือกคลิกปุ่ม Browse for File จะปรากฏไดอะล็อก Select File ให้คลิกเลือก HTML ไฟล์ "memberprofile.htm" ที่ต้องการลิงค์ไป หลังจากนั้นคลิกปุ่ม OK
ที่หน้าจอเว็บเพจจะปรากฏข้อความที่เป็นจุดลิงค์มีลักษณะขีดเส้นใต้ ดังรูป

บันทึกไฟล์ link.htm
กดปุ่ม F12 เพื่อทดสอบผ่านเว็บเบราเซอร์

การลิงค์จากไฟล์รูปภาพ

การลิงค์ด้วยรูปภาพ จะมีลักษณะคล้ายกับการลิงค์ด้วยข้อความ เมื่อเรานำเม้าส์ไปคลิกบนรูปภาพที่ต้องการสร้างการลิงค์
ลักษณะลูกศรเม้าส์จะเปลี่ยนไปเป็นรูปนิ้วมือชี้

ขั้นตอนการลิงค์จากไฟล์รูปภาพ:

เริ่มต้นที่โปรแกรม Dreamweaver เปิดไฟล์ link.htm
คลิกเม้าส์เลือกรูปภาพในเว็บเพจที่ต้องการสร้างจุดลิงค์ ดังรูป
คลิกที่เมนู Window > Properties จะปรากฏไดอะล็อก Properties แสดงขึ้นมา ให้คลิกที่ปุ่ม Browse for File
เพื่อเลือกไฟล์ที่ต้องการลิงค์ไป หรือพิมพ์ชื่อ URL ที่ต้องการลิงค์ไปที่ช่อง Link ได้เลย
หากเลือกคลิกปุ่ม Browse for File จะปรากฏไดอะล็อก Select File ให้คลิกเลือก HTML
ไฟล์ที่ต้องการลิงค์ชี้ไปหา หลังจากนั้นคลิกปุ่ม OK
บันทึกไฟล์ link.htm
กดปุ่ม F12 เพื่อทดสอบผ่านเว็บเบราเซอร์

การสร้างตาราง HTML

การสร้างตาราง คือขั้นตอนในการแทรกแท็ก <table> ของตาราง HTML ลงในเว็บเพจ เพื่อช่วยในการจัดรูปแบบการแสดงผลข้อมูลหรือรูปภาพในเว็บเพจ

ในที่นี้จะเป็นการแทรกโดยการใช้เครื่องมือของโปรแกรม Dreamweaver ช่วยในการสร้างโค้ด HTML โดยผู้พัฒนาเว็บไซต์ไม่ต้องพิมพ์โค้ดเอง ช่วยประหยัดเวลาในการพัฒนา

ขั้นตอนการสร้างตาราง HTML:

เริ่มต้นที่โปรแกรม Dreamweaver คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ General คลิกเลือก Basic Page > HTML หลังจากนั้นคลิกปุ่ม Create ให้บันทึกเป็นไฟล์ htmltable.htm
เลือกเมนู Modify > Page Properties เมื่อปรากฏไดอะล็อก Page Properties ขึ้นมา ให้กำหนด Properties ของเว็บเพจ ดังรายละเอียดด้านล่างนี้ หลังจากนั้นคลิกปุ่ม OK

รูปแสดงการกำหนดค่าในไดอะล็อก Page Properties

ค่าของไดอะล็อก	ค่าที่กำหนด
Appearance > Background Image	images/bkg.gif
Title/Encoding > Title	HTML Table
Title/Encoding > Document Type (DTD)	None
Title/Encoding > Encoding	Thai (Windows)

ตารางแสดงการกำหนดค่าในไดอะล็อก Page Properties

เลือกเมนู Insert > Table เพื่อสร้างตาราง จะปรากฏไดอะล็อก Table
ให้กำหนดค่าดังรายละเอียดด้านล่างนี้ หลังจากนั้นคลิกปุ่ม OK

ค่าของไดอะล็อก	ค่าที่กำหนด
Rows	3
Columns	4
Table width	90 percent
Border thickness	1
Cell padding	1
Cell spacing	1

ตารางแสดงการกำหนดค่าในไดอะล็อก Table

รูปแสดงการกำหนดค่าในไดอะล็อก Table

ปรับแต่งเว็บเพจ โดยการแทรกไฟล์รูปภาพ และแทรกข้อความ ชื่อ
นามสกุล
โทรศัพท์

แก้ไข และ ลบ ลงในตาราง ดังรูปด้านล่าง

บันทึกการแก้ไขไฟล์ หลังจากนั้นกดปุ่ม F12 เพื่อทดสอบผ่านเว็บเบราเซอร์

Exercise:

สร้างตารางสำหรับแสดงข้อมูลพนักงาน บันทึกเป็นไฟล์ htmltable.htm ดังรูปด้านล่าง
Hint: - ประยุกต์การใช้งานแท็ก <TABLE> <IMG> <A> และ
- Backgroung Image ใช้ไฟล์ PHPWEB\images\bkg_list.gif

- Title ใช้ไฟล์ PHPWEB\images\title_list.gif

สร้างตารางสำหรับแสดงข้อมูลพนักงานแต่ละคน (Detail) บันทึกเป็นไฟล์ htmltable2.htm ดังรูปด้านล่าง
Hint: - ประยุกต์การใช้งานแท็ก <TABLE> <IMG> <A> และ <FORM>
- Backgroung Image ใช้ไฟล์ PHPWEB\images\bkg_detail.gif
- Title ใช้ไฟล์ PHPWEB\images\title_detail.gif

บทที่ 3 การกำหนดเว็บไซต์ใน Dreamweaver

2010-06-27T13:06:00.001+07:00

Dreamweaver คือโปรแกรมประเภท HTML Editor ระดับมืออาชีพ มีความสามารถในการใช้ออกแบบ
เขียนโค้ด บริหารจัดการเว็บไซต์ เว็บเพจ และเว็บแอพพลิเคชั่น ช่วยลดงาน ลดเวลาในการพัฒนาเว็บเพจ
ช่วยในการสามารถสร้างโค้ด HTML รวมทั้งสคริปต์ภาษา PHP, ASP หรือ JSP โดยที่เราไม่จำเป็นต้องเขียนโค้ดเลยก็ได้

แนะนำส่วนประกอบของ Dreamweaver

รูปแสดงหน้าจอของ Dreamweaver

Menu bar เป็นส่วนรวมคำสั่งในการใช้งานต่างๆ
Insert bar ประกอบด้วยปุ่มสำหรับแทรกอ็อบเจ็คต์ต่างๆ ลงในเว็บเพจ เช่น รูปภาพ, ตาราง, ฟอร์ม และ เลเยอร์ ฯลฯ ซึ่งอ็อบเจ็คต์เหล่านี้ เมื่อแทรกลงในเว็บเพจก็คือการแทรกแท็ก HTML ลงไปนั่นเอง ซึ่งอีกวิธีการหนึ่ง เราสามารถใช้เมนู Insert แทนการคลิกปุ่มต่างๆ บน Insert Bar ได้เช่นเดียวกัน
Document toolbar ประกอบด้วยปุ่มและเมนูสำหรับเปลี่ยนรูปแบบการดูเนื้อหาของเว็บเพจใน Document window เช่น Design view และ Code view และทางเลือกอื่นๆ นอกจากนั้น ยังมีเมนูสำหรับเรียกดูเว็บเพจในแบบ preview บนเว็บเบราเซอร์ เช่น Internet Explorer หรือ Netscape Navigator ได้อีกด้วย
Document window แสดงเนื้อหา โค้ด ของเว็บเพจที่เราสร้างและแก้ไข
Property inspector สำหรับให้เราตรวจสอบและแก้ไขคุณสมบัติของอ็อบเจ็คต์บนเว็บเพจ
Panel groups คือกลุ่มของแถบ (Panel) การทำงานกลุ่มต่างๆ หากต้องการดูรายการกลุ่มของแถบใด สามารถคลิกที่ลูกศรด้านซ้ายของชื่อกลุ่ม
Site panel สำหรับให้เราใช้ในการจัดการไฟล์และโฟลเดอร์ต่างๆ ภายในเว็บไซต์ของเรา
Tag selector สำหรับคลิกเพื่อเลือกแท็กในตำแหน่งที่ต้องการบนเว็บเพจ

นอกเหนือจากนี้ Dreamweaver ยังมีแถบ (Panel) และเครื่องมืออื่นๆ ที่ไม่ได้แสดงให้เห็นในหน้าจอนี้ เช่น History panel และ Code inspector เป็นต้น แต่สามารถเรียกใช้ได้ผ่านเมนู Window ของโปรแกรม

การกำหนดเว็บไซต์ใน Dreamweaver

การกำหนดเว็บไซต์ คือ การกำหนดค่าเริ่มต้นในโปรแกรม Dreamweaver สำหรับการพัฒนาแต่ละเว็บแอพพลิเคชั่น
กล่าวคือ หากต้องการใช้งาน Dreamweaver ในการพัฒนาเว็บแอพพลิเคชั่น 1 ระบบงานก็ต้องกำหนดเว็บไซต์เพิ่มขึ้นมาอีก 1
เว็บไซต์ หรืออีก 1 โปรเจ็คต์นั่นเอง

ในขั้นตอนนี้จะอธิบายถึงวิธีการนำเอาไฟล์ตัวอย่าง มาติดตั้งในไดเร็คทอรี่ของ Apache เว็บเซิร์ฟเวอร์ ซึ่งจากขั้นตอน
การติดตั้ง PHP แอพพลิเคชั่นเซิร์ฟเวอร์โดยใช้ชุดโปรแกรม AppServ เว็บไดเร็คทอรี่ของ Apache เว็บเซิร์ฟเวอร์จะถูกกำหนดไว้ที่
C:\AppServ\www\

รูปแสดงเครื่องคอมพิวเตอร์ที่เกี่ยวข้องในการกำหนดเว็บไซต์

ขั้นตอนการกำหนดเว็บไซต์:

Unzip (Extract) ไฟล์ phpweb.zip ภายใต้ไดเร็คทอรี่ \PHPDW_Course จากแผ่น CD
ไปลงในไดเร็คทอรี่ C:\AppServ\www\ จะได้ไดเร็คทอรี่ C:\AppServ\www\phpweb\
เปิดโปรแกรม Dreamweaver แล้วไปที่เมนู Site -> Manage Sites…
เมื่อปรากฏไดอะล็อก Manage Sites ให้คลิกที่ปุ่ม New > Site ดังรูป

รูปแสดงไดอะล็อก Manage Sites
ช่อง Category คลิกที่รายการ Local Info กำหนดค่าดังต่อไปนี้ หลังจากนั้นคลิก Next

รูปแสดงการกำหนดค่ารายการเมนู Local Info

Site name: PHPWEB
(ชื่อเว็บแอพพลิเคชั่นที่เรากำหนดเอง)
Local root folder: C:\AppServ\www\PHPWEB\
(การกำหนดไดเร็คทอรี่ที่ใช้บันทึกซอร์สโค้ดที่เราพัฒนาขึ้นบนเครื่องเราเอง (local) )
HTTP address: http://localhost/phpweb/
(URL สำหรับใช้งานเว็บแอพพลิเคชั่นที่เราพัฒนาบนเครื่องเราเอง (local) )

ตารางสรุปการกำหนดค่ารายการเมนู Local Info

ที่ช่อง Category คลิกที่รายการ Testing Server กำหนดค่าดังต่อไปนี้ หลังจากนั้นคลิก OK

รูปแสดงการกำหนดค่ารายการเมนู Testing Server

Server Model: PHP MySQL
(การกำหนดให้ Dreamweaver รู้ว่าเราจะใช้ภาษาคอมพิวเตอร์ใด ในการพัฒนา
เว็บแอพพลิเคชั่นนั้น เช่น PHP MySQL หรือ ASP VBSCRIPT)
Access: Local/Network
(การกำหนดวิธีการติดต่อกับเว็บเซิร์ฟเวอร์ที่ใช้ทดสอบเว็บเพจ เลือกกำหนด
เป็นค่า None FTP หรือ Local/Network)
Testing Server Folder: C:\AppServ\www\PHPWEB\
(การกำหนดไดเร็คทอรี่ของเว็บเซิร์ฟเวอร์ เมื่อมีการทดสอบเว็บเพจด้วยการ
กด F12 Dreamweaver จะอ่านซอร์สโค้ดเพื่อการทดสอบจาก
ไดเร็คทอรี่นี้)
URL Prefix: http://localhost/phpweb/
(URL ของเว็บเซิร์ฟเวอร์ที่จะใช้ในการทดสอบ PHP สคริปต์ เมื่อกด F12)

ตารางสรุปการกำหนดค่ารายการเมนู Testing Server

ที่ช่อง Category คลิกที่รายการ Remote Info กำหนดค่าดังต่อไปนี้ หลังจากนั้นคลิก Next

รูปแสดงการกำหนดค่ารายการเมนู Remote Info

Access: FTP (วิธีการติดต่อกับ Remote WWW Server)
FTP Host: 192.168.1.100
(ชื่อเครื่อง หรือ IP address ของ FTP เซิร์ฟเวอร์ เช่น www.domain.com หรือ 192.168.1.100)
Host Directory: ชื่อไดเร็คทอรี่ของ FTP เซิร์ฟเวอร์ที่จะอัพโหลดไฟล์ขึ้นไป
ปกติจะถูกกำหนดค่าอัตโนมัติ (default) ไว้แล้ว ให้กำหนดค่าว่างไว้
Login: user1 (ชื่อ username สำหรับการใช้ล็อกอินเข้า FTP เซิร์ฟเวอร์)
Password: ***** (รหัสผ่านสำหรับ FTP Login)

ตารางสรุปการกำหนดค่ารายการเมนู Remote Info

NOTE:

ในกรณีที่พัฒนาเว็บไซต์บนเครื่องคอมพิวเตอร์ของเราเอง และเรายังไม่ต้องการอัพโหลดไฟล์เว็บเพจ ให้กำหนดค่า
Access: None โปรแกรมก็จะข้ามการกำหนดค่าอื่นๆ ในส่วนของ Remote Info ทั้งหมด

Dreamweaver จะแสดงรายการเว็บไซต์ปัจจุบันทั้งหมด ซึ่งจะมีรายชื่อเว็บไซต์ของ Dreamweaver แสดงอยู่ ให้คลิกปุ่ม DONE จะปรากฏเป็นหน้าจอของ Dreamweaver ซึ่งพร้อมสำหรับการพัฒนา PHP เว็บแอพพลิเคชั่น ซึ่งหน้าต่างด้านซ้ายหรือขวา (แล้วแต่การกำหนดรูปแบบ Workspace) จะแสดงไดเร็คทอรี่ที่กำลังใช้งานอยู่

รูปแสดงไดอะล็อก Manage Sites หลังการกำหนดเว็บไซต์เสร็จแล้ว
Dreamweaver ก็พร้อมสำหรับการเริ่มต้นใช้งาน เพื่อพัฒนาเว็บแอพพลิเคชั่น PHPWEB
ในการเรียกใช้งานครั้งต่อไป Dreamweaver จะเปิดมาที่เว็บไซต์ที่มีการเปิดใช้งานล่าสุดเสมอ

รูปแสดงหน้าจอของ Dreamweaver เมื่อเปิดเว็บไซต์ PHPWEB เพื่อใช้งาน

บทที่ 2 การติดตั้งโปรแกรม Dreamweaver

2010-06-27T12:48:00.002+07:00

Dreamweaver เป็นโปรแกรมสำหรับการพัฒนาเว็บแอพพลิเคชั่นยอดนิยมของนักพัฒนาเว็บไซต์ทั้งหลาย
สามารถดาวน์โหลดชุดทดลองได้ที่ https://www.adobe.com/go/trydreamweaver

ความต้องการเบื้องต้นของโปรแกรม:

หน่วยประมวลผล Intel® Pentium® 4, Intel Centrino®, Intel Xeon®, Intel Core™ Duo หรือหน่วยประมวลผลอื่นๆ ที่ประมวลผลได้เทียบเท่าขึ้นไป
ระบบปฏิบัติการ Microsft® Windows® XP Service Pack 2 หรือ Windows Vista® Home, Premium, Business, Ultimate หรือ Enterprise Service Pack 1 หรือ Windows 7
หน่วยความจำขนาดไม่ต่ำกว่า 512MB (แนะนำให้มีหน่วยความจำ 1GB ขึ้นไป)
พื้นที่ฮาร์ดดิสก์ขนาดประมาณ 1GB (รวมทั้งพื้นที่ว่างอีกส่วนหนึ่งที่จำเป็นต้องใช้ระหว่างการติดตั้งด้วย)
จอภาพแสดงผลได้ความละเอียด 1280 x 800 พิกเซล และการ์ดแสดงผล 16 บิท
Microsoft Internet Explorer หรือ Netscape Navigator เวอร์ชั่น 4 ขึ้นไป
ไดรว์ดีวีดี (DVD-ROM) สำหรับใช้ในการติดตั้งจากแผ่น
การเชื่อมต่ออินเตอร์เน็ตสำหรับการดาวน์โหลดและลงทะเบียนขอใช้โปรแกรมแบบออนไลน์

ขั้นตอนการติดตั้งโปรแกรม:

ดาวน์โหลดโปรแกรมจาก URL https://www.adobe.com/go/trydreamweaver
ดับเบิลคลิกไฟล์ \Dreamweaver\Dreamweaver_11_LS1.exe
หากปรากฏหน้าจอ Open File - Security Warning ให้คลิกปุ่ม Run
หน้าจอ Folder Location โปรแกรมจะแสดงโฟลเดอร์ที่จะแตกไฟล์ชุดติดตั้ง ให้คลิกปุ่ม Next
หน้าจอ Welcome คลิกปุ่ม Accept เพื่อยอมรับเงื่อนไขการใช้งาน
คลิกเลือก Install this product as a trial เพื่อทดลองใช้งาน เลือกภาษาในการติดตั้งเป็น English (International) หลังจากนั้นคลิกปุ่ม Next
แสดงพื้นที่ฮาร์ดดิสก์ที่ใช้ในการติดตั้งและโฟลเดอร์ที่จะทำการติดตั้งโปรแกรม ให้คลิกปุ่ม INSTALL
เมื่อติดตั้งเสร็จสิ้น ให้คลิกปุ่ม DONE
เปิดใช้งานโดยคลิก Start > All Programs > Adobe Dreamweaver CS5
หากใช้งานแบบทดลองใช้งาน 30 วัน ให้คลิกปุ่ม START TRIAL
คลิกปุ่ม SKIP THIS STEP เพื่อข้ามขั้นตอนการลงทะเบียนกับเว็บไซต์
เมื่อปรากฏไดอะล็อก Default Editor ให้เรากำหนดภาษาคอมพิวเตอร์ที่ต้องการเขียนด้วย Dreamweaver
ให้ใช้งานตามข้อกำหนดเบื้องต้นของโปรแกรม คลิกปุ่ม OK เพื่อเริ่มต้นใช้งานำได้เลย
เข้าสู่หน้าจอหลักของโปรแกรม