Lin Lin Dev

          เว็บไซต์ในปัจจุบันนี้ เราเรียกกันว่า เป็นยุค เทคโนโลยี 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 แบบเลื่อนซ้ายขวาเพื่อแสดงรายการสินค้า คุณสามารถนำเอาไปประยุกต์ใช้งานตามความต้องการของคุณได้ เช่น แสดงรายการสินค้ามาใหม่ล่าสุด,สินค้าแนะนำ,สินค้าขายดี ...

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

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

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

              ระบบ Add to Cart เป็นระบบจัดเก็บสินค้าจาก เว็บร้านค้าออนไลน์ ( เว็บขายของ ) ที่เราต้องการจะสั่งซื้อ โดยมันจะเก็บข้อมูลทีละรายการสินค้าที่สั่งซื้อในรูปแบบอาเรย์   เรคคอร์ดและคอลัมน์=แถวที่ 1(รหัส,ชื่อ,จำนวน,ราคา),แถวที่ 2(รหัส,ชื่อ,จำนวน,ราคา) … เรคคอร์ดที่ n(รหัส,ชื่อ,จำนวน,ราคา) สำหรับวิธีจัดเก็บข้อมูลที่นิยมกันก็คือ การใช้ ตัวแปรแบบSession และใช้ ตัวแปรแบบCookie จัดเก็บข้อมูล ซึ่งวิธีจัดเก็บทั้งสองวิธีนั้นสิ่งที่แตกต่างกันกันคือ      - ตัวแปรแบบSession จะทำงานตอนที่Browserเปิดใช้งานอยู่และข้อมูลจะสูญหายหรือถูกทำลายตอนปิดBrowser      - แต่สำหรับ ตัวแปรแบบCookie แล้ว ข้อมูลจะไม่สูญหายถึงแม้ว่าเราจะปิดBrowserไปแล้วก็ตาม แต่มันจะถูกทำลายตอนที่เราเคลียร์ค่าคุ๊กกี้ในBrowserของเรา หรือคุ๊กกี้หมดอายุเท่านั้น เช่น เรากำหนดอายุไว้ 1 เดือน ตัวแปรนี้จะทำงานได้ปกติจนถึง1เดือน และจะถูกทำลายโดยอัตโนมัติครับ ดังนั้น บทความนี้จะเป็นบทความเกี่ยวกับ การทำระบบ Add to Cart ด้วยตัวแปรแบบ Cookie ครับ สำหรับ การทำ ...