SEO แบบนี้ไม่ควรทำ


จริงๆก็ไม่ได้เป็น expert ทางด้าน SEO หรือ Search engine optimization สักเท่าไหร่ ก็ศึกษาไว้บ้างครับ เรียนไปรู้มาก็เลยอยากมาแบ่งปันกันบ้างว่า ไอ้ที่ทำเว็บกันมานั้น มันมีอะไรที่ไม่ควรจะทำบ้าง ถ้าต้องการให้การทำ SEO ประสปผลสำเร็จ ซึ่งก็คือเว็บของคุณขึ้นอันดับที่ดีในคำค้นหาหรือ keyword ที่คุณต้องการบนเสิร์ชเอ็นจิ้นต่างๆ อย่าต่างๆเลย ก็กูเกิ้ลนั่นแหละที่คนส่วนมากอยากขึ้นกัน..  มาดูกันเลย อ่านเพิ่มเติม “SEO แบบนี้ไม่ควรทำ”

วิธีทำให้ PayPal ส่งค่าที่ต้องการกลับมา Shopping cart ของเรา


สำหรับนักพัฒนาเว็บไซต์ e-commerce คงจะมีไม่น้อยที่เคยมีประสปการณ์จะต้องเชื่อมต่อโปรแกรม shopping cart ของตัวเองเข้ากับระบบชำระเงินของ PayPal ถ้าเป็น shopping cart แบบสำเร็จรูปเช่นพวก osCommerce ก็จะค่อนข้างง่ายและไม่ซับซ้อนมากเท่าไหร่ในการเชื่อมต่อ แต่ถ้าในกรณีที่เป็นโปรแกรม shopping cart ที่พัฒนาเขียนขึ้นเองละ ตรงนี้ผมพอมีประสปการณ์เล็กๆน้อยครับ ส่วนมากก็ไม่ค่อยจะมีปัญหามากเท่าไหร่ ส่วนมากก็จะทำงานไปตามขั้นตอนคือเราส่งค่าต่างๆที่ PayPal กำหนดไปยังเว็บไซต์ของเขา ลูกค้ากรอกข้อมูลบัตรเครดิต ฯลฯ เมื่อจ่ายเงินเสร็จก็จะมีปุ่มให้คลิ๊กกลับมาที่เว็บไซต์ของเรา ซึ่งถ้าเป็นแบบธรรมดาๆก็จะกลับมาตรงๆเลย จริงอยู่เราสามารถระบุ URL ปลายทางสำหรับปุ่มกดกลับมานั้นได้ แต่ว่าจากประสปการณ์ผมมักจะเจอปัญหากับ URL ที่ส่งค่า variable ยาวๆ โดยเฉพาะประเภทที่ไม่ได้ encodeURL ด้วย 

สำหรับ solution นั้นก็ง่ายๆครับ แต่ก่อนอื่นขอบอกว่านี่ไม่ใช่ทางออกทางเดียว เป็นแค่ทางหนึ่ง (option) ที่ลองแล้วใช้ได้ผลดี จริงๆแล้วมีอีกหลายทางมากที่ PayPal เตรียมไว้ให้ ยังไงก็ลองศึกษาจากคู่มือที่ดาว์นโหลดได้จากเว็บ PayPal หน้า Website Payments Standard นะครับ https://www.paypal.com/us/cgi-bin/webscr?cmd=_wp-standard-overview-outside 

เอาละมาลองกันเลย เริ่มต้นเวลาจะส่งค่าต่างๆเข้า PayPal ก็มักจะมีตัวแปรต่างๆที่จำเป็นดังนี้ 

<form action=”https://www.paypal.com/cgi-bin/webscr&#8221; method=”post”> 
<input type=”hidden” name=”cmd” value=”_ext-enter”> 
<input type=”hidden” name=”redirect_cmd” value=”_xclick”> 
<input type=”hidden” name=”business” value=”youremail@yourdomain.com”> 
<input type=”hidden” name=”item_name” value=”Your_item_name”> 
<input type=”hidden” name=”upload” value=”1″> 
<input type=”hidden” name=”amount” value=” 2.00″> 
<input type=”hidden” name=”return” value=”http://www.yourdomain.com/file.htm”> 
<input type=”hidden” name=”cancel_return” value=”http://www.yourdomain.com”> 
<input type=”image” src=”imgs/x-click-but6.gif”> 
</form> 

ซึ่งค่าแค่นี้ก็สามารถทำให้ Shopping cart ของคุณส่งค่าไป PayPal เพื่อทำการชำระเงินได้ แต่เวลาย้อนกลับมาก็จะมาเข้า URL ที่ระบุไว้ใน “return” และไม่มีค่าใดๆอื่นอีกถูกส่งกลับมาเพื่อเช็คความถูกต้องเลย จริงอยู่คุณอาจจะสามารถเช็คจาก session หรือ cookie ของ user คนนั้นได้ แต่ว่าใครจะไปรู้ user อาจจะจ่ายเงินนานไปจน session expire ก่อนที่จะวกกลับมาที่เว็บคุณก็ได้ ดังนั้นทางที่ผมลองทำดูก็คือเพิ่มการส่งค่าที่ชื่อ “invoice” และ “rm” ลงไปในชุดคำสั่งด้านบนด้วย ดังนี้ 

<input type=”hidden” name=”invoice” value=”invoice_number”> 
<input type=”hidden” name=”rm” value=”2″> 

สำหรับ invoice ก็ให้ใส่เลขรหัสการสั่งซื้อลงไป และ rm ซึ่งก็คือ return method ถ้าระบุ 2 ก็จะเป็นการสั่งให้ PayPal ส่งค่าที่จำเป็นๆหลายอย่างกลับมากับปุ่มที่กดกลับมาเว็บไซต์เราด้วย โดยเป็นการส่งวิธี POST ค่าที่ PayPal ส่งกลับมามีเยอะมาก คุณสามารถเลือกใช้เอาได้เลย ยกตัวอย่างเช่น 

<input type=”hidden” id=”” name=”payer_status” value=”verified”> 
<input type=”hidden” id=”” name=”verify_sign” value=”Code_from_verisign”> 
<input type=”hidden” id=”” name=”payment_status” value=”Completed”> 

ทั้งสามค่านี้ก็เป็นตัวยืนยันว่าลูกค้าได้ทำการจ่ายเงินผ่านเสร็จสมบูรณ์แล้ว และค่าที่ผมใช้ก็คือ invoice จะถูก return กลับมาด้วย แหล่มเลย ก็เช็คเอาจาก invoice_number นี่แหละ 
<input type=”hidden” id=”” name=”invoice value=”invoice_number”>

หรือใครอยากเขียนโปรแกรมขั้นเทพเจ้าขึ้นไปอีกก็คำนวน fee ของ PayPal ทำเป็นโปรแกรมวิเคราะห์ทางบัญชีไปเลยก็ได้นะเพราะเขาส่งค่า fee ของ transaction นี้มาด้วย 

<input type=”hidden” id=”” name=”mc_fee” value=”x.xx”> 
<input type=”hidden” id=”” name=”payment_fee” value=”x.xx”> 
 

อ้อ อีกอันที่ผมใช้คือเวลาเช็กว่าได้ถูกคลิ๊กมาจาก PayPal จริงหรือเปล่าคือผมจะเช็กชื่อของ submit button ด้วย บวกกับเช็ก Http Referer ด้วย 

<input type=”submit” id=”merchantReturn” name=”merchant_return_link” value=”Return to Our Store”>

ขอบพระคุณที่ทนอ่าน หวังว่าคงนำไปใช้ประโยชน์กันได้ สบายดี 

