โดยปรกติการเก็บข้อมูลลูกค้าของคุณอาจได้จากการรับสมัครสมาชิก ซึ่งวิธีการนั้นอาจให้ลูกค้ากรอกรายละเอียดแต่ในหลายๆครั้งคุณอาจเสียโอกาสเหล่านั้นเนื่องจาก ลูกค้า ไม่อยากเสียเวลาในการกรอกข้อมูลหรือบางครั้งข้อมูลที่ให้ลูกค้ากรอกนั้นมีมากเกินไป หรือในบางครั้งการที่จะเป็นสมาชิกนั้นมีค่าใช้จ่ายอีกด้วย ปัญหาที่ได้กล่าวมานี้นั้นเป็นสาเหตุส่วนหนึ่งที่ทำให้คุณเสียโอกาสที่จะได้รับข้อมูลของลูกค้า ในความเป็นจริงข้อมูลลูกค้าที่เราต้องการนั้นเพียงแค่ ชื่อ-นามสกุล และช่องทางการติตต่อ (โทรศัพท์, Email ) ต่อมา วิธีการเพื่อให้ได้ข้อมูลเหล่านั้นมานั้นมีหลากหลายวิธีขึ้นอยู่กับ เทคนิคของแต่ละบุคคล

ด้วยระบบของ DeeMocDIY จะช่วยให้คุณเพิ่มฐานข้อมูลของลูกค้าคุณได้ง่ายๆดังรูปภาพ

ส่วนวิธีการใช้งานนั้นแสนจะง่ายครับ เพียงแค่หากคุณได้สร้าง Contact List เอาไว้ที่ระบบ DeeMocDIY เรียบร้อยแล้ว และต้องการนำ Sign up Form ไปใช้งานนั้น เริ่มโดย

1. Login เข้าสู่ระบบ

2.  ทำตามขั้นตอนตามรูป

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

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

คราวที่แล้ว เราพูดถึงเรื่องการสร้าง Form จาก AJAX ครับ ต่อมา มีผู้ใช้งาน DeeMocDiy บางท่าน ส่งอีเมลมาถึง

Mr. Moc ให้ช่วยเขียนถึงเรื่องการเพิ่ม Field เข้าไป form ที่เราได้สร้างเอาไว้แล้ว ส่วนจะสนุกสนานเพียงใด มาดูกันได้ครับ

1. ก่อนอื่น เพิ่ม Fileds ที่เราต้องการก่อน:

<code><label>Psssword </label><input type=’password’ id=’password’ name=’password’/></code>

<code><label>Confirm PAssword</label><input type=’confirm_password’ id=’confirm_password’ name=’confirm_password’/></code>

2. เพิ่มการดักจับและเอาข้อมูลจาก Text Field ที่เราเพิ่มขึ้น

var password = document.getElementById(’password’).value;
var confirm_password = document.getElementById(’ confirm_password’).value;

3. เพิ่มส่วนของการส่งข้อมูลไปยัง ปลายทางของ AJAX message
url=url+”&password=”+password;
url=url+”& confirm_password=”+confirm_password;

4. จากนั้นตรงปลายทาง “signup.php”

สำหรับ Code PHP ที่เราเอาไว้รับ Sign up data เป็นดังนี้ (signup.php)

echo “Name : “.$_REQUEST['first_name'].” “.$_REQUEST['last_name'].” ”;

echo “Email : “.$_REQUEST['email'].”
”;

echo “Password : “.$_REQUEST['password'].”
”;

echo “Confirm password: “.$_REQUEST['confirm_password'].”
”;

?>
เพียงเท่านี้ เราก็สามารถเพิ่ม Field เข้าไปใน AJAX Form ได้แล้วครับผม
คราวหน้า หากท่านผู้ใช้ DeeMocDIY ท่านใด มีข้อสงสัยเรื่อง Programming ทาง Mr.Moc ยินดีตอบทุกคำถามนะครับ

การส่งเสริมการขายโดยใช้คูปองผ่าน Email Marketing:

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

คุณสามารถทำคูปองแบบ unique running number ได้โดยการใช้ Insert a personalized item (แทรกรายการที่กำหนดเอง) ซึ่งเครื่องมือที่มีอยู่ในระบบของ DeeMocDIY โดยเลือกใช้

