การทำแบบฟอร์ม สำหรับใช้ส่งเมล์ให้เพื่อน ๆ ในหน้าเว็บไซต์
ทำแบบฟอร์ม สำหรับส่งเมล์ให้เพื่อน ๆ ในหน้าเว็บไซต์ แบบง่าย ๆ สำหรับผู้ใช้โฮสต์ที่รองรับ CGI เช่น Hypermart.net ครับ source code นี้ได้นำมาจากเว็บไซต์ http://www.bluesparks.com เห็นว่าใช้ง่ายดี และรูปแบบก็ไม่ยุ่งยากมากนัก คือจะเป็น popup windows ขึ้นมาแบบตัวอย่าง ที่ใช้อยู่ทางด้านซ้านมือของแต่ละหน้าในเว็บไซต์นี้ครับ วิธีการติดตั้งก็ไม่ยุ่งยาก และจะมีการค้นหาชื่อของหน้าไฟล์ html ที่เรียกได้โดยอัตโนมัติ ไม่ต้องคอยเปลี่ยนชื่อไฟล์ สำหรับผู้ที่ต้องการติดไว้ทุก ๆ หน้า มาดูวิธีการติดตั้ง และการใช้งานได้เลยครับ
1. ดาวน์โหลด source code และทำการ unzip เก็บไว้ในโฟล์เดอร์ /cgi-bin/refer/
2. ไฟล์ข้างในประกอบด้วย
readme.txt คือคำอธิบายวิธีใช้งาน
tell_friend.cgi คือสคริปต์ไฟล์ที่จะใช้งาน
tell_friend.gif คือไฟล์รูปภาพของการส่งเมล์
tell_friend.js คือไฟล์ java script ใช้ร่วมกับ CGI
3. ดาวน์โหลดโปรแกรม EditPlus เพื่อใช้สำหรับทำการแก้ไขไฟล์ที่เป็น .cgi (จะใช้ notepad ไม่ได้นะครับ)
4. แก้ไขข้อความต่าง ๆ ที่ต้องการให้แสดง ตั้งแต่บรรทัดที่ 57 เป็นต้นไปตามต้องการ (หรือจะไม่แก้ไขเลยก็ใช้ได้เหมือนกัน)
5. ทำการ upload ทั้งหมดไปเก็บไว้ที่ Server ของ hypermart โดยใช้ FTP Program
6. ไฟล์ .cgi และ .js ขณะที่ Upload ต้องเลือก mode แบบ ASCII ด้วยและเปลี่ยน mode เป็น 755 ก่อน
7. ใช้ notepad เปิดไฟล์ tell_friend.js และทำการเปลี่ยน path ของสคริปต์ให้ถูกต้องในบรรทัดที่ 3 ดังนี้
var path_to_cgi=”/cgi-bin/refer/tell_friend.cgi”;
ถ้าใครเก็บไว้ใน /cgi-bin/refer/ อยู่แล้วก็ไม่ต้องแก้ไขนะครับ
8. ที่หน้าเว็บเพจไหน หากต้องการให้มีปุ่มสำหรับส่งเมล์ ให้เพิ่มเติม code ดังนี้
<script language=”JavaScript” src=”/cgi-bin/refer/tell_friend.js”></script>
เพิ่มบรรทัดนี้ในส่วนบนของแต่ละหน้า ในบรรทัดที่อยู่ระหว่างคำว่า <head> กับ </head> นะครับ
9. สร้างลิงค์สำหรับการส่งเมล์ แบบตัวอักษร ใช้โค้ดดังนี้
<a href=”javascript:tell_friend();” target=”_self”>ส่งลิงค์หน้านี้บอกเพื่อน ๆ</a>
10. สร้างลิงค์สำหรับการส่งเมล์ แบบรูปภาพ ใช้โค้ดดังนี้
<a href=”javascript:tell_friend();” target=”_self”><img src=”tell_friend.gif” border=”0″ alt=”ส่งลิงค์หน้านี้บอกเพื่อน ๆ”></a>
11. ตรวจสอบใน source code ของไฟล์ html ก่อนนะครับว่าไม่มีสัญญลักษณ์ต่าง ๆ ปะปนอยู่ด้วย
12. ส่วนที่เหลือก็ออกแบบตกแต่งตามสวยงามกันเองนะครับ อ่านในไฟล์ readme.txt เพิ่มเติมด้วยก็ได้
ง่าย ๆ เท่านี้เองครับ เอาเป็นว่าถ้ายังไม่เคยลองทำ ก็จะยังไม่รู้นะครับ
Related Posts: