การพัฒนาเว็บไซต์เพื่อการตลาดผ่านอีคอมเมิร์ซ web site development and e-commerce marketing (PHP MySQL AJAX)

โมดูลที่ 2 ตระกร้าสินค้า (2)

ต่อจากตอนที่แล้ว ความจริงเราจะมาเขียนไฟล์ remove_from_cart.php ในการนำของออกจากตระกร้า
แต่ก่อนหน้านั้น ขอเพิ่มส่วนหนึ่งที่ตอนแรกไม่ได้คิดจะเขียนไว้กันครับ

จากความเดิมตอนที่แล้ว
---------------------- โมดูลที่ 2 ตระกร้าสินค้า (1)
ตอนนี้เราจะมาเริ่มเขียนโมดูลตระกร้าสินค้าครับ
ตระกร้าสินค้าที่เราจะทำมีขั้นตอน ดังนี้
1. แสดงรายการสินค้าในตระกร้าสินค้า
2. ฟังก์ชั่นหยิบของออกจากตระกร้า (ลบรายการนั้นๆออก)
3. แบบฟอร์มกรอกรายละเอียดลูกค้า เป็นใบสั่งซื้อสินค้า
*หมายเหตุ ในที่นี้ ตัวอย่างไม่ได้เพิ่มเรื่องของการใส่จำนวนสินค้าและการแก้ไขจำนวนสินค้า พอจะแนะเป็นแนวให้ได้โดยการ เพิ่ม textbox ที่ฟอร์มหน้าร้านค้าเพื่อเก็บจำนวนแล้วเพิ่มเข้ามาในตัวแปร session ของ cart ครับ
---------------------- โมดูลที่ 2 ตระกร้าสินค้า (1)

เพิ่มให้ในส่วนของหมายเหตุที่บทความก่อน ไม่มีการแก้ไขหรือเปลี่ยนจำนวนสินค้า จาก comment ที่คุณ anoza ขอมานะครับ

*เนื่องจากการการเขียนเพิ่มในส่วนของการแก้ไขสินค้าที่หยิบใส่ตระกร้าไปแล้ว จำเป็นต้องเปลี่ยนชื่อไฟล์ remove_from_cart.php เป็น cart_management.php ซึ่งเหมาะสมกว่าครับ เนื่องจากเราจะทำการแก้ไขสินค้าหรือนำสินค้าออกจากตระกร้าด้วยไฟล์นี้ไฟล์เดียว ดังนั้นจากบทความก่อนในโค้ดแก้จาก
remove_from_cart.php --> cart_management.php

*อีกข้อหนึ่ง คือ เนื่องจากไม่ได้วางแผนไว้ว่าจะเขียนตั้งแต่แรก จึงต้องทำเพิ่มดังนี้ ครับ
1. เพิ่มฟิลด์ quantity ในตารางฐานข้อมูล group_product_line เพื่อเก็บจำนวนที่สั่งซื้ออีก 1 ฟิลด์ครับ
2. แล้วก้เพิ่มเติมในส่วนของ array ที่เก็บ ให้เก็บเพิ่มอีก 1 อย่างคือ จำนวน quantity ที่ add2cart.php เป็น
   $product_qty        = 1; // ให้ default เป็น 1 ไปเลยตอน add2cart
และเก็บค่าในตัวแปร array เป็น
   $_SESSION[$cartItem][6] = $product_qty;
ใน 2 ข้อนี้คงต้องขอให้ลองทำเองเลยครับ ไม่ยาก

ดูที่ความเข้าใจก่อนเช่นเดิมครับ

- ตัวแปร $cartMain เป็นตัวแปร array session ที่เก็บชื่อ cart1,cart2,cart3, ... ชื่อ cart1 เป็นชื่อของตัวแปร session ที่เป็น array เช่นกัน ที่เก็บค่าของ id, path รูป, ชื่อ, ราคา, รายละเอียด ของสินค้าชิ้นหนึ่งที่เราเพิ่มลงไปในตระกร้าสินค้า

- สรุปว่าการเขียน cart array นี้เป็นการซ้อน ตัวแปร array session ตัวหนึ่งเข้าไปใน array session อีกตัวหนึ่งครับ

เริ่มเขียนโค้ดกันเลย
จากบทความที่แล้ว เพิ่มปุ่มแก้ไขสินค้าลงไปเหนือปุ่มหยิบสินค้าออกจากตระกร้า textbox ใส่จำนวนสินค้าและ hidden input จะได้ดังนี้