[id]-[mailing id]-[email]

ซึ่งแต่ละชุดคำสั่งมีความหมายดังนี้

[id] => เป็น id ของอีเมลแต่ละอัน ซึ่งอยู่ภายใน Contact List (รายชื่อผู้รับ)ของคุณ

[mailing id] => คือ id ของอีเมลฉบับที่กำลังสร้างอยู่(แต่ละฉบับจะไม่ซ้ำกัน)

[email] => อีเมลของผู้รับ(แต่ละคนจะได้ของตัวเองเท่านั้น)

อีเมลที่ได้รับจะมี Running No. แบบนี้ (ดูรูปข้างล่าง)ในวงกลมสีแดงจะเห็นว่าแต่ละคนจะได้รับ ID และ Email ที่ไม่ซ้ำกัน แต่ MailingID จะเป็นเลขชุดเดียวกัน

รูปแสดงอีเมลที่ได้รับ

เพียงผู้รับอีเมลฉบับนี้พิมพ์ออกมา ก็จะได้คูปองซึ่งจะเป็นที่เป็น Unique

]]> http://blog.deemocdiy.com/running-number/feed/ 0 http://blog.deemocdiy.com/how-to-code-html-email-newsletter-part-ii-inline-style-sheet/ http://blog.deemocdiy.com/how-to-code-html-email-newsletter-part-ii-inline-style-sheet/#comments Mon, 11 Jan 2010 08:39:04 +0000 Development Team http://blog.deemocdiy.com/?p=245

สวัสดีครับ ครั้งที่แล้วผมเขียนเรื่องการ Design หน้า content แบบ HCF (Header Content and Footer) โดย การใช้ Table เพื่อควบคุม Layout ทั้งหมดใน Email ไปแล้ว คราวนี้ เราจะมาเจาะลึกการทำ Inline Style Sheet ใส่ Email ของเราบ้างเพื่อความสวยงามครับ

การกำหนด Style Sheets แบบ Inline ก็คือการกำหนดรูปแบบการแสดงผลของ Tag ภายใน Tagนั้น ๆ เลย โดยจะมีผลต่อ Tag นั้น ๆ Tag เดียวที่เราทำการกำหนด Style ให้มัน โดยใช้ Attribute “style” ภายใน Tag ที่ต้องการกำหนดให้ เราลองไปดูตัวอย่างเบื้องต้นของการกำหนด Inline Style Sheet กันครับ

ตัวอย่างเบื้องต้นของการกำหนด Inline Style Sheet

1. <table style='border: 1px solid black; margin: auto;">
2. <tr>
3. <td style="text-align: right; font-size: 18pt;">
4. Some text aligned left.
5. </td>
6. </tr>
7. </table>

จากตัวอย่างจะเห็นว่ามีการกำหนด Style ให้กับ Tag table โดยกำหนดภายใน Attribute “style” แต่ถึงแม้เราจะมี Tag table กี่Tagก็ตามมันจะไม่มีผลกระทบด้วยเลย เพราะมันหมายความว่ากำหนด Style ให้กับTagนั้น ๆ เพียงTagเดียว

ตัวอย่างการกำหนด Inline Style Sheet หลาย ๆ Tag

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3. <html>
4. <head>
5. <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />
6. <meta http-equiv="content-language" content="th" />
7. <title>Inline Style Sheet</title>
8. </head>
9. <body>
10. <h1 style="color:black;
11. border: 5px solid black;
12. letter-spacing: 5px;
13. padding: 10px;">
14. Heading 1
15. <h1>
16. <h2 style="color: orange;
17. border: 4px solid orange;
18. letter-spacing: 5px;
19. padding: 10px;">
20. Heading 2
21. </h2>
22. <h3 style="color: blue;
23. border: 3px solid blue;
24. letter-spacing: 5px;
25. padding: 10px;">
26. Heading 3
27. </h3>
28. <p style="font-family: Arial;
29. font-size: 14pt;">
30. Selectors choose the element to apply formatting to.
31. </p>
32. </body>
33. </html>

