รวมบทความทั้งหมดในหมวดการพัฒนาเว็บไซท์ สอนสร้างเว็บไซต์

การพัฒนาเว็บไซท์

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

การสร้างแบบฟอร์มนั้น จำเป็นต้องมีการเขียนโปรแกรมช่วยจัดการกับข้อมุลที่มีการกรอกลงใน ฟอร์ม ไม่เช่นนั้นข้อมูลก็ไม่ไปไหนและการทดสอบการทำงานต้องอัพโหลดไปทดสอบบนเว็บไซต์จริงๆ สำหรับการสร้างแบบฟอร์มในหัวข้อที่ผ่านๆ มานั้น จะใช้งานจริงต้องมีการเขียนโปรแกรมรองรับเหมือนกับ ตัวอย่างงานจริงนี้ ไม่เช่นนั้นจะใช้งานไม่ได้
1. ข้อมูลที่กรอกในฟอร์ม
2. เมื่อคลิกปุ่ม Send ข้อความจะถูกส่งไปยังอีเมล์ที่ได้พิมพ์ในช่องอีเมล์
3. เข้าไปเช็คอีเมล์ คลิกที่ Inbox ก็จะพบจดหมายที่ส่งเข้ามา
4. นอกจากการส่งข้อมูลเข้าอีเมล์แล้ว อาจจัดเก็บข้อมูลที่กรอกในฟอร์มลงเก็บไว้ในฐานข้อมูลของ เว็บไซต์ก็ได้

เริ่มต้นสร้างแบบฟอร์ม
ผู้เขียนจะยกตัวอย่างการสร้างแบบฟอร์มสำหรับรับส่งข้อมูลแบบง่ายๆ โดยจะรับข้อมูลจากแบบ ฟอร์ม แล้วส่งเข้าอีเมล์ของผู้รับ
1. สร้างโฟลเดอร์ชื่อ mailsend สำหรับเก็บไฟล์เว็บเพจ
2. สร้างไฟล์ภายในชื่อ contact_form.php และ send.php
3. ดับเบิ้ลคลิกไฟล์ contact_form.php เพื่อเปิดไฟล์
4. แทรกฟอร์ม แล้วพิมพ์ข้อความลงในฟอร์มตามตัวอย่าง
5. หลัง To Email, From Email และ Subject แทรกฟิลด์แบบ Text Field
6. กำหนดคุณสมบัติ Text Field ของ To Email ตามนี้
7. กำหนดคุณสมบัติ Text Field ของ From Email ตามนี้
8. กำหนดคุณสมบัติ Text Field ของ Subject ตามนี้
9. กำหนดคุณสมบัติ Textarea Field ของ message ตามนี้
10. คลิกที่ฟอร์ม เส้นสีแดง แล้วกำหนดค่าตามนี้ ค่า Action = send.php เป็นการกำหนดให้ ส่งค่าที่ป้อนในฟอร์มไปยังไฟล์ send.php แล้วไฟล์ดังกล่าวจะทำหน้าที่ส่งข้อมูลเข้าอีเมล์

สร้างไฟล์ส่งข้อมูลเข้าอีเมล์
1. สร้างไฟล์ชื่อ send.php
2. ดับเบิ้ลคลิกเปิดไฟล์
3. คลิก Code

4. พิมพ์คำสั่ง PHP ลงไปตามตัวอย่าง
<?php
if(isset($_POST['send'])) setcookie("Mail",1, time()+30);
else die("No form submitted");
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-874">
<title>Sending Mail</title>
</head>

<body>
<?php
if(isset($_COOKIE['Mail'])) die("You can't send another email within 30 seconds");
//validating email address
if(!ereg("^[^@ ]+@[^@ ]+\.[^@ \.]+$",$_POST['mailto'])) die("Recipient email address is not correct");
if(!ereg("^[^@ ]+@[^@ ]+\.[^@ \.]+$",$_POST['mailfrom'])) die("Sender email address is not correct");

//setting up headers
$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=iso-8859-1\r\n";
$headers .= "To: ".$_POST['mailto']."\r\n";
$headers .= "From: ".$_POST['mailfrom']."\r\n";

// now sending mail
if(mail($_POST['mailto'], $_POST['mailsubject'], nl2br($_POST['mailmsg']), $headers)){
echo "Mail sent to <b>".$_POST['mailto']."</b> sucessfully";
} else{ die("Mail sending error"); }
?>

</body>

</html>
5. เสร็จแล้วบันทึกงานเก็บไว้