*หมายเหตุ* 
1.ตัวแปร rm นั้นเวลาใช้จะต้องใช้คู่กับตัวแปร return 
2.ค่าของตัวแปร rm มีสามอย่างคือ 
-0 เป็นการระบุให้ใช้วิธี GET ไม่ค่อยมีค่าที่จำเป็นส่งกลับคืนมา 
-1 เป็นการระบุให้ใช้วิธี POST ไม่ค่อยมีค่าที่จำเป็นส่งกลับคืนมา 
-2 เป็นการระบุให้ใช้วิธี POST มีค่าจำเป็นส่งกลับมาเยอะมาก 
—————————————-

เรื่องน่ารู้สำหรับเด็กจบใหม่ที่อยากทำงานเป็น Programmer


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

บทความนี้ตั้งใจจริงๆที่จะเขียนเพื่อจะเป็นแนวทางให้เด็กๆน้องๆรุ่นใหม่เตรียมความพร้อมให้ตัวเองให้มากที่สุด ทำตัวเองให้อยู่ในสถานะที่ได้เปรียบคู้แข่ง(ในการหางาน)ที่สุด จริงอยู่การเขียนโปรแกรมเก่ง การคิดโลจิก ตีโจทย์ได้นั้น ก็สำคัญ แต่สิ่งที่สำคัญมากกว่าในโลกแห่งความเป็นจริงของการเข้าทำงานในสายนี้ก็คือ “มาตรฐาน” ครับคำเดียวสั้นๆ แต่มีความหมาย มาตรฐานในที่นี้ก็คือการทำงานโปรแกรมให้อยู่ในมาตรฐานของสากลหรือมาตรฐานของการพัฒนาซอฟท์แวร์นั้นๆ ซึ่งมาตรฐานที่กล่าวมานี้นั้นก็มีมากมายหลากหลายกรรมวิธี ก็แล้วแต่ว่าสำนักไหนจะเลือกใช้อะไร ถ้าเป็นบริษัทใหญ่ๆหน่อยก็มักจะเป็นพวก ISO หรือ CMM http://www.sei.cmu.edu/cmm ถ้าเป็นบริษัทที่ทำพวก web application ก็มักจะเป็นพวกเฟรมเวิร์ค (framework) ต่างๆอาธิเช่น fusebox http://www.fusebox.org หรือ Ruby on Rails http://www.rubyonrails.org เป็นต้น ซึ่งบทความนี้ไม่ขอลงลึกไปถึงการอธิบายมาตรฐาน หรือเฟรมเวิร์คต่างๆเพราะว่ามันเยอะ (ขี้เกียจเขียน ว่ากันตรงๆ) แต่จะเป็นการแนะแนวทางในสิ่งที่ควรจะต้องฝึกซ้อมไว้ให้ชินเพื่อสร้างความได้เปรียบในการทำงานจริงเป็นข้อๆดังนี้ 

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

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

3. ศึกษามาตรฐาน และเฟรมเวิร์คให้เข้าใจ 
ไม่ว่าคุณจะถนัดโปรแกรมไหน เขียนภาษาอะไร ส่วนใหญ่เฟรมเวิร์คมักจะไม่หนีกัน เพราะว่าส่วนมากจะประยุกต์มาจากหลักการของ Software engineering ทั้งนั้น ไม่ว่าจะเป็น CMM, ID5, fusebox ศึกษาสิ่งเหล่านี้ให้ถ่องแท้ รับรองจริงๆว่าคุณได้เปรียบแน่ๆครับ 

4. ฝึกทำความเข้าใจเอกสารเทคนิค 
เอกสารเทคนิคในการพัฒนาซอฟท์แวร์นั้นมีไม่ใช่น้อยนะครับ ไม่ว่าจะเป็น UML, Scope of work, ER Diagram, Data dictionary, Functional structure, Test plan, etc เยอะแยะมากๆครับ ถ้าอยากได้เปรียบต้องศึกษาแต่เนิ่นๆ 

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

6. อันนี้ของแถมไม่ทำก็ได้แต่ถ้าทำได้จะดี 
ก็คือฝึกการใช้เครื่องมือต่างๆที่เกี่ยวข้อง ที่นอกเหนือจากเครื่องมือในการพัฒนาซอฟ์ทแวร์ ยกตัวอย่างเช่น Rational Rose ซึ่งจัดอยู่ในประเภท Integrated Development Environment (IDE), พวก Groupware ต่างๆ หรือที่เรียกกันว่าระบบ Collaboration ลองเลือกๆกันดูเถิดครับ แค่นี้ก็เยอะจนจำไม่ไหวแล้ว

เริ่มต้นง่ายๆกับการทำ Creative Design สำหรับเว็บไซต์ธุรกิจ / ไม่ใช่สวยแต่รูป


[บทความนี้แต่งขึ้นเมื่อ Oct,2001 โดย Rittichart S.]

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

ในเว็บไซต์ประเภทธุรกิจนั้น (Corporate Website) การออกแบบรูปร่างหน้าตานั้นได้ทวีความสำคัญขึ้นมาจนเกือบจะเทียบเท่ากับการให้ข้อมูลทางธุรกิจเข้าทุกขณะ หลายๆองค์กรได้เริ่มที่จะมองเห็นศักยภาพของเว็บไซต์ว่าสามารถที่จะเป็นช่องทางๆการตลาด (Marketing Channel) ทางหนึ่งที่มิได้ด้อยไปกว่าทางอื่นๆ รวมไปถึงสิ่งพิเศษต่างๆที่ช่องทางอื่นไม่สามารถทำได้เช่นคุณสมบัติในการทำอินเตอร์แอคทีพเป็นต้น ดังนั้นการให้ความสำคัญกับรูปร่างหน้าตาขององค์กรบนอินเตอร์เนตจึงเป็นสิ่งที่ไม่ควรละเลย และควรจะให้ความสำคัญอยู่ในอันดับต้นๆเลยทีเดียว ลองมาดูกันว่าหลักการง่ายๆสำหรับการเริ่มต้นการทำ Creative Design สำหรับเว็บไซต์ประเภทองค์กรธุรกิจต่างๆนั้นมีขั้นตอนอย่างไรบ้าง

1.Marketing Goal สิ่งแรกที่ควรจะคำนึงถึงเมือจะเริ่มทำงาน Creative Design สำหรับเว็บไซต์ ก็คือการศึกษาจุดมุ่งหมายทางการตลาดขององค์กร เพราะเราสามารถที่จะนำมากำหนดรูปแบบการออกแบบเว็บไซต์ให้ไปในแนวทางเดียวกันกับแนวทางของการตลาดของบริษัทได้

2.Creative Concept (look & feel) ขั้นตอนต่อมาก็คือ ให้เริ่มลงมือออกแบบรูปร่างหน้าตาออกมาหลายๆแบบ โดยยึดเอาจากปัจจัยในข้อหนึ่ง และข้อมูลสนับสนุนต่างๆที่มี ถ้าเป็นไปได้ควรจะออกแบบมาสัก 3-4 แบบเพื่อให้เป็นทางเลือกที่หลากหลายมากขึ้น

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

4.Site Architecture and Design หลังจากการสำรวจแล้ว ก็คงจะได้ไอเดีย เพื่อมาปรับแต่ง หรือไม่ก็คงจะได้รูปแบบที่แน่นอนชัดเจนแล้ว จะว่าไปแล้วเมือถึงขั้นตอนนี้ ก็สามารถที่จะเริ่มต้นสร้างเว็บไซต์ได้แล้ว แต่ก่อนที่จะเริ่มลงมือนั้น ควรที่จะจัดทำรูปแบบโครงสร้างของเว็บไซต์ในส่วนต่างๆไว้เพื่อเป็นแนวทางในการพัฒนาเว็บไซต์นั้นๆ ในส่วนของการทำโครงสร้างนั้น สามารถทำได้ตั้งแต่การทำแผนผังแบบง่ายๆ มีโครงสร้างของเมนูในทุกๆชั้น หรือจะทำในรูปแบบที่ซับซ้อนขึ้นมาอย่างเช่นการทำ Data Flow Diagram ก็ได้