... หลุดอีกแล้วครับ แก้จากบทความที่แล้วเป็นดังด้านล่างนี้นะครับ แก้ตรงที่
name=\"remove$cartArray\" --> name=\"remove\" เอา $cartArray ออก
 
<input type=\"text\" name=\"qty\" id=\"qty\"> // ใส่จำนวนสินค้า ในที่นี้ไม่ได้เขียนโค้ดในส่วนของขณะหยิบของใส่ตระกร้าครั้งแรกว่าจะหยิบกี่ชิ้นนะครับ เนื่องจากไม่ได้วางแผนไว้ แต่หลักการคล้ายกันกับการแก้จำนวนของในตระกร้าที่กำลังทำอยู่นี้ ลองประยุกต์ทำดูครับ

<input type=\"hidden\" value=\"$_SESSION[$cartArray][1]\" name=\"cart_id\" id=\"cart_id\"> // $_SESSION[$cartArray][1] เก็บ id ของ item cart ซึ่งจะนำไปใช้ในไฟล์ cart_management.php

<input type=\"submit\" name=\"edit\" id=\"edit\" value=\"edit\"> // ปุ่ม submit ของ form product group"; // ปุ่มในการแก้ไขสินค้าที่หยิบใส่ตระกร้าไปแล้ว

<input type=\"submit\" name=\"remove\" id=\"remove\" value=\"remove\"> // ปุ่ม submit ของ form product group"; // ปุ่มในการเอาของออกจากตระกร้า จากบทความที่แล้ว

จากนั้นเราจะมาเขียนไฟล์ cart_management.php

cart_management.php
ให้ require ไฟล์ session เหมือนเดิมนะครับ จำไม่ได้เปิดกลับไปอ่านตอนก่อน

$submit_type_edit        = $_POST['edit']; // รับค่าหากมีการกด edit
$submit_type_remove  = $_POST['remove']; // รับค่าหากมีการกดนำสินค้าออก
$qty                              = $_POST['qty']; // รับค่าจำนวนสินค้าที่ผู้ใช้ใส่
$cart_id = $_POST['cart_id']; // รับค่า cart ID จาก ไฟล์ cart.php
$cart_session = "cart" . $cart_id // เก็บค่าของชื่อ ตัวแปร array session ของสินค้า (cart1, cart2, cart3...)

if ($submit_type_edit == "edit")
{
    // แก้ไขสินค้าในตระกร้า
    $_SESSION[$cart_session][6] = $qty;
}
else ($submit_type_remove == "remove")
{
    // นำสินค้าในตระกร้าออก
    unset($_SESSION[$cart_session]); // ยกเลิกตัวแปร session ของสินค้า 1 ชิ้น

      foreach($_SESSION['cartMain'] as $array)  // ลดจำนวนของ item ในตัวแปร array session $cartMain
      {
         if ($array == $cart_session) // ตรวจสอบชื่อ cart ใน cartMain ถ้าตรงกับ cart ที่ผู้ใช้กด ให้ unset
         {
            $cartNumber = findIntInStr($array); // หาจำนวนตัวเลขที่อยู่ในชื่อ cart *หมายเหตุ function findIntInStr เขียนเป็น function อยู่ภายนอกโค้ด ซึ่งคงไม่เขียนไว้ในที่นี้ สามารถค้นหาจาก google ได้ครับว่าจะหาตัวเลขใน string จะทำอย่างไร
            unset($_SESSION['cartMain'][$cartNumber]); // unset ตัวแปรที่อยู่ใน $cartMain ครับ
         }
      }
}

น่าจะเสร็จครับ สำหรับไฟล์ cart_management.php
เนื่องจากผมเขียนแบบค่อนข้างสดนะครับ ทดสอบแล้วบางส่วน
ซึ่งในเนื้อหาที่เขียนนี้ มีส่วนคล้ายกับที่ใช้อยู่ในเว็บไซต์ http://www.bjtower.com/ แต่ไม่ทั้งหมดเนื่องจากที่เขียนในเว็บไซต์ จะใช้ AJAX เข้าร่วมด้วย ซึ่งผมยังไม่ได้ขึ้นเรื่องส่วนนี้เลย จึงไม่ได้เขียนแบบ AJAX ครับ
ไว้หลังจากเขียนครบโมดูลที่วางแผนว่าจะเขียนไว้ แล้วจึงจะเริ่มขึ้นเรื่อง AJAX แล้วลองนำมาปรับให้เข้ากับสิ่งที่เขียนไว้นี้ดูว่าจะปรับได้อย่างไรนะครับ

