สอนทำ jQuery Slide Show แสดงรายการสินค้า

          เว็บไซต์ในปัจจุบันนี้ เราเรียกกันว่า เป็นยุคเทคโนโลยี Web 2.0 เทคโนโลยีที่ว่านี้ มันจะมีเทคนิคและคุณสมบัติ ในการทำเว็บไซต์เพิ่มเข้ามา เช่น CSS, JSON, XML, RSS,AJAX, JavaScript Framework (jQuery,Mootools) เป็นต้น ทำให้เว็บไซต์มีการDesignหน้าตาที่สวยงามและมีลูกเล่นที่ตอบสนองกับผู้ใช้งานได้เป็นอย่างดี และก่อให้เกิดธุรกิจแบบใหม่ต่างๆบนอินเตอร์เนตมากมาย เช่น Web E-Commerce ต่างๆ,เว็บข่าวสารต่างๆ, facebook , google เป็นต้น
          บทความนี้จะนำเสนอเทคนิคการทำเว็บอีกอย่างนึง คือการทำ slide show ซึ่งเราจะเห็นเกือบทุกเว็บไซต์เลยก็ว่าได้ครับ ที่มีตัว slide show นี้อยู่ในเว็บเหล่านั้น โดยอาจจะเอามาใช้แสดง Bannerโฆษณา,แสดงรูปภาพ หรืออื่นๆแล้วแต่จะนำมาประยุกต์ใช้ครับ Slide Show ตัวนี้ เราจะเขียนด้วย jQuery ครับ โดยจะเป็น Slide Show แบบเลื่อนซ้ายขวาเพื่อแสดงรายการสินค้า คุณสามารถนำเอาไปประยุกต์ใช้งานตามความต้องการของคุณได้ เช่น แสดงรายการสินค้ามาใหม่ล่าสุด,สินค้าแนะนำ,สินค้าขายดี 10 อันดับ,แสดงBannerโฆษณาบนเว็บไซต์ของคุณก็ได้ครับ

มาดูCodeกันเลยครับ สร้างไฟล์ .php ขึ้นมาแล้วให้พิมพ์ Code ตามนี้

สอนทำ Autocomplete ด้วย jQuery+AJAX ค้นหาหมวดสินค้า

          ช่วงนี้ผมค่อนข้างจะมีเวลาว่างเยอะเลยครับ ทำให้ผมมีเวลาเข้ามาอัพเดทบทความในBlogนี้ค่อนข้างจะบ่อยซักหน่อยครับ และผมก็คิดเอาไว้นานแล้วว่าจะสอนใช้เทคนิค AJAX มาประยุกต์ใช้กับ Web E-Commerce เนื่องจากเนื้อหาที่สอนในบทความสอนทำ Web E-Commerceก่อนๆหน้า ผมก็ได้สอนไปเยอะมากแล้ว จนแทบจะไม่มีอะไรจะสอนแล้วครับ ^_^ ดังนั้นบทความต่อไป ผมจะสอนการใช้เทคนิคต่างๆในการทำ Web E-Commerce ก็แล้วนะครับ โดยผมอาจจะใช้ Code จากบทความก่อนหน้าที่เคยสอนไปแล้วมาปรับแก้นิดหน่อยนะครับ คุณจะได้ทบทวนCodeเก่าที่ผมเคยได้สอนไปด้วยยังไงล่ะครับ ^_^
          บทความนี้จะสอนทำ Autocomplete ด้วย jQuery+AJAX  (คล้ายๆของGoogle แต่ไม่เหมือนนะครับ ^__^) ครับ
โดยเราจะทำการเขียนCodeเองเลย โดยที่ไม่ต้องพึ่ง Plugin ของ jQuery ที่มีให้ดาวน์โหลดกันเกลื่อนกลาดบนWeb และ การทำ Autocomplete เองก็ไม่ใช่ระบบที่ยุ่งยากซับซ้อนอะไรเลยครับ เพราะเรามี jQuery มาช่วยเขียนสคริปต์ จาวาสคริปต์ ทำให้ช่วยลดการเขียนสคริปต์ที่ซับซ้อนลงไปเยอะเลยครับ และที่สำคัญ เราจะรู้สึกภูมิใจม๊ากมากครับ ถ้าเราเป็นคนเขียนCodeเอง โดยที่ไม่ได้ไปเอาของใครมาแก้ไขเป็นของตัวเอง (^0^)