ตัวอย่างการนำไปใช้งานจริง
ผู้เขียนได้อัพโหลดไปไว้ที่เว็บไซต์ pasakresort โดยจะอัพโหลดโฟลเดอร์ mailsend เข้าไปทั้ง โฟลเดอร์เลย
1. การเรียกใช้งานก็จะพิมพ์ชื่อเว็บไซต์ชื่อ/ชื่อไฟล์ เช่น
www.pasakresort.kmancity.com/mailsend/contact_form.php
2. พิมพ์ข้อมูลเข้าไปแล้วคลิกปุ่ม Send
3. ไฟล์ send.php เป็นไฟล์ประกอบจึงไม่ต้องเรียกใช้งาน
4. ในไฟล์หลัก index.php อาจเปิดไฟล์นี้ขึ้นมา แล้วแก้ไขลิงค์ให้ชี้ไปที่ไฟล์ contact_form.php

ในการใช้งานจริงจะนิยมนำไปเก็บในฐานข้อมูลของเว็บไซต์ ซึ่งต้องเขียนโปรแกรมขึ้นมารองรับการ ใช้งาน ต้องศึกษาการเขียนโปรแกรมด้วย PHP เพื่อเรียกใช้งานฐานข้อมูล MySQL

Details: Category: แจกฟรีเว็บไซต์ใช้งาน Dreamweaver CS3; Hits: 6942

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

Details: Category: แจกฟรีเว็บไซต์ใช้งาน Dreamweaver CS3; Hits: 1028

รับข้อมูลที่ป้อนลงในแบบฟอร์ม พร้อมตรวจสอบความถูกต้องของข้อมูล
1. สร้างไฟล์ชื่อ spryvalidation.php แล้วดับเบิ้ลคลิกเปิดไฟล์ขึ้นมา
2. พิมพ์ข้อความ ข้อมูลสมาชิก แล้วกด Enter ลงบรรทัดใหม่
3. แทรกฟอร์มเข้ามา แล้วคลิกในฟอร์ม พิมพ์ข้อความตามตัวอย่าง
4. คลิกหลัง ชื่อนามสกุล แล้วคลิกปุ่ม Spry Validation Textfield
5. ตั้งค่าของฟิลด์ Spry Text Field เช่น ชื่อฟิลด์ = name
6. Type ชนิดของข้อมูล เลือกได้ตามต้องการ
7. Preview States สถานะการป้อนข้อมูลจะให้แสดงข้อความอย่างไร อาจเป็นข้อมูลตัวอย่างหรือ ข้อความเตือนเมื่อกรอกข้อมูลผิดประเภทหรือรูปแบบที่ต้องการให้กรอก

8. คลิกหลัง อายุ
9. คลิกปุ่ม Spry Validation TextField
10. คลิกและพิมพ์ชื่อฟิลด์ = age
11. เลือกแบบตัวเลข = integer
12. คลิกและพิมพ์ข้อความเตือนกรณีพิมพ์ตัวเลขเกินกว่าที่กำหนด
13. คลิกและพิมพ์ค่า Min Chars = 1 และ Max Chars = 2 ผู้คนตอนนี้ไม่น่าจะมีใครอายุเกิน เลข 2 หลัก

14. กำหนด Field อื่นๆ ที่เหลือตามตัวอย่าง
15. กดปุ่ม F12 ดูผลงานที่ได้

16. ตัวอย่างพิมพ์อายุด้วยตัวอักษร
17. จะปรากฏข้อความแจ้งว่า การป้อนข้อมูลผิดรูปแบบ Invalid Format
18. ตัวอย่างการพิมพ์ข้อมูลที่ถูกต้อง
19. การแก้ไขฟิลด์แบบ Spry สามารถแก้ไขได้จาก CSS Style ศึกษาได้จากบทที่ 17

Details: Category: แจกฟรีเว็บไซต์ใช้งาน Dreamweaver CS3; Hits: 2119

การป้อนข้อมูลจำนวนมาก เช่น รายละเอียดซึ่งสามารถตรวจสอบข้อมูลที่ป้อนได้ว่า ตรงตามที่ ต้องการหรือไม่
1. สร้างไฟล์ชื่อ spryvalidationtextarea.php
2. ดับเบิ้ลคลิกเปิดไฟล์
3. พิมพ์หัวข้อลงไป ข้อความแสดงความคิดเห็น แล้วกด Enter ลงบรรทัดใหม่
4. แทรกฟอร์มเข้ามา คลิกในฟอร์ม พิมพ์ ชื่อและความคิดเห็น
5. คลิกหลัง ชื่อ แล้วคลิก TextField แทรกฟิลด์แบบเท็กฟิลด์เข้ามา
6. กำหนดค่าของฟิลด์ตามตัวอย่าง
7. คลิกหลัง ความคิดเห็น
8. คลิกปุ่ม Spry Validation Textarea Field
9. กำหนดค่าตามตัวอย่าง

10. เสร็จแล้วบันทึกงานเก็บไว้
11. กดปุ่ม F12 ดูผลงานที่ได้
12. ทดลองป้อนข้อมูลลงไป 517
13. กรณีกำหนดให้มีการนับคำ ก็จะปรากฏตัวเลขนับจำนวนตัวอักษรที่พิมพ์ลงไปแล้ว