5.Data Analysis & Optimization เมื่อขั้นตอนทุกอย่างเสร็จเรียบร้อย ไปจนถึงนำเว็บไซต์ขึ้นบนเซิร์ฟเวอร์เพื่อใช้งานจริง สิ่งที่ควรจะเตรียมการไว้ตั้งแต่เมื่อเริ่มเปิดใช้งานเว็บไซต์ในตอนต้นๆก็คือ การทำ Data Analysis ไม่ว่าจะเป็นการใช้ Analysis software ต่างๆ อย่างเช่น WebTrends ,MediaHouse รวมไปถึงอาจจะมีการทำสำรวจข้อมูลผู้ใช้ผ่านทางตัวเว็บไซต์เอง เพื่อที่จะนำมาปรับปรุงในด้านต่างๆเช่นในเรื่อง ความเร็วของตัวเว็บไซต์ ,ขนาดของรูปภาพต่างๆ, ตรวจหา Error และดูเรื่องความ Compatible กันกับ Web Browser หลายๆยี่ห้อ และอื่นๆอีกมาก

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

การออกแบบเว็บไซต์ให้เหมาะกับการ Shopping แบบ B2C


[บทความนี้แต่งขึ้นเมื่อ Aug,2001 โดย Rittichart S.]

E-commerce ยังคงเป็นกระแสที่น่าจับตามองอยู่ ถึงแม้ว่าร้านค้าอีเล็กทรอนิกส์ ที่ทยอยเปิดตัวกันมากมายเมื่อประมาณ 2-3 ปีก่อนจะพากันทยอยปิดตัวลงอย่างน่าใจหาย กระนั้นก็ตามในตลาดของเว็บไซต์แบบ B2C ก็ยังมีผู้เล่นรายอื่นๆ เข้ามาเสริมทัพอยู่เรื่อยๆ ไม่ว่าจะเป็นรายใหญ่ทุึนหนาทำตัวเป็น shopping mall อย่าง Thai.com ของ Inet Thailand หรือ จะเป็น mShop ของค่าย mWeb รวมถึง e-commerce ขนาดกลางๆไปถึงย่อมอย่าง Tohome ,Silkspan,Selectmore หรือล่าสุด PantipShop

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

1.User Friendly อ่านดูแล้วออกจะกว้างไปสักหน่อย แต่โดยรวมๆแล้วก็คือ ทำให้เว็บไซต์นั้นใช้ง่ายที่สุดเท่าที่จะทำได้ ไม่ว่าจะเป็นการออกแบบให้ดูสะอาดตา เมนูต่างๆใช้และทำความเข้าใจได้ง่าย มีระบบ Help คอยช่วยเหลือ มี Site map และยังรวมไปถึงความเร็วในการเข้าถึงข้อมูลอีกด้วย

“จงจำเอาไว้เสมอว่า คำว่า e-commerce นั้นควรจะแปลมาจาก easy-commerce มากว่า electronics commerce”

 
Easy navigator bar จาก Tohome.com เป็นการบอกว่าคุณอยู่ในจุดไหนและมีขั้นตอนใดๆบ้างในการ Shopping

2.Encourage decision making ตรงนี้อาจจะเป็นบทความ หรือสถิติ หรือสื่ออื่นๆ ที่จะช่วยให้ผู้ซื้อตัดสินใจได้เร็วขึ้น ตัวอย่างเช่น เว็บไซต์ที่ขายบริการในการสมัครขอสินเชื่อหรือสินค้าทางการเงิน ก็จะมีบทความที่อ่านง่าย หรือบทความเปรียบเทียบ มีโปรแกรมคำนวนการผ่อนส่ง คำนวนความสามารถของการขอสินเชื่อ หรือมีมุมสำหรับให้ ถาม-ตอบ เกี่ยวกับสินค้านั้นๆ เป็นต้น สิ่งเหล่านี้สามารถช่วยเร่งการตัดสินใจในการซื้อสินค้าให้เร็วยิ่งขึ้น 

 
ภาพตัวอย่างจาก Silkspan มีบทความน่าสนใจให้อ่าน ในหน้าที่บริการสมัครขอสินเชื่อต่างๆ

3.Fresh and New การมีสิ่งที่สดใหม่อยู่เสมอจะเป็นส่วนที่สำคัญอย่างมากในการที่จะดึงดูดให้ผู้ชมกลับมาเยี่ยมที่เว็บไซต์บ่อยๆ ดังจะเห็นได้จากตามเว็บ Portal ต่างๆ ที่มีการ update เนื้อหากันแบบรายวัน จึงทำให้มีจำนวนผู้เข้าเยี่ยมชมมากและสม่ำเสมอ

4.Interactive Utilization ความได้เปรียบของร้านค้าแบบ online เมื่อเปรียบเทียบกับร้านค้าแบบ offline ก็คือ เว็บไซต์นั้นสามารถที่จะ interactive กับผู้ชมได้แบบหลากหลาย ฉนั้นเราควรจะทำเอาข้อได้เปรียบนี้มาใช้ให้เยอะที่สุดเท่าที่จะทำได้ ไม่ว่าจะเป็นการทำ interactive แบบง่ายๆอย่างการมี form รับความคิดเห็น หรือมี Discussion board รวมไปถึงอาจจะมี Chat room สำหรับแผนกบริการลูกค้าเป็นต้น

5.Customer Services เว็บไซต์ e-commerce ที่ดีนั้นควรที่จะมีระบบบริการลูกค้าที่ดีด้วย เพราะนอกจากจะช่วยในการส่งเสริมการขายแล้ว customer service ยังเป็นส่วนสำคัญที่จะทำให้เกิดความประทับใจกับลูกค้า และเป็นการสร้างภาพพจน์ที่ดีแก่สินค้าและบริการอีกด้วย

ด้วยหลักง่ายๆทั้ง5ข้อนี้ คงจะช่วยให้การเริ่มต้นการออกแบบเว็บไซต์ e-commerce ของคุณง่ายและมีประสิทธิภาพมากยิ่งขึ้น

การเลือกใช้ Technology สำหรับงาน Enterprise Web Development


[บทความนี้แต่งขึ้นเมื่อ Aug,2001 โดย Rittichart S.]