เริ่มกันเลยนะครับ ให้สร้างไฟล์ขึ้นมา 2 ไฟล์ครับ ตั้งชื่อ autocomplete1.php และ autocomplete2.php
ไฟล์ autocomplete1.php ->สำหรับเขียนสคริปต์ Autocomplete ด้วย jQuery โดยเราจะใช้  AJAX Library เพื่อ request ข้อมูลหมวดสินค้า จากไฟล์ autocomplete2.php ครับ ให้พิมพ์Codeดังนี้

เขียนคำสั่ง แสดงผล-แบ่งหน้ารายการสินค้า โดยใช้เทคนิค AJAX

        เนื่องจากบทความก่อนหน้า มีเนื้อหาค่อนข้างซับซ้อน ทำให้บางคนอาจต้องใช้เวลาทำความเข้าใจค่อนข้างนาน  ผมก็เลยทำบทความนี้ขึ้นมา เพราะ Code ที่ใช้ไม่ค่อยซับซ้อน และเขียนคำสั่งเพียงไม่กี่บรรทัด ก็สามารถได้ผลลัพธุ์ตามที่เราต้องการแล้วล่ะครับ เพื่อทำให้เรามองเห็นการใช้เทคนิคแบบ AJAX ได้เข้าใจมากขึ้นครับ และสามารถนำไปประยุกต์ใช้กับ Web Application ของคุณได้
บทความนี้เราจะได้เห็นการใช้เทคนิค AJAX ในการแสดงรายการสินค้าจากร้านค้าออนไลน์หรือเว็บขายของของเรา โดยเราจะมีการเขียนคำสั่งแบ่งหน้าข้อมูลอีกด้วย และเราจะใช้ jQuery (JavaScript Framework) มาช่วยในการเขียนสคริป จาวาสคริปต์ ครับ เพื่อช่วยให้เราเขียนคำสั่งได้สั้นและได้ผลลัพธุ์ที่รวดเร็วยิ่งขึ้น และใน jQuery เอง ก็มี Library ของ AJAX อยู่ด้วย ทำให้รองรับการแสดงผลได้ทุก Browserเลยครับ

ทำระบบ Add to Cart โดยใช้เทคนิค AJAX และลูกเล่นแบบเทพช็อป ด้วย jQuery

หลังจากที่เคยสอนทำระบบ Add to Cart ซึ่งเป็นระบบในร้านค้าออนไลน์หรือเว็บขายของ(E-Commerce Website)ด้วยตัวแปรแบบ Cookie และ Session มาแล้ว ต่อไปผมจะสอนการทำ Add to Cart อีกแบบนึง คือการใช้เทคนิค AJAX เข้ามาช่วย ทำให้หน้าเว็บเพจมีการโต้ตอบกับผู้ใช้ได้สะดวกและรวดเร็วยิ่งขึ้น และปัจจุบันเทคนิคได้รับความนิยมเป็นอย่างมาก โดยจะเห็นได้จากหลายๆเว็บไซต์ ที่ได้นำเทคนิคนี้มาใช้
มาเริ่มทำกันเลยดีกว่าครับ

ทำระบบ Add to Cart โดยใช้ตัวแปรแบบ Cookie

              ระบบ Add to Cart เป็นระบบจัดเก็บสินค้าจากเว็บร้านค้าออนไลน์ (เว็บขายของ) ที่เราต้องการจะสั่งซื้อ โดยมันจะเก็บข้อมูลทีละรายการสินค้าที่สั่งซื้อในรูปแบบอาเรย์  เรคคอร์ดและคอลัมน์=แถวที่ 1(รหัส,ชื่อ,จำนวน,ราคา),แถวที่ 2(รหัส,ชื่อ,จำนวน,ราคา) … เรคคอร์ดที่ n(รหัส,ชื่อ,จำนวน,ราคา) สำหรับวิธีจัดเก็บข้อมูลที่นิยมกันก็คือ การใช้ตัวแปรแบบSessionและใช้ตัวแปรแบบCookie จัดเก็บข้อมูล
