การพัฒนาเว็บแอพพลิเคชั่นด้วย PHP และ Dreamweaver MX
ผู้เขียนมีประสบการณ์ในการพัฒนาเว็บแอพพลิเคชั่นมาหลายปี ได้มีโอกาสใช้เครื่องมือในการพัฒนาเว็บแอพพลิเคชั่นมาหลายโปรแกรม จนกระทั่งได้มาพัฒนาเว็บแอพพลิเคชั่นด้วยภาษา ASP จึงได้ทดลองดาวน์โหลดโปรแกรมMacromedia Dreamweaver UltraDev เวอร์ชั่น 1.0 มาใช้งาน รู้สึกชอบในความง่ายในการใช้งาน เหมาะสำหรับผู้ที่เริ่มต้นศึกษา ต่อมาก็ได้ทดลองดาวน์โหลด extension มาทดลองพัฒนาด้วยภาษา PHP และได้มีโอกาสไปเป็นวิทยากรไปถ่ายทอดประสบการณ์ให้ผู้ที่สนใจอีกหลายแห่ง
บทเรียนเรื่อง การพัฒนาเว็บแอพพลิเคชั่นด้วย PHP และ Dreamweaver MX นี้ จะอ้างอิงถึงการใช้งานกับโปรแกรม Macromedia Dreamweaver
MX เวอร์ชั่น 2004 ซึ่งเป็นเวอร์ชั่นล่าสุด สามารถดาวน์โหลดเวอร์ชั่นทดลองได้จากเว็บไซต์ http://www.macromedia.com เนื้อหาจะเหมาะสำหรับผู้ที่สนใจในการพัฒนา PHP Web
Application ที่สามารถใช้งานได้จริง โดยจะเน้นไปที่รายละเอียดแต่ละเรื่องที่มีการใช้กันเป็นประจำ พร้อมทั้งนำไปประยุกต์ใช้จริงกับระบบเว็บแอพพลิเคชั่นที่เตรียมมาสำหรับพัฒนาเป็นแบบฝึกหัดตัวอย่าง
เนื้อหาในบทเรียนนี้จะเป็นลักษณะ Step-By-Step ผู้ที่จะศึกษาต้องทดลองทำตามทีละขั้นตอน เริ่มจากเนื้อหาในบทที่
1 ไปจนกระทั่งถึงบทสุดท้าย โดยสามารถดาวน์โหลดซอร์สโค้ดตัวอย่างประกอบบทเรียน พร้อมทั้งโปรแกรมเบื้องต้นที่จำเป็นสำหรับบทเรียนไปติดตั้งบนเครื่องที่จะทดลองศึกษา
คุณสมบัติผู้ที่จะเริ่มต้นศึกษาวิธีการพัฒนาเว็บแอพพลิเคชั่น:
o ผู้มีพื้นฐานเรื่องการใช้งานระบบปฏิบัติการ Windows และโปรแกรมประยุกต์ต่างๆ เป็นอย่างดี เช่น Word, Excel เป็นต้น
o ผู้มีพื้นฐานเรื่องระบบอินเตอร์เน็ต การใช้งาน E-Mail,
FTP, World Wide Web
o ผู้มีพื้นฐานเรื่องระบบจัดการฐานข้อมูล เช่น MS-Access, MS-SQL,
MySQL หรือ Postgres อย่างใดอย่างหนึ่ง
o ผู้มีพื้นฐานการเขียนโปรแกรมภาษา PHP หรือภาษาใดๆ มาก่อน
การอัพโหลดไฟล์
การอัพโหลดไฟล์ ก็คือ
การส่งไฟล์จากเครื่องคอมพิวเตอร์ Client ไปยังเครื่องคอมพิวเตอร์ Server สำหรับภาษา PHP นั้น สามารถเขียนโค้ดอัพโหลดได้เลย โดยเราไม่ต้องไปติดตั้งโมดูลใดๆ
เพิ่มเติม เราสามารถสร้างเว็บเพจสำหรับการอัพโหลดไฟล์ได้อย่างง่ายดาย
การสร้างเว็บเพจเพื่ออัพโหลดไฟล์
แบ่งการทำงานได้เป็นขั้นตอนดังต่อไปนี้
การสร้างฟอร์มสำหรับอัพโหลดไฟล์
การเขียนสคริปต์ PHP สำหรับการอัพโหลดไฟล์
การทดสอบระบบดาวน์โหลด
|
การสร้างฟอร์มสำหรับอัพโหลดไฟล์
|
การสร้างระบบอัพโหลดนั้น Dreamweaver MX จะช่วยได้ในการสร้างฟอร์มสำหรับอัพโหลด
ส่วนโค้ดสำหรับจัดการไฟล์ จำเป็นจะต้องสวิทช์ไปที่โหมดโค้ด (Code
View) เพื่อเขียนโค้ดเอง
ในขั้นตอนแรกจะเป็นการใช้ Dreamweaver
MX แทรกฟอร์มลงในเว็บเพจ สำหรับให้ผู้ใช้สามารถคลิกปุ่ม Browse… เลือกไฟล์ที่ต้องการอัพโหลด นอกจากนั้นก็ยังมีการแทรกปุ่ม Upload สำหรับคลิกเพื่อเริ่มต้นการอัพโหลดไฟล์
ขั้นตอนการสร้างฟอร์มสำหรับอัพโหลดไฟล์:
1. เปิดโปรแกรม Dreamweaver MX คลิกเมนู File
> New จะปรากฏไดอะล็อก New
Document ขึ้นมา ให้คลิกแท็บ General เลือก Dynamic Page > PHP หลังจากนั้นคลิกปุ่ม Create บันทึกเป็นไฟล์ fileupload.php
2. แทรกฟอร์มลงในเว็บเพจ โดยคลิกที่เมนู
Insert > Form
3. กำหนดคุณสมบัติของฟอร์ม โดยการคลิกเม้าส์วางเคอร์เซอร์ให้อยู่ภายฟอร์ม
ซึ่งแสดงขอบเขตด้วยเส้นประสีแดง หลังจากนั้นคลิกเลือกแท็ก <form> ที่ Tag Selector บริเวณขอบล่างซ้ายของหน้าจอ
คลิกที่เมนู Window > Properties เมื่อปรากฏไดอะล็อก Properties ขึ้นมา ให้กำหนดคุณสมบัติของฟอร์มดังต่อไปนี้
|
ค่าของไดอะล็อก
|
ค่าที่กำหนด
|
|
Form
Name
|
fmUpload
|
|
Action
|
upload.php
|
|
Method
|
POST
|
|
Enctype
|
Multipart/form-data
|
ตารางแสดงไดอะล็อกกำหนดคุณสมบัติของแท็ก <form>
รูปแสดงไดอะล็อกกำหนดคุณสมบัติของแท็ก <form>
หลังจากการแทรกฟอร์มและกำหนดค่าต่างๆ เสร็จแล้ว
ให้คลิกที่ปุ่ม Show Code View 
แล้วลองสังเกตดูโค้ดที่ Dreamweaver
MX สร้างขึ้นมา จะเห็นว่าในแท็ก <form> จะปรากฏค่า attribute enctype="multipart/form-data" ซึ่งจะต้องใช้เสมอในฟอร์มที่มีการเรียกใช้ Form Object
ชนิด File Field
แล้วลองสังเกตดูโค้ดที่ Dreamweaver
MX สร้างขึ้นมา จะเห็นว่าในแท็ก <form> จะปรากฏค่า attribute enctype="multipart/form-data" ซึ่งจะต้องใช้เสมอในฟอร์มที่มีการเรียกใช้ Form Object
ชนิด File Field
4. แทรก Form Objects ชนิด File
Field ลงภายในฟอร์ม หลังจากนั้นให้กำหนดคุณสมบัติของ File
Field โดยการคลิกที่เมนู Window >
Properties เมื่อปรากฏไดอะล็อก Properties ขึ้นมา ให้กำหนดชื่อในช่อง FileField
Name เป็น "File" ดังรายละเอียดด้านล่างนี้
|
ค่าของไดอะล็อก
|
ค่าที่กำหนด
|
|
FileFieldName
|
File
|
|
CharWidth
|
50
|
ตารางแสดงไดอะล็อกกำหนดคุณสมบัติของ Form
Object ชนิด File Field
5. แทรก Form Objects ชนิด
Button ลงภายในฟอร์ม หลังจากนั้นให้กำหนดคุณสมบัติของ Button
โดยการคลิกที่เมนู Window >
Properties เมื่อปรากฏไดอะล็อก Properties ขึ้นมา ให้กำหนดคุณสมบัติของ Button ดังต่อไปนี้
|
ค่าของไดอะล็อก
|
ค่าที่กำหนด
|
|
Label
|
Upload
|
|
Action
|
Submit
form
|
ตารางแสดงไดอะล็อกกำหนดคุณสมบัติของ Form
Object ชนิด Button
6. คลิกที่ปุ่ม Show Code View แล้วลองสังเกตดูโค้ดที่ Dreamweaver
MX สร้างขึ้นมา จะเห็นว่ามีโค้ดการแทรก Form
Object ชนิด File Field และ Button ลงในฟอร์ม ดังรูปด้านล่าง
|
<html>
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-874">
</head>
<body>
<form action="upload.php"
method="POST" enctype="multipart/form-data"
name="fmUpload">
<input name="File"
type="file" value="" size="50">
<input name=""
type="submit" value="Upload">
</form>
</body>
</html>
|
รูปแสดงโค้ดของไฟล์ fileupload.php
7. บันทึกไฟล์ fileupload.php
|
การเขียนสคริปต์ PHP สำหรับการอัพโหลดไฟล์
|
ขั้นตอนต่อไปนี้
จะเป็นการเขียนโค้ด PHP สำหรับจัดการไฟล์ที่ถูกอัพโหลดขึ้นมาบนเซิร์ฟเวอร์
เข้าไว้ในไดเร็คทอรี่หรือโฟลเดอร์ที่กำหนดไว้
ขั้นตอนการเขียนสคริปต์ PHP สำหรับการอัพโหลดไฟล์:
1. สร้างโฟลเดอร์สำหรับจัดเก็บไฟล์ โดยการคลิกที่เมนู Site
> Site Files จะปรากฏแถบ Files ที่ด้านขวาของหน้าจอ หลังจากนั้นชี้เม้าส์ที่ตำแหน่งบรรทัดแรกของแถบ Files คลิกเม้าส์ปุ่มขวา จะปรากฏเมนูให้คลิกเลือก New
Folder และกำหนดชื่อโฟลเดอร์เป็น "uploadfiles"
2. เปิดโปรแกรม Dreamweaver MX คลิกเมนู File
> New จะปรากฏไดอะล็อก New
Document ขึ้นมา ให้คลิกแท็บ General เลือก Dynamic Page > PHP หลังจากนั้นคลิกปุ่ม Create
บันทึกเป็นไฟล์ upload.php
3. คลิกที่ปุ่ม Show Code View หลังจากนั้นให้พิมพ์โค้ดต่อไปนี้ลงไปในเว็บเพจ
|
<?php
//
Upload full path (Detect path
automatically)
if
(!defined('UPLOADDIR')) define('UPLOADDIR', (dirname(__FILE__)
."/uploadfiles") );
อธิบาย:
เปิดแท็ก <?php กำหนดชื่อโฟลเดอร์สำหรับจัดเก็บไฟล์ที่อัพโหลดขึ้นมา ในที่นี้กำหนดให้เป็นโฟลเดอร์ชื่อ "uploadfiles" โฟลเดอร์นี้ขึ้นมาภายใต้โฟลเดอร์ของระบบไฟล์ของเว็บเซิร์ฟเวอร์ และต้องมี permission ที่สามารถเขียนไฟล์ลงได้ เช่น หากเป็นระบบปฏิบัติการ linux ให้กำหนด permission เป็น 777 ในที่นี้จะจัดเก็บชื่อโฟลเดอร์ไว้ในตัวแปรค่าคงที่ชื่อ "UPLOADDIR" |
|
<?php
//checks
if file uploaded
if
(is_uploaded_file($_FILES['File']['tmp_name'])) {
อธิบาย:
เรียกใช้ฟังก์ชั่น is_uploaded_file() ของ PHP สำหรับตรวจสอบว่ามีการอัพโหลดไฟล์หรือไม่
โดยตรวจสอบจากไฟล์ที่ถูกเก็บไว้ชั่วคราว $_FILES['File']['tmp_name'])
ฟังก์ชั่นนี้จะถูกใช้ในการตรวจสอบข้อผิดพลาดด้วย กล่าวคือ
หากมีการอัพโหลดไฟล์ จะส่งสถานะกลับเป็น TRUE
|
|
$File_tmpname
= $_FILES["File"]["tmp_name"];
$File_name
= $_FILES["File"]["name"];
$File_type
= $_FILES["File"]["type"];
$File_extension
= substr($File_type,(strrpos($File_type,"/")+1));
$File_size
= $_FILES["File"]["size"];
อธิบาย:
ข้อมูลเกี่ยวกับไฟล์ที่อัพโหลดจะถูกจัดเก็บไว้ในตัวแปรก่อน
ก่อนที่จะนำตัวแปรไปใช้งานในขั้นตอนต่อไป
$_FILES['File'['tmp_name'] ตัวแปรแบบที่เกิดจากการอัพโหลด เก็บชื่อไฟล์ชั่วคราวบนเซิร์ฟเวอร์ $_FILES['File'['name'] เป็นตัวแปรแบบที่เกิดจากการอัพโหลด เก็บชื่อไฟล์จริงที่อัพโหลดขึ้นมา $_FILES['File'['type'] เป็นตัวแปรแบบที่เกิดจากการอัพโหลด เก็บชนิดของไฟล์ที่อัพโหลดขึ้นมา |
|
//checks if file moved successfull
if
( move_uploaded_file($File_tmpname, (UPLOADDIR . "/" . $File_name))
) {
echo "<br>File uploading successful.";
}
else
{
echo "<br>File uploading
failure.";
}
อธิบาย:
หากมีการอัพโหลดไฟล์ จะย้ายไฟล์จากไฟล์ชั่วคราว (Temporary) ไปที่โฟลเดอร์ที่จัดเก็บไฟล์ โดยเรียกใช้ฟังก์ชั่น move_upload_file()
- เมื่อการย้ายไฟล์สำเร็จจะแสดงข้อความ "File uploading successful."
- เมื่อย้ายไฟล์ด้วยฟังก์ชั่น move_upload_file() ไม่สำเร็จ จะแสดงข้อความ "File uploading
failure."
|
|
}
else
{ //else checks if file uploaded
echo "<br>No file selected for uploading.";
}
//end checks if file uploaded
อธิบาย:
หากไม่มีการอัพโหลดไฟล์จะแสดงข้อความ "No
file for uploading."
รวมทั้งการปิดเครื่องหมายปีกกา เพื่อเป็นการจบ else และ if |
4. บันทึกไฟล์ upload.php
ไม่มีความคิดเห็น:
แสดงความคิดเห็น