งานพัฒนาสื่อบนอินเตอร์เนตโดยเฉพาะในส่วนที่เกี่ยงข้องกับ www นั้งคงจะปฎิเสธไม่ได้ว่าได้พัฒนามาตลอดอย่างต่อเนื่องในช่วงระยะเวลา 5-6 ปีที่ผ่านมา จากที่เป็นการพัฒนาแบบ File base หรือการทำเว็บแบบ static แบบง่ายๆ เน้นการให้ข้อมูล เป็นสำคัญ มีการทำ Interactive กับผู้ใช้บ้างเล็กน้อยเช่นแบบฟอร์มสำหรับติดต่อ หรือกระดานข่าวมาจนถึงปัจจุบันที่การใช้สื่อบนอินเตอร์เนตนั้นเป็นมากกว่าแค่การนำเอาโบรชัวร์ของบริษัทขึ้นไปไว้บนเว็บแต่เป็นการมองสื่อนี้เป็นเสมือนช่องทางๆการตลาดทางหนึ่งที่มีประสิทธิภาพ รวมไปถึงการทำธุรกรรมแบบออนไลน์ และเป็นตัวกลางในการการปรับเปลี่ยนระบบการบริหารจัดการต่างๆในองค์กร หรือเรียกโดยรวมๆแบบทันสมัยว่า e-business นั่นเอง เทคโนโลยีต่างๆที่ใช้ในการพัฒนาเว็บนั้นได้ถูกเข็นออกมาจากหลายบริษัทหลายค่าย บางเทคโนโลยีก็ได้ตายไปแล้วก็มีเช่น HtmlScript ที่เปิดตัวออกมาเมื่อประมาณ 4-5 ปีที่แล้วแต่ไม่ประสปความสำเร็จ จนได้ผันตัวเองมาเป็นผู้ผลิตซอฟ์ทแวร์เกี่ยวกับระบบ e-commerce ที่ชื่อ Miva แทน หรือจะเป็นปู่เฒ่าของวงการอย่าง Perl ที่อยู่คงทนถาวรมานานแสนนาน อย่างไรก็ตาม การที่เราจะตัดสินใจเลือกใช้เทคโนโลยีในการพัฒนาและจัดตั้งเว็บไซต์สำหรับองค์กรขนาดใหญ่นั้น จำเป็นที่เราควรจะต้องคำนึงถึงส่วนประกอบหลายอย่าง

1. Corporate Technology Culture สิ่งที่สำคัญอันดับต้นๆของการเลือกใช้เทคโนโลยีเพื่องานพัฒนาเว็บไซต์นั้นคือ การศึกษาระบบปัจจุบันขององค์กรที่ใช้กันอยู่แล้วภายใน บางองค์กรโดยเฉพาะองค์กรข้ามชาติมักจะมี policy ในเรื่องเกี่ยวกับการใช้เทคโนโลยีต่างๆอยู่แล้ว เช่นธนาคารหรือสถาบันการเงินหลายแห่งมักจะใช้เครื่องและระบบปฎิบัติการของ IBM เป็น Server หลัก หรือเป็น Data Center ขององค์กร เมื่อเรารู้ดังนี้ก็อาจจะเป็นการดีที่เราจะโอนเอียงไปทาง Java Technology จำพวก JSP หรือ Servlet ในการเสนองาน web development ให้กับลูกค้าประเภทนี้เป็นต้น

2. Find existing sample สิ่งที่ควรจะทำอย่างยิ่งสำหรับการนำเสนองาน web development สำหรับองค์กรข้ามชาติทั้งหลาย คือการศึกษาตัวอย่างจากสิ่งที่เขาเคยทำมาแล้วที่บริษัทแม่ หรือสาขาที่อยู่ ณ ประเทศต่างๆ ตัวอย่างเช่น ถ้าคุณกำลังจะไปนำเสนองานพัฒนาเว็บไซต์กับห้าง CarreFour ในประเทศไทย สิ่งหนึ่งที่สามารถทำได้คือดูตัวอย่างจากเว็บไซต์ของบริษัทแม่ http://www.carrefour.com ดูว่าเขาใช้ OS อะไร มี Scripting อะไร หรือใช้เทคโนโลยีตัวไหนอยู่บ้าง เพื่อเป็นอีกแนวทางหนึ่งที่จะช่วยในการตัดสินใจเลือกเทคโนโลยีที่จะนำเสนอ

3. Statistics is King อีกทางหนึ่งที่นิยมใช้กันมากคือการตัดสินใจจากการดูข้อมูลและสถิติต่างๆ มีหลายๆเว็บไซต์ที่ทำการออกสำรวจ รวมไปถึง monitor ดูว่า web server อะไรที่มีคนใช้มากที่สุด ระบบปฎิบัติการอะไรที่คนนิยมนำมาใช้มากที่สุดสำหรับการตั้งเว็บไซต์ รวมไปถึงภาษาอะไรดี ไม่ดียังไง ถูกใช้มากแค่ไหน เป็นต้น สิ่งที่ควรระวังสำหรับการใช้สถิติคือ ต้องแน่ใจว่ามาจากแหล่งข้อมูลที่เชื่อถือได้ และไม่แน่เสมอไปว่าสิ่งที่ขึ้นอันดับหนึ่งของผลสำรวจนั้นจะเป็นสิ่งที่ดีที่สุดเสมอไป

 
Web Server Survey From Netcraft

4. Benchmarks is Queen Benchmark คือข้อมูลของการทดสอบระบบหรือผลิตภัณฑ์ต่างๆ จากหลายๆค่าย บนอินเตอร์เนตนั้นมีหลายสำนัก ที่ตั้งตัวเป็นจอมทดสอบเหล่านี้ ตัวอย่างเช่นเว็บไซต์ดังๆอย่าง Cnet หรือ องค์กรไม่แสวงผลกำไรอย่าง Transaction Processing Performance Council ก็มีบริการข้อมูลเหล่านี้อยู่มากมาย แต่ข้อเสียของการ Benchmark ก็มีคือ ผลิตภัณฑ์ที่ถูกนำมาทำการทดสอบนั้น มักจะถูกผ่านการ Tune-up จากบริษัทผู้ผลิตมาแล้ว ฉนั้นผลที่ได้ออกมาอาจจะไม่สามารถนำมาเปรียบเทียบกับผลิตภัณฑ์ชนิดเดียวกันที่วางขายทั่วไปได้มากนัก


Transactional Web E-Commerce Benchmark from TPC

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

6. Service and Support เทคโนโลยีที่ฟรีและใช้กันแพร่หลายอย่าง PHP หรือ Linux นั้น ใครจะรู้บ้างว่าขาดคุณสมบัติเรื่องการ support อย่างรุนแรง ตัวอย่างเช่นการนำเสนอ PHP ให้กับลูกค้าที่ต้องการโอนย้ายการทำธุรกรรมทุกอย่างของบริษัทมาไว้บนเว็บไซต์ ซึ่งระบบจะเกิดข้อผิดพลาดไม่ได้หรือเกิดได้น้อยที่สุด เพราะทุกวินาทีที่เว็บไซต์ใช้การไม่ได้ นั่นหมายถึงโอกาสของการสูญเสียรายได้ของบริษัท แล้วจะทำอย่างไรถ้าวันหนึ่งระบบหลักของ PHP เกิดเสียขึ้นมา โดยไม่มีส่วนใดเลยที่เกี่ยวข้องกับโปรแกรมที่คุณพัฒนาขึ้นเลยแม้แต่น้อย โดยที่ทาง PHP.net ไม่มีการ Support อะไรไปมากมายไปกว่าเอกสารต่างๆ หรือ การถามตอบกันเองในกระดานข่าวของเหล่าบรรดา User Groups และออกจะบ่อยครั้งที่หลายๆปัญหาของคุณมักจะไม่ได้รับการตอบแบบทันใจทันเวลา หรือปัญหาของคุณไปตกอยู่ในหมวดหมู่ที่ว่า “ปัญหาของยูหน่ะ อยู่นอกขอบเขตไปแล้ว กรุณาติดต่อ Administrator ของยูโดยด่วน” แล้วสิ่งเดียวที่คุณจะต้องตะโกนออกมาดังๆก็คือ “ไอนี่แหละโว้ย Administrator” หรือ “shipหายแล้วku” ทำนองนั้น

ฉนั้นการวางแผนงานเรื่องการ support ก็เป็นอีกหนึ่งปัจจัยที่สำคัญเป็นอย่างยิ่งสำหรับการตัดสินใจเลือกใช้เทคโนโลยีใดๆก็ตาม ทั้ง6ข้อที่ผ่านมานั้นคงพอที่จะช่วยให้การเริ่มต้นการตัดสินใจเลือกใช้ Technology สำหรับงา่นพัฒนาเว็บไซต์ในระดับ Enterprise นั้นง่ายขึ้นไม่มากก็น้อย