อาจมีข้อผิดพลาดประการใด ก็... ถือว่าเป็นแบบฝึกหัดให้ลองแก้ดูละกันครับ แถม bug ให้ลองแก้ด้วย ฮ่าๆๆ
ต่อฉบับหน้าครับ

Chocolate,
Reference web site
BJ TOWER ร้านค้าออนไลน์และช้อปปิ้ง
 

edit @ 22 Aug 2009 23:17:41 by Chocolate

ต่อเนื่องจากบทความที่แล้ว

ดูที่ความเข้าใจก่อนครับ...
add2cart.php เราจะมีตัวแปร session ของ cart ซึ่งเก็บรายละเอียดของสินค้าที่ผู้ใช้เลือกหยิบใส่ตระกร้า
การกดหยิบของใส่ตระกร้า 1 ครั้ง เราจะมีตัวแปร session เพิ่มขึ้น 1 ตัว เรียงลำดับเป็น cart1, cart2, cart3,...
ตัวแปร cart1 เป็นตัวแปร array เก็บรายละเอียดของสินค้าชิ้นแรก ดังนี้

         1. product ID          
         2. ชื่อของไฟล์รูปภาพ  
         3. ชื่อของสินค้า
         4. ราคาของสินค้า     
         5. รายละเอียดของสินค้า

ถ้าเขียนในรูป array จะได้ค่าดังนี้

         $cart1[1] = product ID
         $cart1[2] = ชื่อของไฟล์รูปภาพ
         $cart1[3] = ชื่อของสินค้า
         $cart1[4] = ราคาของสินค้า
         $cart1[5] = รายละเอียดของสินค้า

ตอนนี้เราจะมาเริ่มเขียนโมดูลตระกร้าสินค้าครับ
ตระกร้าสินค้าที่เราจะทำมีขั้นตอน ดังนี้
1. แสดงรายการสินค้าในตระกร้าสินค้า
2. ฟังก์ชั่นหยิบของออกจากตระกร้า (ลบรายการนั้นๆออก)
3. แบบฟอร์มกรอกรายละเอียดลูกค้า เป็นใบสั่งซื้อสินค้า
*หมายเหตุ ในที่นี้ ตัวอย่างไม่ได้เพิ่มเรื่องของการใส่จำนวนสินค้าและการแก้ไขจำนวนสินค้า พอจะแนะเป็นแนวให้ได้โดยการ เพิ่ม textbox ที่ฟอร์มหน้าร้านค้าเพื่อเก็บจำนวนแล้วเพิ่มเข้ามาในตัวแปร session ของ cart ครับ

เริ่มที่ 1. แสดงรายการสินค้าในตระกร้าสินค้า
ทำการ copy template ไฟล์ index.php แล้วตั้งชื่อใหม่เป็น cart.php เราจะทำการแสดงสินค้าในตระกร้าที่ // คอลัมภ์กลาง ครับ ดังนั้นลบสิ่งที่มีอยู่เก่าในคอลัมภ์กลางออก แล้วเริ่มต้นกันเลย...

อ่า... สารภาพว่าหลุดไป 1 อย่าง ตอนนี้ให้กลับไปที่ add2cart.php ก่อนครับ แล้วเพิ่มบรรทัดนี้ลงไป ที่ท้ายสุด

         $_SESSION['cartMain'][$countNameCartItem] = $cartItem;

บรรทัดนี้ใส่เพื่อเก็บรายการสินค้าที่ผู้ใช้หยิบใส่ตระกร้า ดังนั้นในตัวแปร session cartMain จะเป็นตัวแปร array ที่เก็บชื่อ cart1, cart2, cart3,... ไปเรื่อยๆเท่ากับจำนวนสินค้าที่ถูกหยิบใส่ตระกร้า ตัวแปรนี้สำคัญในการแสดงรายการสินค้าครับ

ต่อกันเลย