ซึ่งวิธีจัดเก็บทั้งสองวิธีนั้นสิ่งที่แตกต่างกันกันคือ
     - ตัวแปรแบบSessionจะทำงานตอนที่Browserเปิดใช้งานอยู่และข้อมูลจะสูญหายหรือถูกทำลายตอนปิดBrowser
     - แต่สำหรับตัวแปรแบบCookieแล้ว ข้อมูลจะไม่สูญหายถึงแม้ว่าเราจะปิดBrowserไปแล้วก็ตาม แต่มันจะถูกทำลายตอนที่เราเคลียร์ค่าคุ๊กกี้ในBrowserของเรา หรือคุ๊กกี้หมดอายุเท่านั้น เช่น เรากำหนดอายุไว้ 1 เดือน ตัวแปรนี้จะทำงานได้ปกติจนถึง1เดือน และจะถูกทำลายโดยอัตโนมัติครับ
ดังนั้น บทความนี้จะเป็นบทความเกี่ยวกับ การทำระบบ Add to Cart ด้วยตัวแปรแบบ Cookie ครับ สำหรับ การทำระบบตะกร้าสินค้า ด้วยตัวแปรแบบ Session ผมได้สอนไปแล้วในบทความนี้ครับ http://php-for-ecommerce.blogspot.com/2010/12/1-add-to-cart-1-add-to-cart.html เข้าไปอ่านเพิ่มเติมกันได้เลย เพราะผมได้เอาCodeในบทความนี้มาดัดแปลงครับ โดยได้ลบคำสั่งที่เกี่ยวข้องกับ Session ทิ้งและแทนด้วยคำสั่งของตัวแปรแบบ cookie แทนครับ

ซูมรูปสินค้าด้วย Highslide

           บทความนี้จะสอนท่านเขียน Code PHP ดึงข้อมูลสินค้าจากฐานข้อมูล MySQL และเราจะโฟกัสไปที่การแสดงผลรูปภาพของสินค้า โดยเราจะมีการเขียนคำสั่งซูมรูปภาพของสินค้าโดยใช้สคริปต์ซูมรูปภาพที่ชื่อว่า Highslide ครับ เป็นสคริปต์ที่เขียนด้วย จาวาสคริปต์ ความสามารถของมันคือ สามารถซูมรูปภาพและสามารถแสดงผลรูปภาพเป็นแบบGalleryได้อีกด้วยครับ สำหรับเรื่องของการซูมรูปภาพ ผมเคยได้สอนมาแล้วครั้งนึงในบทความนี้  http://php-for-ecommerce.blogspot.com/2010/11/4-topup-jquery.html  โดยใช้ตัวซูมรูปภาพที่ชื่อว่า Topup พัฒนาจาก Jquery (Javascript Framework) แต่มีFeatureที่ด้อยกว่าHightslideมากเลยครับและพัฒนาช้ากว่าด้วย ผมก็เลยอยากจะแนะนำให้มาใช้ Highslide ดีกว่าครับ

ปล.Highslide ไม่ได้เขียนด้วยJqueryนะครับ

          มาดูวิธีใช้งานกันเลยครับ ก่อนอื่นไปดาวน์โหลด HighSlide มาติดตั้งที่เครื่องก่อน  ดาวน์โหลดได้จากเว็บไซต์นี้->www.highslide.com สำหรับวิธีติดตั้งของผมคือ แตกโฟลเดอร์ออกมาแล้วตั้งชื่อว่า hightslide แล้วสร้างโฟลเดอร์ชื่อ js แล้วเอาโฟลเดอร์ hightslideไปไว้โฟลเดอร์ js ดังรูป

แสดงสินค้าในตารางโดยแบ่งข้อมูลเป็นคอลัมน์