ทำFormmailด้วยColdfusion


[บทความนี้แต่งขึ้นเมื่อ Feb,2000 โดย Rittichart S.]

เคยได้ยินชื่อโปรแกรม Formmail กันบ้างไหมครับ? คาดว่าคงจะเคยกันแน่ๆ เพราะว่าโปรแกรม formmail นั้นเป้นที่นิยมใช้กันอย่างแพร่หลายในการทำเวบ ส่วนใหญ่มักจะใช้กันในหน้าที่อยากจะให้ผู้เข้าชมเวบนั้น เขียน comment หรือให้ทิ้งข้อมูลให้ทางเจ้าของเว็บติดต่อกลับไปอะไรทำนองนั้น จากนั้นข้อมูลที่กรอกลงในฟอร์มดังกล่าว ก็จะถูกส่งไปทาง E-mail ที่ระบุเอาไว้ในโปรแกรม..

จุดเริ่มต้นของ Formmail ก็คาดว่าน่าจะมาจากภาษา Perl และโปรแกรม sendmail บน Unixครับ และที่เห็นใช้กันเยอะๆ ก็น่าจะเป็น foammail ของนายMatt.

แต่ด้วยความที่พื้นที่ตรงนี้เป็น area ของ ColdFusion นาาครับ. พง เพิร์ล ไรนี่ก็ไปดูเอาที่อื่นเอาดิฮะ แฮะๆ 😛

บทความคราวนี้ผมจะขอเสนอวิธีการสร้าง Foammail ด้วย ColdFusion และยังขอ Value Added ลงไปอีกนีสสสนึงตรงที่ทำให้ฟอร์มนั้นเลือกผู้รับได้มากกว่าหนึ่งคน โดยจะใช้คุณสมบัติของ CFQUERY ที่เคยพูดไปแล้ว กับ TAG ใหม่ที่จะพูดถึงในคราวนี้นั่นคือ CFMAIL ครับ โดยที่เราจะเอา Database เก่าที่เราเคยสร้างเอาไว้ในบทความครั้งก่อนมาใช้กัน.

อันดับแรกให้เราดึงข้อมูลจาก Database มาสร้างเป็น Drop Down list พร้อมกับสร้าง form field ที่จำเป็นต่างๆเอาไว้

<!– Formmail.cfm –>
<CFQUERY Datasource =”cftest1″ Name=”Qto”>
SELECT Name,Email FROM Example001
</CFQUERY>

<html><head><title>my formmail</title></head><body>
<font size=”5″>ต๊าย..ตายจดหมายผิดซอง อิอิ..</font>
<form action=”formmail.cfm” method=”post”>
ส่งถึง : 
<select name=”to”>
<CFOUTPUT QUERY=”Qto”>
<option value=”#Email#“>#Name#
</CFOUTPUT></select><br>
From :
<input type=”text” name=”from” value=”Your@email.here”>
<br>
เนื้อความจดหมาย.<br>
<textarea cols=”40″ rows=”5″ name=”body”></textarea><br>
<input type=”submit” name=”send” value=”send”>
</form> 
</body></html>

เมื่อเราได้ส่วนของ Form เรียบร้อยแล้วต่อไปเราก็มาสร้างในส่วนของโปรแกรมที่ใช้ทำการส่ง E-mail ไปยัง e-mail address ที่ได้ถูกเลือกเอาไว้ใน form ที่สร้างไว้ตอนต้น โดยนำไปสอดแทรกเอาไว้ใน code ที่เขียนไว้ข้างต้นครับ ให้สังเกตุในส่วนที่เป็นสีแดง ซึ่งจะเป็นชุดคำสั่งที่เราจะนำมาแทรกเอาไว้.

<!– Formmail.cfm –>

<CFIF IsDefined(“Form.send”)>

<CFMAIL TO=”#FORM.to#”
FROM=”#Form.from#”
SUBJECT=”ใส่ชื่อ Subject ของ Email ที่ต้องการที่นี่”
TYPE=”HTML”
SERVER=”ใส่ smtp server ของ Hosting ที่คุณใช้ หรือใช้ของ ISP เช่นของ CS Internet ก็คือ mail.cscoms.com”
PORT=”25″>
#Form.body# 
</CFMAIL>

ส่งไปที่ <cfoutput><a href=”mailto:#Form.to#”>#Form.to#</a></cfoutput> เรียบร้อยแล้ว ขอบคุณที่ใช้บริการ

<CFELSE>

<CFQUERY Datasource =”cftest1″ Name=”Qto”>
SELECT Name,Email FROM Example001
</CFQUERY>

<html><head><title>my formmail</title></head><body>
<font size=”5″>ต๊าย..ตายจดหมายผิดซอง อิอิ..</font>
<form action=”formmail.cfm” method=”post”>
ส่งถึง : 
<select name=”to”>
<CFOUTPUT QUERY=”Qto”>
<option value=”#Email#“>#Name#
</CFOUTPUT></select><br>
From :
<input type=”text” name=”from” value=”Your@email.here”>
<br>
เนื้อความจดหมาย.<br>
<textarea cols=”40″ rows=”5″ name=”body”></textarea><br>
<input type=”submit” name=”send” value=”send”>
</form> 
</body></html>

</CFIF>

จากนั้นก็ทำการ SAVE ไฟล์ได้เลย ตามตัวอย่างผม SAVE ไว้ในชื่อ Formmail.cfm , จากนั้นก็ลองรันดูได้เลยครับ

ไม่ยากอีกแล้วใช่ไหมครับ แฮ่ๆ คุณอาจจะอยาก Edit หรือ Modify อะไรเพิ่มเติมก็ตามสบายเลยนะครับ ใน TAG CFMAIL นั่นยังมี Parameter ให้ใช้อีกหลายตัว ถ้าสนใจละก็ลองเปิด Help ของ ColdFusion ดูหรือจะลอง Email มาถามผมก็ได้ ยินดีครับ.

Download : Source code : Formmail.zip

Coldfusionกับฐานข้อมูลบนเว็บ


[บทความนี้แต่งขึ้นเมื่อ Nov,1999 โดย Rittichart S.]

