สอนทำ 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 แทนครับ