บทความ PHP For E-commerce ตอนนี้ ผมจะสอนท่านเขียนคำสั่ง PHP ร่วมกับ ฐานข้อมูล MySQL เพื่อดึงข้อมูลสินค้าจากในร้านค้าออนไลน์ของเราออกมาแสดงผลในตาราง โดยที่เราสามารถกำหนดการแสดงผลข้อมูลได้อีกด้วย ว่าเราต้องการจะให้ข้อมูลแสดงผลในตารางกี่คอลัมน์หรือกี่แถวก็ได้ครับ ดูตัวอย่าง code โปรแกรมได้เลยครับ

แปลง HTML เป็นไฟล์ PDF ด้วย HTML2PDF

หลายคนอาจจะรู้จัก FPDF คือตัวสร้างไฟล์.pdf เขียนด้วยPHP ในรูปแบบOOP แต่ก็เป็นเรื่องที่ค่อนข้างจะยุ่งยากต่อความเข้าของใครหลายๆคน เพราะต้องกำหนดจุดพิกัด ขนาด ความกว้าง เองทั้งหมด ผมก็เคยใช้อยู่พักนึง ปัญหาผมที่เจอก็คือ การสร้างตารางที่ต้องกำหนดความกว้างของตารางเอง และดึงข้อมูลจาก Database มาแสดง ซึงข้อมูลแต่ละแถวมีอักขระมากน้อยแตกต่างกันไป ทำให้เจอปัญหาก็คือ ข้อความที่อยู่ภายในแต่ละช่องของตารางจะล้นออกมา มันไม่ตัดแถวให้อัตโนมัติ ปัญหานี้จะหมดไปเพียงคุณเขียนคำสั่ง HTML และ CSS ได้แล้วส่งคำสั่งเข้าไปให้มันที่เหลือมันจะGanarate เป็นไฟล์ PDF ให้เราเองครับ มาดูวิธีสร้างไฟล์ PDF กันเลยครับ
1.ดาวน์โหลด โปรแกรม HTML2PDF มาก่อนครับ ตามลิงค์นี้ ->http://html2pdf.fr/en/default
2.ตั้งชื่อโฟลเดอร์ใหม่ซะ(จะไม่ตั้งก็ได้ แล้วแต่)เป็น exportpdf แล้วเอาไปเก็บไว้ในโฟลเดอร์โปรเจ็คของท่าน
3.วิธีเรียกใช้งาน แบบให้รองรับภาษาไทยด้วย
ให้กำหนดดังนี้

การทำให้ไฟล์ pdf แสดงผลเป็นภาษาไทยคือ กำหนด font style ให้เป็น font-family:freeserif นั้นเองครับ
ศึกษาเพิ่มเติมได้จากที่นี่ครับ ->http://wiki.spipu.net/doku.php?id=html2pdf:en:v4:accueil

จัดการข้อมูลการสั่งซื้อของลูกค้า(Admin) ตอนที่ 2 ดูข้อมูลการสั่งซื้อของลูกค้า

ดูข้อมูลการสั่งซื้อของลูกค้า

       จากบทที่แล้วผมได้สอนเขียนCode PHP,html,MySQL ค้นหาข้อมูลการสั่งซื้อของลูกค้ากันแล้วคับ สำหรับบทความสอนทำระบบ E-Commerce ด้วย PHP และ ฐานข้อมูล MySQL ตอนนี้เราจะสอนท่านเขียนCode  PHP,html,MySQL แสดงรายละเอียดการสั่งซื้อของลูกค้าแต่ละคนคับ ดูผลลัพธ์จากที่นี่เลยคับ
 เราจะกลับไปที่ไฟล์ admin_showorder.php เพื่อแก้ไขและเพิ่มเติมCode PHP บางส่วนเข้าไปคับ
ให้เปิดไฟล์ admin_showorder.php ขึ้นมา แล้วแก้ไขCodeตามนี้เลยคับ