cart.php // คอลัมภ์กลาง
<?php
         if ($cartMain) // ตรวจสอบว่ามีสินค้าในตระกร้าหรือไม่ ถ้ามีจะเข้าเงื่อนไข
         {
               echo "<table>"; // สร้างตาราง
                      echo "<tr>";
                           echo "<td>";
                                    // ปุ่มกดเพื่อไปยังหน้ากรอกรายละเอียดของผู้ซื้อ
                                 echo "<form method=\"post\" action=\"customer_order.php\" >"; // customer_order.php จะทำการเขียนในถัดไป
                                 echo "<input type=\"submit\" name=\"form_order\" id=\"form_order\" value=\"กรอกใบสั่งซื้อสินค้า\">";
                                 echo "</form>";
                           echo "</td>";
                      echo "</tr>";
               foreach($_SESSION['cartMain'] as $cartArray) // วน loop นำรายการสินค้าแต่ละรายการออกมา
               {
                      echo "<tr>";
                           echo "<td>";
                                 echo "<form method=\"post\" action=\"remove_from_cart.php\" name=\"$cartArray\">"; // สร้างฟอร์มเพื่อเพิ่ม ปุ่มลบสินค้าออกจากตระกร้า โดยเราจะสร้างไฟล์ remove_from_cart.php ทีหลัง
                                 echo "<img src=\"images/" . $_SESSION[$cartArray][2] . "\"> // $cartArray คือ cart1,cart2,cart3,.... ในแต่ละ loop โดย array ที่ 2 คือ ชื่อไฟล์รูปภาพ
                                           <br>
                                           " . $_SESSION[$cartArray][3] . " // ชื่อสินค้า
                                           <br>
                                           " . $_SESSION[$cartArray][5] . " // คำอธิบายสินค้า
                                           <br>
                                           " . $_SESSION[$cartArray][4] . "   // ราคาสินค้า
                                           <br>
                                           <input type=\"submit\" name=\"remove$cartArray\" id=\"remove$cartArray\" value=\"remove\"> // ปุ่ม submit ของ form product group"; // ปุ่มในการเอาของออกจากตระกร้า
                                 echo "</form>";
                           echo "</td>";
                       echo "</tr>";
               }
               echo "</table>";
         }
?>

เสร็จสิ้นการแสดงสินค้าในตระกร้า
ต่อฉบับหน้าครับ

Chocolate,
Reference web site
BJ TOWER ร้านค้าออนไลน์และช้อปปิ้ง
 

group_product_line.php

บทความที่แล้วเราแสดงกลุ่มของสินค้าออกมาที่หน้า index.php โดยการกด link ที่ groupname คือชื่อของกลุ่มสินค้ามาที่หน้า group_product_line.php ซึ่งทำหน้าที่แสดงสินค้าของกลุ่มสินค้านั้นๆนะครับ สิ่งที่เราจะทำต่อไป ดังนี้

1. copy ไฟล์ index.php เป็นอีก 1 ไฟล์แล้วเปลี่ยนชื่อเป็น group_product_line.php
    เนื่องจาก index.php เป็นเทมเพลทของเราตามที่กล่าวไว้ในบทความที่แล้วครับ แล้วลบสิ่งที่อยู่ที่ -คอลัมภ์กลาง- ที่เป็นส่วนที่จัดแสดงกลุ่มสินค้าออกเพื่อเปลี่ยนเป็นการแสดงสินค้าแทน โดยมีโค้ด ดังนี้

<td>
// คอลัมภ์กลาง
<?php
//เปิดการเชื่อมต่อกับฐานข้อมูล
   $connObj = new connection();
   $connObj->openConnection();
   $connObj->select_onlineshop_db();

   $groupid = $_GET['groupid']; // การกด click ที่ link จากหน้า index ที่เราสร้างจะส่งผ่านตัวแปร groupid มาที่หน้านี้ด้วย method GET, คำสั่งนี้เป็นคำสั่งรับค่าตัวแปรด้วย method GET ครับ

   $sql_groupline = "select PRODUCTID, GROUPID, PRODUCTIMG, PRODUCTNAME, PRODUCTPRICE, PRODUCTDESC from group_product_line where GROUPID = '" . mysql_real_escape_string($groupid) . "';";