หมายเหตุ : – เราสามารถใช้วิธีนี้ กับ HTMLTagใดก็ได้ ยกเว้นTagBASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE

การใช้ AJAX สร้าง Sign up Form

AJAX = Asynchronous JavaScript and XML

AJAX ไม่ใช่ภาษา Programming ใหม่ แต่เป็นเทคนิคและวิธีการที่ทำให้เราทำงานได้เร็วขึ้น ง่ายขึ้น มีการโต้ตอบกันสวยงามขึ้นบนหน้าเว็บ

AJAX สามารถติดต่อไปยัง Server ดโดยตรงได้โดยการใช้ XMLHttpRequest object. ด้วย object ตัวนี้ (มาพร้อมกับ Javascript) ทำให้เราสามารถรับ-ส่งข้อมูลได้โดยไม่ต้องมีการ Refresh หน้าจอ

AJAX สามารถแลกเปลี่ยนข้อมูลที่ไม่มากนัก เพราะฉะนั้้นเราไม่ควรพยายามที่จะส่งหน้า Page ทั้งหน้า (พวกทีมี Javascript และ Flash เยอะๆ)

เริ่มสร้างกันเลย

ขั้นตอนที่ 1 . สร้าง Sign up Form ปล่าวๆ ตัว form ที่ใช้กับ AJAX อาจจะแปลกนิดนึงตรงที่เราไม่จำเป็นต้องมี action attribute ของ <form> tag เพราะเราจะใช้ความสามารถของ DOM เพื่อใช้งาน Object ต่างๆบนหน้า HTML document.

Code HTML ของ Form ของเรา (index.html)

<form>

<label>First Name</label><input type=’text’ name=’first_name’ id=’first_name’ /><br />

<label>Last Name</label><input type=’text’ name=’last_name’ id=’last_name’ /><br />

<label>Email</label><input type=’text’ name=’email’ id=’email’ /><br />

<input type=’submit’ value=’Register’ />

</form>

หน้าตาของ Form จะออกมาเป็นแบบนี้

เรื่องความสวยงามของ Form อันนี้้ก็แล้วแต่ความสามารถของแต่ละคนแล้วล่ะครับ

1.เตรียม Code หน้า Sign Up เพื่อไว้รอรับข้อมูลจาก Form ก่อน

มาถึงขั้นตอนที่เราจะเขียน Code PHP เพื่อรับข้อมูลจาก Form กันแล้ว โดยปกติเราจะส่งข้อมูลไปยังหน้าต่อไปนั้น จะนิยมใช้การส่งข้อมูลแบบ POST และ GET ซึ่งทาง PHP ได้สร้าง Global Variables เอาไว้รองรับแล้ว ชื่อว่า $_POST และ $_GET ตรงๆตัวครบ และแถมยังใจดี สร้างตัวแปรที่ชื่อว่า $_REQUEST เพื่อมาไว้รองรับ การส่งข้อมูลทางการ Submit ได้ทั้สองแบบคือ POST and GET ไม่ว่าจะส่งมาแบบใดก็ได้ครับ (ส่วนตัวผมชอบใช้ตัวนี้ สะดวกดี ดังนั้นขอใช้อันนี้ละกันนะครับ)

สำหรับ Code PHP ที่เราเอาไว้รับ Sign up data เป็นดังนี้ (signup.php)

<?

echo “Name : “.$_REQUEST['first_name'].” “.$_REQUEST['last_name'].”<br />”;

echo “Email : “.$_REQUEST['email'].”<br />”;

?>

2.เตรียม Code AJAX และ DIV ของการแสดงผล

เพิ่มเติมตรงปุ่ม Submit ให้เรียบร้อย จาก

<input type=’submit’ value=’Register’ />

เปลี่ยนเป็น

<input type=’submit’ value=’Register’ onclick=’sendRequest();’ />

ส่วน Function sendRequest(); จะเป็นของ AJAX code ดังนี้

<script>

var xmlhttp

function sendRequest()

