หลังจากที่เคยสอนทำระบบ Add to Cart ซึ่งเป็นระบบในร้านค้าออนไลน์หรือเว็บขายของ(E-Commerce Website)ด้วยตัวแปรแบบ Cookie และ Session มาแล้ว ต่อไปผมจะสอนการทำ Add to Cart อีกแบบนึง คือการใช้เทคนิค AJAX เข้ามาช่วย ทำให้หน้าเว็บเพจมีการโต้ตอบกับผู้ใช้ได้สะดวกและรวดเร็วยิ่งขึ้น และปัจจุบันเทคนิคได้รับความนิยมเป็นอย่างมาก โดยจะเห็นได้จากหลายๆเว็บไซต์ ที่ได้นำเทคนิคนี้มาใช้
มาเริ่มทำกันเลยดีกว่าครับ
อันดับแรกต้องดาวน์โหลด jQuery มาติดตั้งที่เครื่องก่อน
จากนั้น ให้สร้างไฟล์ .php ขึ้นมา 3 ไฟล์ คือ showproduct.php ,chkcart.php,mycart.php
ไฟล์ showproduct.php ->สำหรับแสดงรายการสินค้า และจำนวนรายการตะกร้าสินค้า ให้พิมพ์ code ดังนี้
จาก Code ข้างบนจะได้ผลลัพธ์ดังนี้
ไฟล์ showproduct.php ->แสดงรายการสินค้าและตะกร้าสินค้า |
ไฟล์ chkcart.php ->ไฟล์ประมวลผลข้อมูลการสั่งซื้อ คือ เพิ่มสินค้าลงตะกร้า,แก้ไขจำนวนสินค้าที่สั่งซื้อ , ลบรายการสินค้าที่สั่งซื้อ ให้พิมพ์โค๊ดดังนี้
ไฟล์ mycart.php ->สำหรับแสดงรายการสินค้าในตะกร้าสินค้า มีช่องจำนวนให้เพิ่ม แก้ไข และลบ รายการสั่งซื้อได้ ให้พิมพ์โค๊ดดังนี้
เมื่อพิมพ์โค๊ดถูกต้องได้ได้ผลลัพธ์ ดังนี้
ไฟล์ mycart.php->แสดงรายการสินค้าในตะกร้สินค้า |
ความสามารถของโปรแกรม
1.สามารถ Add to cart สินค้าลงตะกร้า โดยแสดงผลแบบ animate รูปภาพของสินค้าจะลอยไปที่ตะกร้าสินค้าแล้วค่อยๆเลือนหาย พร้อมกับแสดงจำนวนรายการสั่งซื้อและจำนวนสินค้าที่สั่งซื้อในตะกร้า
2.สามารถแก้ไขจำนวนสินค้าและลบรายการสินค้าที่สั่งซื้อได้ โดยคลิกที่ตะกร้าสินค้า จะปรากฎDialogรายการสั่งซื้อขึ้นมา เราสามารถเข้าไปแก้ไขข้อมูลตรงนี้ได้ การทำงานจะเป็นแบบ Real time อัพเดทและแสดงผลทันที ไม่มีการRefreshหน้าWeb page แต่อย่างใด
นี่เป็นแค่กรณีศึกษาสำหรับคนที่ต้องการConceptในการทำระบบตะกร้าสินค้าด้วยเทคนิคAJAX ครับCodeจึงยังไม่สมบูรณ์มากนัก คุณสามารถนำCodeเหล่านี้ไปต่อยอดได้ เนื่องจากผมไม่ได้เขียนCodeยืนยันการสั่งซื้อสินค้า คุณสามารถศึกษาได้จากบทความนี้ครับ -> http://php-for-ecommerce.blogspot.com/2011/01/shopping-cart-2.html
ดูตัวอย่างของโปรแกรมได้จากที่นี่ http://pluto.host22.com/a2c/showproduct.php ->Host Free อาจมีปัญหาตอนโชว์Dialogของตะกร้าสินค้าครับ แต่ทดสอบที่เครื่อง (localhost) ไม่มีปัญหาครับ
หรือ สามารถดูตัวอย่างเต็มๆ ได้จากเว็บไซต์นี้เลยครับ http://beautydelicious.lnwshop.com/
คลิ๊กเข้าไปที่ลิงค์ jquery แล้ว ค่ะ เลือก
ตอบลบ1.7.2 (Release Notes)
Minified, Uncompressed
แล้ว คลิกที่ uncom แล้ว ก๊อปโค้ด ไปเก็บที่ โฟลเดอร์ ของเราใช่มั้ยค่ะ
ใช้ครับ ให้เลือก Minifield หรือ Uncompresed เลือกอันใดอันนึงครับ
ลบสร้างไฟล์ชื่อ jquery.js ขึ้นมา แล้วก๊อปปี้โค๊ดไปวางได้เลยครับ
สามารถสอบถามปัญหากับผมได้อีกช่องทางนึงครับ คือที่นี่ ->http://pluto.host22.com/wb/
ลบข้อดี คือ สามารถติดโค๊ด html,PHP,อื่นๆได้ (Blog spot ติดโค๊ดได้เช่นกัน แต่ต้องแปลงให้เป็น Spacial Charecter ก่อน)
ข้อเสีย คือ ป๊อปอัพโฆษณาเด้งขึ้นมากวนใจทุกครั้ง เมื่อมีการโหลดหน้าเว็บเพจใดๆ (ต้องทำใจครับเพราะใช้ของฟรี T T)
หน้า ไดอะล๊อกตะกร้าสินค้า mycart.php เปิดได้แต่ IE เท่านั้นอ่ะค่ะ เปิดใน chrome firefox ไม่ได้อ่ะค่ะ
ตอบลบโทษทีค่ะ ตอนนี้มันโชว์ ใน chrome ได้แล้วอ่ะค่ะ เมื่อคืน ยังไม่ได้อยู่เลย เดียวมีปัญหาอะไรจะถามใหม่นะค่ะ
ตอบลบถ้าเราไม่มี สต๊อกสินค้า pd_amount คือหมายถึงให้ บวกสินค้าเพิ่มไปเลย ต้องแก้ไขโค้ด ตรงไหนบ้าง แล้วเปลี่ยนเป็นตัวแปรอะไร
ตอบลบหมายถึง ถ้าจำนวนสินค้าเป็น0(หมด) ตอนสั่งซื้อก็สามารถบวกจำนวนเพิ่มได้ใช่ไหมครับ
ลบ--------------------------------------------
ไฟล์ chkcart.php สังเกตุคำสั่ง
if($pamount>0){#เอาเฉพาะจำนวนสินค้าที่มากกว่า0
$rs_record=mysql_fetch_array(mysql_query("SELECT pd_amount,pd_amount FROM tb_product WHERE pd_id=".$pdid.""));
if($pamount>$rs_record[1]){#หากจำนวนที่ลูกค้าระบุมากกว่าจำนวนที่มีอยู่ในร้าน
$_SESSION[$cartRows][1] = $rs_record[1];#เซตจำนวนสินค้าใหม่ให้มีค่าเืท่ากับจำนวนสินค้าในร้าน
}else{#หากจำนวนสินค้าที่ลูกค้าระบุน้อยกว่าหรือเืท่ากับจำนวนสินค้าที่มีอยู่ในร้าน
$_SESSION[$cartRows][1] = $pamount ; #เซตจำนวนสินค้าใหม่ให้มีค่าเท่ากับจำนวนที่ลูกค้าระบุ
}
}
เปลี่ยนเป็น
if($pamount>0){#เอาเฉพาะจำนวนสินค้าที่มากกว่า0
$_SESSION[$cartRows][1] = $pamount ; #เซตจำนวนสินค้าใหม่ให้มีค่าเท่ากับจำนวนที่ลูกค้าระบุ
}
###################################################
ไฟล์ mycart.php เอาคำสั่งบรรทัดนี้ออก
if($rs_showpd["pd_amount"]<1){#ตรวจสอบจำนวนสินค้า หากจำนวนสินค้าเท่ากับ0
echo "<script>";
echo "alert('ขออภัยสินค้า \"".$rs_showpd["name_pd"]."\" หมดแล้ว');window.location='chkcart.php?del=".$RowCount."';";
echo "</script>";
exit();
}else if($_SESSION[$RowCount][1]>$rs_showpd["pd_amount"]){#จำนวนสินค้ามากกว่าจำนวนสินค้าในร้าน
echo "<script>";
echo "alert('จำนวนสินค้าของ \"".$rs_showpd["pd_name"]."\" มีมากกว่าจำนวนสินค้าในร้าน');";
echo "</script>";
$_SESSION[$RowCount][1]=$rs_showpd["pd_amount"];#เซตจำนวนสินค้าใหม่ให้มีค่่าเท่ากับจำนวนสินค้าในร้าน
}
คลิกแล้วไปแสดงภาพเลื่อนครับ
ตอบลบในไฟล์ showproduct.php ตอนเรียกใช้ไฟล์ jquery คุณได้ระบุที่อยู่ของไฟล์ ถูกหรือป่าวครับ และในเครื่องของคุณมีไฟล์ jquery หรือยังครับ
ลบสังเกตุคำสั่งนี้นะครับ <script type="text/javascript" src="../../js/jquery.js"></script>
คุณต้องระบุที่อยู่ดังนี้นะครับ <script type="text/javascript" src="ที่อยู่ไฟล์ jquery ของคุณ"></script>
มีแล้วครับ src="jquery.js"
ลบไฟล์ jquery.js อยู่ใน parth เดียวกันกับ showproduct.php
ผมได้ก๊อปปี้โค๊ดมาทดลองที่เครื่อง ก็ไม่มีปัญหาอะไรเลยนะครับ ภาพก็เลื่อนปกติ และคอมเม้นท์ข้างบนก็ทำได้กันนะครับ
ลบลองก๊อปโค๊ดไปวางใหม่นะครับ หรือลองอัปเกรด jquery ให้เป็นเวอร์ชั่นใหม่ล่าสุดดูนะครับ
เรื่องฐานข้อมูลละครับ ต้องตามนี้หรือป่าวครับ หรือว่าชื่อยังไงก็ได้
ลบชื่อฐานข้อมูล,ชื่อเทเบิล,ชื่อฟิลด์ จะใช้ชื่ออะไรก็ได้ครับ แต่ต้องแก้ไขคำสั้งsqlให้ตรงกับชื่อของคุณนะครับ
ลบสำหรับโครงสร้างฐานข้อมูลที่ผมใช้ในบทความนี้ ดูได้จากลิงค์นี้นะครับ ->http://php-for-ecommerce.blogspot.com/2010/10/1_19.html
ลบไม่ทราบว่าจะแก้ปัญหาเรื่อง การแสดงผลของ สินค้าในตะกร้าได้อย่างไรครับ
ตอบลบเช่น ในกรณีที่สั่งซื้อสินค้าเกินกว่า stock จะ alert เตือนก็จริง แต่ในส่วนของ popup สินค้าในตะกร้า แสดงตัวเลขไม่ตรงกันครับ
@iaunz
ตอบลบนี่เป็นแค่กรณีศึกษาน่ะครับ ต้องขออภัย วิธีแก้คือ ไม่ต้องทำ popup ให้ลิงค์ไปหน้าตะกร้าสินค้าแทนดีกว่า
พี่ครับ ผมเอาโค้ดของพี่ไปประยุกใช้ ใช้ได้ดีเลยครับ แต่มันติดจุดเดียวนะครับตรง ราคารวม ของสินค้าแต่ละชนิด พอแก้จำนวนใน popup เลขของราคา มันไม่อัพเดททันทีน่ะครับ ต้องปิดก่อนแล้วก็เปิดใหม่เลขราคามันถึงจะเปลี่ยนน่ะครับ พี่ช่วยดูโค้ดให้หน่อยได้ป่าวครับ ผมลองแก้เองแล้ว มันไม่ได้ ไมมีความรู้ Ajax เลย T_T ลองดูรูปที่ผมแนบมาดูครับพี่ ตรงที่ผมวงไว้น่ะครับ
ตอบลบhttp://www.uppic.org/share-8ABD_52F5BADA.html
ขอบคุณมากครับ
ตอบลบขอบคุณที่เป็นแสงเทียนส่องสว่างให้ ในยามที่ผมกำลังมืดมิดครับ
ตอบลบWarning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\webfoodonline\show_productnew.php on line 245
มันขึ้นเเบบนี้เเก้ไงครับ