// ก้อน query ของตารางของสินค้า, การใช้ . ในภาษา PHP เป็นการต่อ string, mysql_real_escape_string เป็น built-in function ใช้ในการเอาตัวอักษรที่ไม่ควรจะมีอยู่ออกไป เป็นการป้องกัน SQL injection, สรุป ก้อน query นี้เป็นรายการสินค้าทั้งหมดในกลุ่มสินค้าที่ ผู้ใช้คลิ๊กเลือกที่หน้า index.php

   $result_groupline = mysql_query($sql_groupline); // คำสั่ง mysql_query เป็นคำสั่งประมวลผลของ query แล้วเก็บข้อมูลที่ query ได้ เข้าไปไว้ในตัวแปรหนึ่ง ซึ่งลักษณะเป็น array 2 มิติของตาราง

   echo "<table>"; // ใช้คำสั่ง echo tag ต่างๆออกไปเนื่องจากตอนนี้เราอยู่ใน tag ของโค้ด php
   while ($grouplineRec = mysql_fetch_array($result_groupline)) // mysql_fetch_array ใช้ในการ fetch แต่ละรายการในก้อน query ออกมาเก็บไว้ในตัวแปร $grouptableRec โดยการรัน loop while แต่ละ loop คือ ข้อมูลจากตารางตั้งแต่รายการแรกไปถึงรายการสุดท้าย
   {
         $product_id        = $grouplineRec[0]; // เก็บ productid ของสินค้า
         $group_id           = $grouplineRec[1]; // เก็บ group_id ของกลุ่มสินค้าที่เราจะแสดงสินค้า
         $product_image  = $grouplineRec[2]; // เก็บชื่อของไฟล์รูปสินค้าที่เราทำการอัพโหลดไว้
         $product_name  = $grouplineRec[3]; // เก็บชื่อของสินค้า
         $product_price   = $grouplineRec[4]; // เก็บราคาของสินค้า
         $product_desc  = $grouplineRec[5]; // เก็บคำอธิบายของสินค้า

         // เราจะทำตารางคอลัมภ์เดี่ยวไล่แสดงผลกลุ่มสินค้าทั้งหมด
             echo "<tr>";
                echo "<td>";
                    echo "<img src=\"images/$product_image\"> // รูปสินค้า
                             <br>
                             $product_name // ชื่อสินค้า
                              <br>
                             $product_desc // คำอธิบายสินค้า
                               <br>
                             $product_price   // ราคาสินค้า
                               <br>";
?>
                // เริ่มต้นแบบฟอร์ม add2cart
                <form action="add2cart.php" method="post">
                    <input type="hidden" name="cart_product_id"        value="<?php echo $product_id; ?>">
                    <input type="hidden" name="cart_product_image" value="<?php echo $product_image; ?>">
                    <input type="hidden" name="cart_product_name" value="<?php echo $product_name;">
                    <input type="hidden" name="cart_product_price" value="<?php echo $product_desc;">
                    <input type="hidden" name="cart_product_desc" value="<?php echo $product_price;">
                    <input type="submit" name="form_<?php echo $product_id; ?>" value="add to cart">
                </form>
                // สิ้นสุดแบบฟอร์ม add2cart
               // เป็น form ที่เห็นเพียงปุ่ม add to cart ปุ่มเดียว นอกนั้นเราซ่อนค่าไว้หมดเพื่อส่งผ่านไปยัง add2cart.php
<?php
                echo "</td>";
             echo "</tr>";
   }
   echo "</table>";
//ปิดการเชื่อมต่อกับฐานข้อมูล
   $connObj->closeConnection();
?>
</td> // ปิด tag คอลัมภ์กลาง

เป็นอันเสร็จสิ้นการแสดงรายการสินค้าในกลุ่มสินค้าให้ผู้ใช้เลือกชม มาต่อกันในส่วนของระบบ add2cart ครับ

add2cart.php

<?php
// รับค่า post จาก form ของ add2cart
   $product_id             = $_POST['cart_product_id'];
   $product_image      = $_POST['cart_product_image'];
   $product_name       = $_POST['cart_product_name'];
   $product_price        = $_POST['cart_product_price'];
   $product_desc        = $_POST['cart_product_desc'];

// เก็บลงในตัวแปร array session
         $countNameCartItem++; // ตัวแปร integer เป็น counter
         session_register('countNameCartItem'); // register ตัวแปรเป็น session
         $cartItem = "cart$countNameCartItem"; // ตัวแปร cartItem เก็บชื่อของรายการของ cart แต่ละรายการ ในที่นี้ให้ชื่อเป็น cart ตามด้วย $countNameCartItem ซึ่งจะบวกเพิ่มเรื่อยๆเมื่อมีการ add to cart

         $_SESSION[$cartItem][1] = $product_id;          
         $_SESSION[$cartItem][2] = $product_image;   
         $_SESSION[$cartItem][3] = $product_name;    
         $_SESSION[$cartItem][4] = $product_price;      
         $_SESSION[$cartItem][5] = $product_desc;
         // ตอนนี้ ตัวแปร session เก็บรายการสินค้ารายการแรก ซึ่งชื่อว่า -cart1- เป็นที่เรียบร้อยครับ
?>

// เสร็จสิ้นระบบ add to cart

ส่วนของ โมดูลที่ 1 หน้าร้านค้า ผมจะจบไว้เพียงเท่านี้ ฉบับหน้าจะขึ้นโมดูลที่ 2 ตระกร้าสินค้าครับ

Chocolate,
Reference web site
BJ TOWER ร้านค้าออนไลน์และช้อปปิ้ง