{

xmlhttp=GetXmlHttpObject();

if (xmlhttp==null)

{

alert (”Your browser does not support XMLHTTP!”);

return;

}

// ใช้ DOM เพื่อ ดึงค่าจาก first name text box

var first_name = document.getElementById(’first_name’).value;

// ใช้ DOM เพื่อ ดึงค่าจาก last name text box

var last_name = document.getElementById(’last_name’).value;

// ใช้ DOM เพื่อ ดึงค่าจาก email

var email = document.getElementById(’email’).value;

var url=”signup.php”;

// ชื่อ file ของ script ปลายทาง

url=url+”?first_name=”+first_name;

url=url+”&last_name=”+last_name;

url=url+”&email=”+email;

xmlhttp.onreadystatechange=stateChanged;

xmlhttp.open(”GET”,url,true);

xmlhttp.send(null);

// ส่งข้อมูลไปยังปลายทาง

}

function stateChanged()

{

if (xmlhttp.readyState==4)

{

document.getElementById(”result”).innerHTML=xmlhttp.responseText;

//รับข้อมูลและแสดงใน DIV ที่ต้องการ (เราต้องสร้าง DIV ชื่อ result เพื่อไว้แสดงผล)

}

}

function GetXmlHttpObject()

{

if (window.XMLHttpRequest)

{

// code for IE7+, Firefox, Chrome, Opera, Safari

return new XMLHttpRequest();

}

if (window.ActiveXObject)

{

// code for IE6, IE5

return new ActiveXObject(”Microsoft.XMLHTTP”);

}

return null;

}

</script>

เมื่อรวม ทั้งหมดเข้าด้วยกัน จะได้ code ทั้งหมด ดังนัี้

1.

index.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html>

<head>

<title>AJAX-Example Form : DeeMocDIY Whitepaper</title>

<script>

var xmlhttp

function sendRequest()

{

xmlhttp=GetXmlHttpObject();

if (xmlhttp==null)

{

alert (”Your browser does not support XMLHTTP!”);

return;

}

var first_name = document.getElementById(’first_name’).value;

var last_name = document.getElementById(’last_name’).value;

var email = document.getElementById(’email’).value;

var url=”signup.php”;

url=url+”?first_name=”+first_name;

url=url+”&last_name=”+last_name;

url=url+”&email=”+email;

xmlhttp.onreadystatechange=stateChanged;

xmlhttp.open(”GET”,url,true);

xmlhttp.send(null);

}

function stateChanged()

{

if (xmlhttp.readyState==4)

{

document.getElementById(”result”).innerHTML=xmlhttp.responseText;

}

}

function GetXmlHttpObject()

{

if (window.XMLHttpRequest)

{

// code for IE7+, Firefox, Chrome, Opera, Safari

return new XMLHttpRequest();

}

if (window.ActiveXObject)

{

// code for IE6, IE5

return new ActiveXObject(”Microsoft.XMLHTTP”);

}

return null;

}

</script>

</head>

<body>

<br /><br />

<center>

<div id=’result’ style=’border:1px solid #ddd; padding:5px; margin:3px; width: 300px;’></div>

<br /><br />

<form>

<label>First Name :</label><input type=’text’ name=’first_name’ id=’first_name’ /><br />

<label>Last Name :</label><input type=’text’ name=’last_name’ id=’last_name’ /><br />

<label style=’padding-right:10px;’>Email :</label><input type=’text’ name=’email’ id=’email’ /><br />

<input type=’button’ value=’Register’ onclick=’sendRequest();’ />

</form>

</center>

</body>

</html>

2. signup.php

<?

echo “Name : “.$_REQUEST['first_name'].” “.$_REQUEST['last_name'].”<br />”;

echo “Email : “.$_REQUEST['email'].”<br />”;

?>

ผลลัพธ์ที่ได้ ออกมาเป็นแบบนี้

เป็นอย่างไรบ้างครับ การส้ราง Register Form โดยใช้ AJAX ง่ายมากใช่มั้ยครับ ส่วนเราสามารถเอาไปต่อยอดได้โดย เช่น

เพิ่ม Script Validation ของ Form หรือ เอาข้อมูลจากหน้า signup.php ไปลง database เป็นต้น หากมีข้อสงสัยติดต่อมาได้ที่

watcharagon@deemoc.com นะครับ ส่วนบทต่อไปจะเป็นเรื่องเกี่ยวกับการใช้ RSS reader & Parser นะครับ สนุกแน่นอนครับ