จัดการข้อมูลการสั่งซื้อของลูกค้า(Admin) ตอนที่ 1 ค้นหาข้อมูลการสั่งซื้อของลูกค้า จาก วัน เดือน ปี หรือ ชื่อของลูกค้า

   ท่านอาจจะงงกับบทความก่อนหน้านี้ ที่ว่าด้วยเรื่องของ ASP.NET ซึ่งอาจจะดูนอกเนื้อหาของBlogนี้ซักหน่อยคับ ความจริงแล้ว ผมทำบทความ ASP.NET ทั้ง 3 บทความเสร็จก่อนบทความสอน  PHP E-Commerce  ซะอีก แต่ผมได้ปิดการแสดงผลไว้ เพราะตอนนั้นลังเลว่าจะสอน ASP.NET หรือ PHP ดีคับ และเห็นว่าช่วงหลังๆนี้ไม่มีบทความอัพเดทให้ท่านได้อ่านกันเลย ก็เลยเอาบทความเก่าๆมาลงแทน(กลัวตกอันดับจากกูเกิลด้วยคับ อิอิ)

สร้าง Database และ Data Source ในMs-Access

ขั้นตอนแรก รัน Ms-Access เพื่อสร้างdatabaseที่เราจะนำมาใช้งานขึ้นมาก่อน 1 base

• เลือก สร้าง
• สังเกตุเมนุฝั่งขวามือ ให้เลือก สร้างฐานข้อมูลเปล่า และsaveเก็บไว้ในจุดไหนก็ได้ แต่ผมแนะนำให้เอาไปเก็บไว้ในไดเร็กทอรี่ไฟล์โปรแกรมของเราดีกว่า โดยสร้างโฟล์เดอร์เพื่อเก็บbaseของเรา ของผมตั้งชื่อbaseว่า mybase.mdb เก็บไว้ใน C:\Inetpub\wwwroot\asp\database โดยที่ asp คือชื่อโฟล์เดอร์ที่ใช้เก็บไฟล์asp ส่วน dababase คือ โฟล์เดอร์ที่ใช้เก็บbaseของเราคับ
• เลือก ออกแบบ และเข้าไปกำหนด ฟิล์ หรือชื่อเขตข้อมูล และกำหนดชนิดของข้อมูล databaseของผมมีชื่อฟิล์ดังนี้ id ชนิดข้อมูลเป็น AutoNumber,fname ชนิดข้อมูลเป็น Text ,lname ชนิดข้อมูลเป็น lname,add ชนิดข้อมูลเป็น Text ,tel ชนิดข้อมุลเป็น Text,email ชนิดข้อมูลเป็น Text
• จากนั้นให้กดเซฟ และตั้งชื่อเทเบิลของคุณ ของผมตั้งชื่อว่า member ถือว่าเสร็จสิ้นขั้นตอนการสร้างฐานข้อมูลแล้ว เราสามารถสร้างเทเบิลได้หลายๆเทเบิลในdadabase 1database ในที่นี่ผมยกตัวอย่างแค่สร้างเทเบิลเดียว คือ member ในdatabase ที่ชื่อว่า mybase.mdb คับ

ติดตั้งฐานข้อมูล Microsoft Sql Server Express Edition และโปรแกรมจัดการฐานข้อมูล

ขั้นตอนแรกให้ไปดาวน์โหลดฐานข้อมูล Sql Server ตอนนี้ผมใช้เวอร์ชั่น2005 แต่ตอนนี้มีเวอร์ชั่น2008ออกมาแล้ว ท่านจะเลือกใช้เวอร์ชั่นไหนก็ได้
ขั้นตอนที่2 เมื่อดาวน์โหลดมาได้แล้ว ก็ให้ทำการติดตั้งให้เรียบร้อยซะ ให้ทำตามในลิงค์นี้เลย>>http://greatfriends.biz/webboards/msg.asp?id=16356
ขั้นตอนที่3 ต่อไปเราจะติดตั้งโปรแกรมMicrosoft Sql Server Management ซึ่งเป็นโปรแกรมบริหารจัดการฐานข้อมูล ให้ไปดาวน์โหลดตามลิงค์นี้เลยครับ>>http://www.microsoft.com/downloadS/details.aspx?familyid=C243A5AE-4BD1-4E3D-94B8-5A0F62BF7796&displaylang=en แล้วทำการติดตั้งซะให้เรียบร้อย สำหรับการติดตั้งก็ไม่มีอะไรมาก แค่คลิกnextต่อไปเรื่อยๆ
สำหรับวิธีใช้งานฐานข้อมูลให้เข้าไปศึกษาตามลิงค์นี้เลยครับ>>http://www.thaicreate.com/asp.net/asp.net-sql-server2005.html
และลิงค์นี้คับ>>http://www.thaicreate.com/asp.net/asp.net-sql-server.html