การเขียนโปรแกรมแบบ Server Side Programming บนเว็บนั้นขาดซะไม่ได้เลยที่จะต้องมีเรื่องฐานข้อมูล หรือ Database เข้ามาเกี่ยวข้อง ทั้งนี้เพราะกระแส Database Driven Website หรือเว็บไซต์พลังขับเคลื่อนด้วยฐานข้อมูล (โฮ่..เท่ห์ 🙂 กำลังมาแรง และเว็บไซต์ดังๆ ในต่างประเทศหลายที่ก็เปลี่ยนมาใช้ฐานข้อมูลมาเป็นขุมพลังแทนการทำ html แบบหน้าต่อหน้าซะเป็นส่วนใหญ่แล้ว

จาก ตอนที่แล้ว เราได้พูดเบื้องต้นในเรื่องการใช้ ColdFusion ต่อกับฐานข้อมูลเพื่อ Query ข้อมูลขึ้นมาโชว์บนหน้าเว็บไปแล้ว คราวนี้เราจะมาว่าต่อกันในเรื่องที่มักจะใช้กันบ่อยๆนั่นคือการ INSERT , UPDATE และ DELETE ข้อมูลในฐานข้อมุลผ่านหน้าเว็บ.

INSERT 
การ Insert นั้นก็คือการ input ข้อมูลชุดใหม่ลงไปในฐานข้อมูล สำหรับ ColdFusion นั้นก็มีวิธีการ Insert ให้เลือกใช้อยู่ 2 ทางด้วยกันคือการใช้ TAG <CFINSERT> 
<CFINSERT Datasource =”DSN” Tablename =”Table” Formfields =”columename1,columename2″ > 
ถ้าคุณไม่ได้ระบุ Formfields ลงไปจะแปลว่าให้ INSERT ลงในทุกๆ Field ซึ่ง value ที่ผ่านค่ามานั้นจะต้องมีชื่อ (NAME) เดียวกันกับ Field นั้นๆด้วย เช่นถ้าคุณจะ INSERT ข้อมูลจากฟอร์ม ลงไปใน Field ทีชื่อ NAME ดังนั้น ตัว INPUT BOX ที่ผ่านค่ามาจะต้องใช้ชื่อ NAME เช่นกัน ตัวอย่างเช่น <input type=”text” name =”NAME”>

อีกวิธีหนึ่งก็คือการใช้ SQL INSERT Statement ภายใต้ TAG <CFQUERY> 
<CFQUERY Datasource =”DSN”>
INSERT INTO Tablename (columnname1,columename2) VALUES (‘#Form.value1#’,’#Form.value2#’) 
</CFQUERY>

โดยส่วนตัวแล้วผมชอบที่จะใช้วิธีที่สองมากกว่า เพราะว่าการใช้ <CFINSERT> นั้นคุณจะต้องส่งค่าผ่านมาทาง FORM เท่านั้นครับ ถ้าส่งผ่านมาทาง URL parameters หรือ Variables ละก็ จะใช้กับ <CFINSERT >ไม่ได้ แล้วบางทีถ้าเกิดผมต้องการกำหนดเงื่อนไขที่มันค่อนข้างจะ Complex จนเกินความสามารถของ <CFINSERT> จะทำการให้ได้แล้ว การใช้ SQL INSERT Statement ภายใน TAG <CFQUERY> ก็จะเป็นทางออกครับ

UPDATE 
การ Update นั้นก็คือการปรับปรุงหรือแก้ไขข้อมูลใน Database นั่นเองครับซึ่ง ColdFusion ก็มีทางเลือกมาให้สองทางอีกเช่นกันคือการใช้ TAG CFUPDATE
<CFUPDATE Datasource =”DSN” Tablename =”Table” Formfields =”columename1,columename2″> TAG <CFUPDATE> นั้นจะรับข้อมูลผ่านทาง FORM เพื่อนำไปแก้ไขในฐานข้อมุล โดยคุณจะต้องระบุ Field ที่เป็น Primary Key ลงไปในฟอร์มด้วย เพราะ <CFUPDATE> นั้นจะทำการอ่านฐานข้อมูลของคุณว่า Field ไหนที่เป็น Primary Key แล้วก็จะนำชื่อของ Field นั้นมาเทียบกับชื่อของ Form ที่คุณส่งผ่านมา ซึ่งถ้าไม่ได้ระบุใส่ Name ของ form ให้มีชื่อเดียวกับ Field ที่เป็น Primary Key ละก็ จะโดนโปรแกรมมันด่าเอา ( ERROR ไง อิอิ)

ส่วนอีกวิธีนึงก็เหมือนเดิมครับ ใช้ SQL UPDATE Statement ภายใต้ TAG <CFQUERY>
<CFQUERY Datasource =”DSN”>
UPDATE Tablename
SET columename1=’#Form.columename1#’, columename2=’#Form.value1#’, Phone=’#Form.value2#’ 
WHERE primarykey=#Form.primary# 
</CFQUERY>

DELETE 

สำหรับการ DELETE นั้นก็คือการลบข้อมูลใน Row ที่ต้องการทั้ง Row สามารถทำได้ทางเดียวครับคือการใช้ SQL DELETE Statement ภายใต้ <CFQUERY>
<CFQUERY Datasource =”DSN”> 
DELETE FROM Tablename WHERE primary= #Form.primary#
</CFQUERY>

ผมคิดว่าคงจะเป็นเพราะการลบข้อมูลนั้นเป็นเรื่องอันตราย Coldfusion ก็คงจะไม่อยากให้มันทำได้ง่ายเกินไปนัก จึงไม่ได้ทำ TAG พิเศษเอาไว้สำหรับลบข้อมูลบน Database

เอาละครับทีนี้เรามาลองสร้างอะไรเล่นๆสนุกๆกันจากการนำวิธีการ INSERT ,UPDATE และ DELETE มาใช้ครับ หึหึ ฝึกกันเล่นๆครับจะได้พริ้ว คีย์ code ตามเลยครับ สำหรับ Database ที่ใช้นั้นก็จะใช้อันเดิมที่เคยทำเอาไว้ครั้งที่แล้วนะครับ อ้อโปรแกรมที่จะสร้างต่อไปนี้ผมไม่ได้ทำให้มัน security อะไรนักหรอกนะครับ เช่นคือไม่ได้เช็คว่าเวลาจะ insert หรือ update เนี่ยถ้าคนที่มาเล่นไม่ใส่ข้อมูลอะไรมาเลยแล้วกดปุ่ม insert หรืออะไร ทำนองนี้นะครับ เพราะผมตั้งใจจะพูดเรื่องเหล่านี้ในบทความต่อๆไปครับผม.

<!– webDB.cfm –>

<html>
<head>
<title>web database with coldfusion</title>
</head>
<body bgcolor=”#FFFFFF”>

<CFIF IsDefined(“Form.command”)>
<CFIF (Form.command eq “insert”)>

<CFQUERY Datasource =”cftest1″>
INSERT INTO Example001 (Name,Email) VALUES(‘#Form.name#‘, ‘#Form.email#‘)
</CFQUERY> 
INSERT DONE !

<CFELSEIF (Form.command eq “update”)>

<CFQUERY Datasource =”cftest1″>
UPDATE Example001 SET Name = ‘#Form.name#‘, Email = ‘#Form.email#‘ WHERE ID = #Form.ID#
</CFQUERY> 
UPDATE DONE !

<CFELSEIF (Form.command eq “delete”)>

<CFQUERY Datasource =”cftest1″>
DELETE FROM Example001 WHERE ID =#Form.ID#
</CFQUERY> 
DELETE DONE !
</CFIF>

<CFELSE>

<table border =”0″>
<tr bgcolor =”#808080″>
<td align =”center”>ID</td>
<td align =”center”>Name</td>
<td align =”center”>E-mail</td>
<td colspan =”2″ bgcolor =”#ffffff”>&nbsp;</td>
</tr>

<CFQUERY Datasource =”cftest1″ Name =”Display”>
SELECT * FROM Example001
</CFQUERY> 
<CFOUTPUT Query=”Display”>

<tr bgcolor =”##eeeeee“>
<form action =”webDB.cfm” method =”post”>
<td align =”center”>
#ID#<input type =”Hidden” name =”ID” value =”#ID#“></td>
<td><input type =”text” name =”name” value =”
#Name#“></td>
<td><input type =”text” name =”email” value =”
#Email#“></td>
<td><input type =”Hidden” name =”command” value =”update”><input type =”submit” value =”Update”></td>
</form>
<form action =”webDB.cfm” method =”post”>
<td><input type =”Hidden” name =”ID” value =”
#ID#“><input type =”Hidden” name =”command” value =”delete”><input type =”submit” value =”Delete”></td>
</form>
</tr>

</CFOUTPUT>
</table>
<p>
INSERT NEW RECORD.
<table border =”0″>
<tr bgcolor =”#808080″>
<td align =”center”>Name</td>
<td align =”center”>E-mail</td>
<td bgcolor =”#ffffff”>&nbsp;</td>
</tr>
<tr>
<form action =”webDB.cfm” method =”post”>
<td><input type =”text” name =”name”></td>
<td><input type =”text” name =”email”></td>
<td><input type =”Hidden” name =”command” value =”insert”><input type =”submit” value =”Insert”></td>
</form>
</tr>
</table>


</CFIF>
</body>
</html>

เสร็จแล้ว SAVE เอาไว้ในชื่อ webDB.cfm ก็ได้นะครับ เสร็จแล้วลองเล่นดูก็ได้ครับ เมื่อรันแล้วจะได้ตามรูปด้านล่าง คุณสามารถที่จะดูข้อมุลในฐานข้อมูลของคุณ , insert ข้อมูลชุดใหม่ , แก้ไขข้อมูล และลบข้อมูลใน Database ของคุณผ่านหน้าเว็บได้เลยครับ

หวังว่าคงจะไม่ยากจนเกินไปนะครับ ใครว่ายากหรือยังไม่ clear แบบว่า โอ้ยอ่านแล้วปวดหัวก็ลองเมล์มาคุยกับผมได้ครับ ColdFusion เนี่ยผมว่าเป็น Server Side Programming ที่ง่ายที่สุดแล้วในความคิดของผมนะครับ แต่ก็ค่อนข้าง PowerFull นะครับ ในครั้งต่อไปผมจะมาบ่นเรื่องอะไรเกี่ยวกับ ColdFusion ต่อ ก็ลองติดตามกันนะครับ.

Download source code : webDB.zip

Coldfusion อะไรเอ๋ย


[บทความนี้แต่งขึ้นเมื่อ OCT 1999 โดย Rittichart S.]

การเขียนโปรแกรมแบบ Server Side บนเว็บนั้น ได้รับความนิยมอย่างแพร่หลายมากขึ้นในปัจจุบัน จากกระแส ความ popular ของการพัฒนาเว็บไซต์แบบ Dynamic ต่างจากการทำเว็บในสมัยก่อน ที่เพียง แค่เขียน html ของเพจแต่ละหน้า มี cgi นิดๆหน่อยๆ เฉพาะงานนั้นๆ.

 ภาษา และ Tool สำหรับการทำ Dynamic website หลายตัว หลายยี่ห้อ ได้ถูกพัฒนาขึ้นมาอย่างรวดเร็วมากในยุคหลังๆ ไม่ว่าจะเป้น ASP,PHP,JSP,FastCGI และอื่นๆอีกมากมาย แต่ตัวที่ ผมกำลังสนใจ และ จะขอนำมาพูดถึงนั้น คือ Tool จากบริษัท Allaire ที่มีชื่อว่า ColdFusion ครับ.

 สำหรับประวัติคร่าวๆของ มัน ก็ หึหึ.. จะรู้ไปทำไมเนี่ย.. ลองเอามาเล่นกันดูก่อนเถอะครับ. จริงๆข้อเสียของมันเนี่ยนะ ที่ผมเห็นชัดๆเลยคือ มันแพงหน่ะ มันไม่ฟรี. อาศัยที่บริษัทที่ผมทำงานอยู่ เค้ามีอยู่แล้ว ผมเลยได้เล่นมัน แต่ไม่ต้องกลัวมันก็มี Shareware version ให้ Downloadมาทดสอบกัน ลองไปโหลดมาลองเล่นดูครับ คลิ้กเล้ยย... หรือจะลองเอา version พิเศษ ที่เรียกว่า ColdFusion Expressมาลองเล่นดูก็ได้ อันนี้ ฟรีครับ แต่ จะจำกัดคุณสมบัติ คือ ใช้ได้ไม่เต็มร้อย แต่ใช้ได้เรื่อยๆ ไม่มีหมดอายุเหมือน version shareware แต่เท่าที่ผมดูมานี่ Feature สำคัญๆ เจ๋งๆ ก็ยังใช้ได้อยู่เหมือนเดิม.

 สำหรับหลักการทำงานของมัน ก็ง่ายครับ จะว่าเหมือน ASP กับ PHP เลยก็ว่าได้ พอคุณ Install ColdFusion ลงไปแล้ว มัน ก็จะ ทำตัวเองเป็น ColdFusion Server ทำงานควบคู่กับ Web server ในเครื่องของคุณ ซึ่ง ปัจจุบัน ColdFusion สามารถรันได้ใน Windows , Solaris และ HPUX . ข่าวแว่วๆมาว่า ColdFusion for Linux กำลังจะออกเร็วๆนี้นะครับ.

 เวลาเขียน code ของ ColdFusion นั้นเราจะใช้ภาษา ที่เรียกว่า CFML หรือ ColdFusion Markup Language. เป็นภาษาที่ง่ายมาก เหมือน html มากๆเลย คือ จะเป็น Tag เช่น

<CFOUTPUT> Hello world </CFOUTPUT>

คุณก็จะได้ หน้าเพจ ที่ โชว์ตัวหนังสือ ว่า ‘Hello world’ ง่ายมากใช่ไหม. ทีนี้ เวลาเขียนคุณก็สามารถที่จะแทรก Tag ต่างๆของ CFML ลงไปผสมกับ Tag ของ HTML ได้เลย อย่างที่ผมบอก ว่ามันเหมือน ASP กับ PHP มาก จริงๆแล้วผมยังคิดอยู่ว่า ASP กับ PHP น่าจะได้ Idea ในการแทรก code ลงไปใน Html เพจ มาจาก ColdFusion ซะมากกว่า เพราะ ColdFusion ออกมาก่อน ASP กับ PHP นานพอสมควรครับ.

 เอาละผมว่าเรามาเริ่มทำอะไร เป็นชิ้นเป็นอันกันเลยดีกว่า. ก่อนจะเริ่ม คุณต้องดูให้แน่ใจก่อนนะครับว่า เครื่องของคุณได้ลง Web server เอาไว้แล้ว. แล้ว ก็ Install ColdFsion ไปเรียบร้อยแล้ว. 
สำหรับ Spec ของเครื่องที่ ColdFusion ต้องการคือ

สำหรับ Windows 95 and 98, and Windows NT

  • OS: Windows NT 3.51 (or higher) or Windows 95/98
  • Processor: Intel 486 or higher (Pentium recommended)
  • Disk space: 30MB
  • Memory: 32MB
  • Web server: A World Wide Web server (supporting NSAPI, ISAPI, or WSAPI recommended)
  • Other: A CD-ROM drive

สำหรับ Solaris (Enterprise edition only)

  • OS: Solaris 2.5.1 or 2.6 running on Sparc
  • Memory: 128 MB
  • Disk space: 120 MB for a full install
  • Web server: Netscape Fast Track/Enterprise versions 2.01 or 3.0, 3.51 or Apache 1.2 or 1.3
  • Other: A CD-ROM drive

 สำหรับเครื่องที่ผมใช้ทดสอบอยู่นี่ ผมใช้ Pentium MMX 166, RAM 64, Windows 95 และ Personal Web server version2 ครับ (แบบ..ชอบของเก่าอ่ะนะ) อ้อ อย่าลืม เปลี่ยน mode ให้เว็บของคุณ EXECUTE ได้ด้วยนะ. ไม่งั้น Run ColdFusion ไม่ได้น่าเฮีย. สำหรับคนที่ใช้ Web Hosting คือไปเช่า Host เอาไว้เนี่ย ถ้าอยากเล่น ColdFusion ก็ลองถามเค้าดูด้วยนะครับว่า มีให้ใช้หรือเปล่า แล้วอย่าลืม เช็คด้วยว่า เขาจะ Set DSN (เพื่อต่อ Database) ให้ได้หรือไม่ และ มี TAG ของ ColdFusion อะไรบ้างที่ห้ามใช้.

ทีนี้ เรามาเริ่มต้นกันกับเรื่องพื้นๆ ก่อนนะครับ นั่นคือ การเขียน ColdFusion ให้ไปดึงข้อมูลมาจาก Database.

ขั้นแรก. สร้าง ดาต้าเบสขึ้นมาจาก Access .ตั้งชื่อไฟล์ว่า CF_test.mdb กำหนดให้มี Table 1 table ตั้งชื่อว่า Example001, สร้าง field ขึ้นมา 3 fields ดังนี้.

  • ID, Date type = AutoNumber, Primary key
  • Name, Date type = Text
  • Email, Date type = Text

โอเค จากนั้นก็ใส่ข้อมูลลงไป เอาซักห้าชุด ก็แล้วกัน. ตามรูปนะครับ. อ้อ Email ในรูปผมมั่วขึ้นมาเอง ไม่มีจริงๆหรอก แฮ่ๆ แหม เอามาทดสอบเฉยๆ.

เอาละในเมื่อเราได้ ดาต้าเบสมาแล้ว ขั้นต่อไปก็ setup Data source name (DSN) ให้กับ ดาต้าเบสตัวนี้. (ใครที่ทำเป็นแล้ว ก็ข้ามไปได้เลย) วิธี ก็ไม่ยากหรอกครับ. เปิด Control Panel/ODBC จากนั้นเลือกที่ TAB System DSN, แล้วกดปุ่ม Add. ต่อมาก็เลือกที่ Microsoft Access Driver แล้วกดปุ่ม Finish. จากนั้นก็ตั้งชื่อ DSN ที่ต้องการลงในช่อง Data Source Name: เอาเป็นว่าเราจะใช้ DSN ชื่อว่า cftest1 แล้วกัน. จากนั้น ก็กด Select แล้วก็ Browse ไปหาไฟล์ ดาต้าเบสที่ ทำเอาไว้ตอนต้น เสร็จแล้ว กดโอเค ก็เรียบร้อย เสร็จสิ้นขั้นตอน Setup DSN

TIP: ขณะ setup DSN อยู่นั้น ตัวดาต้าเบส ที่เราจะใช้นั้น ไม่ควรจะถูกเปิดอยู่.

ทีนี้ ก็มาถึงขั้นตอนการเขียน code ซะที.. ดูตามข้างล่างเลย

<!– myFirstColdFusion.cfm –>

<CFQUERY Datasource =”cftest1″ Name =”FirstCF”>
SELECT Name, Email FROM Example001
</CFQUERY>

<html>
<head>
<title>My first ColdFusion</title>
</head>
<body bgcolor=”#FFFFFF”>

<ul>
<CFOUTPUT Query =”FirstCF”>
<li>#Name# (<a href =”mailto:#Email#“>#Email#</a>)</li>
</CFOUTPUT>
</ul>

</body>
</html>

คีย์ Code ตามที่เห้นด้านบนนะครับ แล้ว SAVE นามสกุล .cfm ดังเช่นตามตัวอย่าง ผม SAVE ไว้ในชื่อว่า myFirstColdFusion.cfm. อย่าลืม SAVE เอาไว้ในพื้นที่ๆ เตรียมเอาไว้ใน Web server แล้วต้องทำให้พื้นที่นั้น Execute หรือ Allow Program to be run ได้ด้วยครับ. จากนั้นก็เปิด Browser ของคุณขึ้นมา แล้วก็ทดสอบรันไฟล์ที่คุณเพิ่ง SAVE นี้ขึ้นมาเลย ผ่านทาง HTTP เช่น http://computername/myFirstColdFusion.cfm หรือ http://127.0.0.1/myFirstColdFusion.cfm ก็ได้ ถ้าไม่มีอะไรผิดพลาด คุณจะได้ผล ดังรูปด้านล่างนี้. Page จะดึงข้อมูลมาจาก Database แล้วมาจัดเรียง ตามที่เราเขียน Html กำหนดเอาไว้.

 ทีนี้จะมาอธิบาย Code ด้านบนกัน ส่วนสีฟ้า คือส่วนที่เป็น ColdFusion Tag , สีแดง นั้นคือส่วนของ SQL ส่วนสีดำก็คือ HTML Tag ธรรมดา เราลองมาไล่ดู Code กัน

<CFQUERY Datasource =”cftest1″ Name =”FirstCF”>

</CFQUERY>

เป็นคำสั่งเพื่อที่จะทำการ ติดต่อกับตัวดาต้าเบส เพื่อที่จะส่ง SQL statement ไปทำการ Query ข้อมูลตามที่ต้องการ. ตามตัวอย่าง ผม SELECT field ออกมา 2 fields คือ Name และ Email จาก Table ชื่อว่า Example001. จะสังเกตุว่า Tag ของ ColdFusion นั้น เวลาเปิดแล้ว ต้องมีปิดเหมือนกับ Html Tag คือเมื่อเปิด <CFQUERY> จะต้องปิด </CFQUERY> ด้วยครับ. ส่วน Datasource = “cftest1” นั้น เป็นการระบุ DSN ลงไปเพื่อให้ ColdFusion รู้ว่าจะใช้ Database ตัวไหน ส่วน Name =”FirstCF” นั้น เป็นการตั้งชื่อให้กับการทำการ ครั้งนี้ เพื่อจะนำไป Refer ถึงในการแสดงข้อมูลต่อไป.

สำหรับในส่วนของการนำข้อมูลมาแสดงนั้น ColdFusion จะใช้ TAG ที่ชื่อว่า <CFOUTPUT> ถ้าดูจาก Code ด้านบน

<CFOUTPUT QUERY =”FirstCF”>

</CFOUTPUT>

คำสั่ง Query =”FirstCF” เป็นการกำหนดให้ <CFOUTPUT> นั้น รู้ว่า จะนำข้อมูลที่ได้มาจากการทำการที่ชื่อว่า FirstCF ที่เราทำไว้ตอนต้นรายการ (ยังกะรายการทำอาหารเนอะ)มาใช้.

สำหรับการนำข้อมูลจากการ Query Database มาโชว์นั้น เราสามารถระบุลงไปได้ โดยใช้สัญลักษณ์ (#) มาคลุมรอบ ชื่อของ Field ใน Database ที่คุณได้ SELECT เอาไว้จาก SQL statmet ที่ทำเอาไว้ใน <CFQUERY> ตัวอย่างเช่น #Name#, #Email#
Tag <CFOUTPUT> นั้นจะทำการ Loop จดถึง Record สุดท้ายให้คุณเองโดยอัตโนมัติ แล้วนำข้อมูลทุก Record มาโชว์ ตามที่คุณต้องการ จาก การเขียน SQL statement ของคุณเอง.

ทั้งนี้และทั้งนั้น <CFOUTPUT> ก็ยังสามารถที่จะ Limit จำนวนข้อมูลไม่ให้โชว์ทุก Record ได้ด้วย คือเพิ่ม

<CFOUTPUT QUERY =”cftest” MAXROWS=”3″> ข้อมุลที่ถูกนำมาโชว์ก็จะถูก Limit ไว้ที่ สามชุดแรกที่ถูก Query ออกมา.

เห็นไหม ColdFusion ง่ายนี้ดเดียว… (ยากตรึมเรย.. ฮาา) ลองให้เวลาศึกษามันดู แล้วคุณจะรักมันเหมือนผม ในครั้งต่อไป เราจะมาว่ากันด้วยเรื่อง การ INSERT, UPDATE,DELETE และ SEARCH ดาต้าเบส ด้วย ColdFusion กันครับ

Download source code : webDB.zip