ติดตั้ง.Net framework และWeb Server สำหรับ Win xp

ขั้นตอนแรกให้ไปดาวน์โหลด.Net Framework มาซะก่อน แนะนำให้ใช้ เวอร์ชั่น 3.5 ครับ เพราะเป็นเวอร์ชั่นใหม่ล่าสุด
ขั้นตอนที่2 ให้ทำการติดตั้ง ซึ่งการติดตั้งก็เหมือนกับการติดตั้งโปรแกรมทั้่วไป ไม่ขออธิบายในส่วนนี้
ขั้นตอนที่3 เราจะทำการติดตั้ง Web Server IIS ซึ่่งเป็นเว็บเซิร์ฟเวอร์ที่ติดมากับตัวโปรแกรม Windows xp (IIS ERROR)
ให้ทำการศึกษาและทำตามขั้นตอนจากลิงค์นี้เลยครับ>> http://www.cmsthailand.com/docs/iis_install.html

แสดงข้อมูลสั่งซื้อสินค้าสำหรับสมาชิก

หลังจากที่ได้สอนท่านทำระบบตะกร้าสินค้าแล้ว ต่อไปเราจะมาทำการแสดงข้อมูลการสั่งซื้อของสมาชิกกันคับ ซึ่งเราจะทำเฉพาะในส่วนของสมาชิก โดยที่สมาชิกจะต้องทำการล็อกอินเข้าสู่ระบบก่อนถึงจะสามารถดูข้อมูลการสั่งซื้อของตนได้คับ สำหรับในส่วนของAdminที่จะสามารถดูข้อมูลการสั่งซื้อของสมาชิกแต่ละคนได้นั้นเอาไว้สอนทีหลังคับ บทความนี้จะสอนเฉพาะการแสดงรายการสั่งซื้อของสมาชิกคนนั้นๆออกมาแสดงเท่านั้น ซึ่งสมาชิกคนอื่นๆจะมองเห็นเฉพาะรายการสั่งซื้อของตนเท่านั้น จะไม่สามารถมองเห็นรายการสั่งซื้อของสมาชิกคนอื่นๆได้คับ
ดูผลลัพธ์ของโปรแกรมได้จากที่นี่คับ (Username:ladygaga Pass:123456)

ระบบตะกร้าสินค้า(Shopping Cart) ตอนที่ 2 ยืนยันการสั่งซื้อ(ตอนจบ)

หลังจากที่เราได้สอนระบบตะกร้าสินค้า(Shopping cart) ว่าด้วยเรื่องของการ add to cart แก้ไข ลบ สินค้าค้าในตะกร้าแล้ว บทความสอนทำเว็บไซต์ร้านค้าออนไลน์ เว็บขายของ E-commerce ด้วย PHP + MySQL ในตอนนี้สุดท้ายนี้จะสอนท่านทำระบบยืนยันการสั่งซื้อ หลักการก็คือ 1.สมาชิกของเว็บไซต์เท่านั้นที่จะสามารถยืนยันสั่งซื้อได้ 2.ตัดStock สินค้าที่สั่งซื้อใน Table tb_product(เทเบิลใช้เก็บสินค้าทั้งหมดในร้าน) 3.ล้างรายการสินค้าในตะกร้าหลังจากได้กดยืนยันการสั่งซื้อแล้ว
เมื่อลูกค้าหยิบสินค้าลงในตะกร้าแล้ว และได้กดยืนยันการสั่งซื้อดังรูป

ไฟล์ showcart.php

หากลูกค้ายังไม่ได้เป็นสมาชิก เมื่อคลิกที่ ยืนยันการสั่งซื้อ จะปรากฎข้อความแจ้งเตือนดังรูป

 

 ลูกค้าจึงต้องสมัครสมาชิกก่อน จึงจะสามารถไปยังหน้ายืนยันการสั่งซื้อได้ ดังรูป