CRUD Application : 3.การสร้างตลาดออนไลน์ (พื้นฐาน)

จากในเนื้อหาที่ 1 เป็นการสมัครสมาชิก เข้าสู่ระบบ ส่วนในเนื้อหาที่ 2 เป็นการเพิ่ม ลบ แก้ไข และแสดงผลข้อมูลจากฐานข้อมูล MySQL ซึ่งในเนื้อหาที่ 3 เป็นเนื้อหาสำหรับสร้างการตลาดออนไลน์พื้นฐานโดยมีขั้นตอนในการทำดังต่อไปนี้

ส่วนที่ 1 การสร้างสินค้า

  1. สร้างตารางข้อมูลสำหรับบันทึกข้อมูลสินค้า
  2. เพิ่มข้อมูลสินค้า
  3. แสดงข้อมูลสินค้า
  4. แก้ไขข้อมูลสินค้า
  5. ลบข้อมูลสินค้า

 

1.สร้างตารางข้อมูลสำหรับบันทึกสินค้า

CREATE TABLE `crud_example`.`products` ( `p_id` INT NOT NULL AUTO_INCREMENT , `p_name` VARCHAR(100) NOT NULL , `p_desc` VARCHAR(100) NOT NULL , `p_price` INT(100) NOT NULL , `p_img` VARCHAR(100) NOT NULL , `p_add_time` TIMESTAMP NOT NULL , PRIMARY KEY (`p_id`)) ENGINE = InnoDB;

ไฟล์ที่ 1 ตารางสินค้า

จากไฟล์ที่ 1 เป็นการสร้างตารางข้อมูลสำหรับเก็บสินค้าที่ชื่อว่า products โดยภายในตารางประกอบด้วยฟิลด์ 

  • p_id : รหัสสินค้า
  • p_name : ชื่อสินค้า
  • p_desc : คำอธิบายสินค้า
  • p_price : ราคาสินค้า
  • p_img : รูปภาพสินค้า
  • p_add_time :  เวลาที่เพิ่มสินค้า / อัพเดทสินค้า

2.เพิ่มข้อมูลสินค้า

สร้างหน้าฟอร์มไฟล์ add_product.php

<?php
require("db.php");
include("auth.php");
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>เพิ่มสินค้า</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="form">
<a href="index.php">Home</a>
    <form action="save_product.php" method="post" name="fAddProduct" enctype="multipart/form-data">
        ชื่อสินค้า : <input type="text" name="p_name" id="p_name" required><br>
        คำอธิบายสินค้า : <input type="text" name="p_desc" id="p_desc" required><br>
        ราคา : <input type="text" name="p_price" id="p_price" required><br>
        รูปภาพสินค้า : <input type="file" name="p_img" id="p_img" required><br>
        <button type="submit" >เพิ่มสินค้า</button>
    </form>
</div>
</body>
</html>

ไฟล์ที่ 2 add_product.php

อัพเดทโค้ดไฟล์ที่ 2 เพื่อให้สามารถเพิ่มข้อมูลเข้าสู่ฐานข้อมูล

<?php
require("db.php");
include("auth.php");

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>เพิ่มสินค้า</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="form">
<a href="index.php">Home</a>
    <form action="" method="post" name="fAddProduct" enctype="multipart/form-data">
        ชื่อสินค้า : <input type="text" name="p_name" id="p_name" required><br>
        คำอธิบายสินค้า : <input type="text" name="p_desc" id="p_desc" required><br>
        ราคา : <input type="text" name="p_price" id="p_price" required><br>
        รูปภาพสินค้า : <input type="file" name="p_img" id="p_img" required><br>
        <button type="submit" name="submit">เพิ่มสินค้า</button><br>

        <?php
            if(isset($_POST["submit"])) {
                $target_dir = "upload_img/";
                $target_file = $target_dir . basename($_FILES["p_img"]["name"]);
                $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
                if (move_uploaded_file($_FILES["p_img"]["tmp_name"], $target_file)) {
                    $data = "INSERT INTO products (p_name,p_desc,p_price,p_img) VALUES ('".$_POST['p_name']."', '".$_POST['p_desc']."', '".$_POST['p_price']."', '".$target_file."')";
                    if($query = mysqli_query($con,$data)){
                        echo "เพิ่มสินค้าเรียบร้อย<br>";
                        echo "<img src='".$target_file."' width='250px'>";
                    }        
                } else {
                    echo "Sorry, there was an error uploading your file.";
                }
            }
        ?>
        
    </form>
</div>
</body>
</html>

ไฟล์ที่ 2.2 add_product.php

จากไฟล์ที่ 2 มีการเพิ่มโค้ด PHP ในส่วนของคลาส form โดยสามารถอธิบายกระบวนการทำงานในภาพรวมได้ว่า เมื่อมีการส่งฟอร์มให้เริ่มทำการเก็บค่าของไฟล์ไว้ในตัวแปรที่สร้างขึ้น 

  • บรรทัดที่ 27 เก็บ path โฟลเดอร์ที่เก็บไฟล์
  • บรรทัดที่ 28 เก็บ path โฟลเดอร์เรียงกับชื่อไฟล์ (หากชื่อไฟล์เป็นภาษาไทย แนะนำว่าใหทำการเปลี่ยนก่อนอัพโหลด หรือไม่งั้นก็เปลี่ยนก่อน insert เข้าฐานข้อมูลให้เป็นภาษาอังกฤษ หรือตัวเลข)
  • บรรทัดที่ 29 เก็บนามสกุลไฟล์ เช่น .jpg , .png หรืออื่นๆ ที่ีมากับไฟล์อัพโหลด
  • บรรทัดที่ 30 ทำการเช็คพร้อมกับอัพโหลดไฟล์ ซึ่งมีความหมายว่า
    • ถ้าอัพโหลดไฟล์สำเร็จ ให้ทำการเพิ่มข้อมูลเข้าสู่ตารางข้อมูล และแสดงรูปภาพสินค้าหลังจากที่เพิ่มสินค้าเรียบร้อย 
    • ถ้าอัพโหลดไม่สำเร็จ ให้แจ้งเตือนว่า error เป็นต้น
  •  

3.แสดงข้อมูลสินค้า

โดยการสร้างไฟล์ชื่อว่า view_products.php จากนั้นวางโค้ดด้านล่างไปในไฟล์

<?php
require("db.php");
include("auth.php");
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>สินค้า</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="form">
        <p><a href="dashboard.php">Dashboard</a></p>
    </div>
</body>
</html>

<?php
$data = "SELECT * FROM products ORDER BY p_id DESC";
$query = mysqli_query($con,$data);
    
echo "<div class='row'>";
while($products = mysqli_fetch_array($query)){

    echo    "<div class='column'>";
    echo    "<div class='card'>";
    echo    "<img src='".$products['p_img']."'>";
    echo    "<h1>".$products['p_name']."</h1>";
    echo    "<p class='price'>".$products['p_price']."</p>";
    echo    "<p>".$products['p_desc']."</p>";
    echo    "<p><a href='edit_product.php?id=".$products['p_id']."'>edit</a></p>";
    echo    "</div>";
    echo    "</div>";
}
echo "</div>";
?>


ไฟล์ที่ 3 view_products.php

ผลลัพธ์ของไฟล์ที่ 3 

4.แก้ไขข้อมูลสินค้า

จากผลลัพธ์ไฟล์ที่ 3 คลิก edit ภายในด้านล่างของสินค้นที่ต้องการแก้ไข จากนั้นจะลิงค์ไปที่ไฟล์ edit_product.php

<?php 
require('db.php');
include('auth.php');

$id = $_GET['id'];

$data = "SELECT * FROM products WHERE p_id='$id'";
$query = mysqli_query($con,$data);
$result = mysqli_fetch_array($query);

?>

<link rel="stylesheet" href="style.css">

<div class="form">
<a href="dashboard.php">Dashboard</a>

    <form action="" method="post" name="fEditProduct" enctype="multipart/form-data">
        <img src="<?php echo $result['p_img']; ?>" width="25%"><br>
        ชื่อสินค้า : <input type="text" name="p_name" id="p_name" value="<?php echo $result['p_name']; ?>"><br>
        คำอธิบายสินค้า : <input type="text" name="p_desc" id="p_desc" value="<?php echo $result['p_desc']; ?>"><br>
        ราคา : <input type="text" name="p_price" id="p_price" value="<?php echo $result['p_price']; ?>"><br>
        รูปภาพสินค้า : <input type="file" name="p_img" id="p_img" value="<?php echo $result['p_img']; ?>"><br>
        <input type="hidden" name="p_id" value="<?php echo $result['p_id']; ?>">
        <button type="submit" name="submit">อัพเดท</button><br>

        <?php
            if(isset($_POST["submit"])) {
                if($_FILES['p_img']['name'] != ""){
                    $target_dir = "upload_img/";
                    $target_file = $target_dir . basename($_FILES["p_img"]["name"]);
                    $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
                    if (move_uploaded_file($_FILES["p_img"]["tmp_name"], $target_file)) {
                        $data = "UPDATE products SET p_name='".$_POST['p_name']."' ,p_desc='".$_POST['p_desc']."' ,p_price='".$_POST['p_price']."' ,p_img='".$target_file."' WHERE p_id='".$_POST['p_id']."'";
                        if($query = mysqli_query($con,$data)){
                            echo "<meta http-equiv='refresh' content='0.1'>";
                        }        
                    } else {
                        echo "Sorry, there was an error uploading your file.";
                    }
                }
                else{
                    $data = "UPDATE products SET p_name='".$_POST['p_name']."' ,p_desc='".$_POST['p_desc']."' ,p_price='".$_POST['p_price']."' WHERE p_id='".$_POST['p_id']."'";
                    if($query = mysqli_query($con,$data)){
                        echo "<meta http-equiv='refresh' content='0.1'>";
                    }    
                }
                
            }
        ?>
        
    </form>
</div>

ไฟล์ที่ 4 edit_product.php

ผลลัพธ์ของไฟล์ที่ 4 ผลลัพธ์ไฟล์ที่ 3 เลือกแก้ไขสินค้าที่มีชื่อว่า โทรศัพท์6 จึงมีการแสดงผลดังภาพด้านล่างนี้

5.ลบข้อมูลสินค้า

อัทเดทไฟล์ view_products.php ดังโค้ดด้านล่าง

<?php
require("db.php");
include("auth.php");
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>สินค้า</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="form">
        <p><a href="dashboard.php">Dashboard</a></p>
    </div>
</body>
</html>

<?php
$data = "SELECT * FROM products ORDER BY p_id DESC";
$query = mysqli_query($con,$data);

if(@addslashes($_GET['delete'])){
    $delete = "DELETE FROM products WHERE p_id='".$_GET['delete']."'";
    if(mysqli_query($con,$delete)){
    echo "<meta http-equiv='refresh' content='0.1;view_products.php'>";
    }
}

echo "<div class='row'>";
while($products = mysqli_fetch_array($query)){

    echo    "<div class='column'>";
    echo    "<div class='card'>";
    echo    "<img src='".$products['p_img']."'>";
    echo    "<h1>".$products['p_name']."</h1>";
    echo    "<p class='price'>".$products['p_price']."</p>";
    echo    "<p>".$products['p_desc']."</p>";
    echo    "<p><a href='edit_product.php?id=".$products['p_id']."'>edit</a></p>";
    echo    "<a href='view_products.php?delete=".$products['p_id']."'>ลบ</a>";
    echo    "</div>";
    echo    "</div>";
}
echo "</div>";
?>


ไฟล์ที่ 3.2 view_products.php

ส่วนที่ 2 การซื้อสินค้า

1.สร้างตารางสำหรับเก็บข้อมูลการสั่งซื้อสินค้า

CREATE TABLE `purchasing` (
  `pc_id` int(11) NOT NULL,
  `p_id` int(100) NOT NULL,
  `status` int(100) NOT NULL DEFAULT '1' COMMENT '1 allow, 0 cancel',
  `address` text NOT NULL,
  `purchase_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

ALTER TABLE `purchasing`
  ADD PRIMARY KEY (`pc_id`);

ALTER TABLE `purchasing`
  MODIFY `pc_id` int(11) NOT NULL AUTO_INCREMENT;

2.ซื้อสินค้า

สร้างไฟล์ชื่อ purchase.php

<?php
require('db.php');
include('auth.php');


$data = "SELECT * FROM products WHERE p_id='".$_GET['id']."'";
$query = mysqli_query($con,$data);
$products = mysqli_fetch_array($query);


?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>สั่งซื้อสินค้า</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
<div class="form">
    <?php
        if(isset($_POST['submit'])){
            $purchase = "INSERT INTO purchasing (p_id,address) VALUES ('".$_POST['p_id']."','".$_POST['address']."')";
            if(mysqli_query($con,$purchase)){
                echo "ทำการสั่งซื้อสินค้าเรียบร้อย";
            }

        }
    ?>
<a href="dashboard.php">Dashboard</a>
    <form action="" method="post" name="fpurchase">
        <table>
            <tr>
                <td colspan="2"><img src="<?php echo $products['p_img']; ?>"></td>
            </tr>
            <tr>
                <th>ชื่อสินค้า</th>
                <td><?php echo $products['p_name']; ?></td>
            </tr>
            <tr>
                <th>คำอธิบายสินค้า</th>
                <td><?php echo $products['p_desc']; ?></td>
            </tr>
            <tr>
                <th>ราคา</th>
                <td><?php echo $products['p_price']; ?></td>
            </tr>
            <tr>
                <th colspan="2">ที่อยู่ในการจัดส่ง</th>
            </tr>
            <tr>
                <td colspan="2"><textarea name="address" rows="6" cols="50%"></textarea> <input type="hidden" name="p_id" value="<?php echo $products['p_id']; ?>"></td>
            </tr>
            <tr>
                <td colspan="2"><button type="submit" name="submit">ยืนยันการสั่งซื้อ</button></td>
            </tr>
        </table>
    </form>
</div>


</body>
</html>

ไฟล์ที่ 5 purchase.php

จากไฟล์ที่ 5 สามารถอธิบายกระบวนการทำงานได้ดังนี้

สืบเนื่องจากการสั่งซื้อสินค้า ของไฟล์ที่ 4 ทุกครั้งที่มีการสั่งซื้อจะต้องใส่รายละเอียดที่อยู่สำหรับการจัดส่งสินค้าเข้าไปด้วย

 

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

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

<?php
require('db.php');
include('auth.php');

$data = "SELECT products.p_name, products.p_price, products.p_img , purchasing.pc_id, purchasing.status FROM purchasing INNER JOIN products ON purchasing.p_id=products.p_id";
$query = mysqli_query($con,$data);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>รายการสั่งซื้อสินค้า</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="form">
    <p><a href="dashboard.php">Dashboard</a></p>
<table>
        <tr>
            <th>ลำดับ</th>
            <th>ภาพสินค้า</th>
            <th>ชื่อสินค้า</th>
            <th>ราคา</th>
            <th>สถานะ</th>
        </tr>
<?php
    $x = 0;
    while($result = mysqli_fetch_array($query)){
    $x++;
?>
        <tr>
            <td><?php echo $x; ?></td>
            <td><img src="<?php echo $result['p_img']; ?>" width="150px"></td>
            <td><?php echo $result['p_name']; ?></td>
            <td><?php echo $result['p_price']; ?></td>
            <td><?php if($result['status']==1){echo "รอรับสินค้า";}else{echo "ยกเลิก";} ?></td>
        </tr>
<?php
    }
?>
    </table>
    </div>


    
</body>
</html>

ไฟล์ที่ 6 view_purchase.php

ผลลัพธ์ของไฟล์ที่ 6 

4.แก้ไขข้อมูลการสั่งซื้อสินค้า

อัพเดทไฟล์ที่ 6 ดังโค้ดด้านล่าง

<?php
require('db.php');
include('auth.php');

$data = "SELECT products.p_name, products.p_price, products.p_img , purchasing.pc_id, purchasing.status FROM purchasing INNER JOIN products ON purchasing.p_id=products.p_id";
$query = mysqli_query($con,$data);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>รายการสั่งซื้อสินค้า</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="form">
    <p><a href="dashboard.php">Dashboard</a></p>
<table>
        <tr>
            <th>ลำดับ</th>
            <th>ภาพสินค้า</th>
            <th>ชื่อสินค้า</th>
            <th>ราคา</th>
            <th>สถานะ</th>
            <th>แก้ไข</th>
        </tr>
<?php
    $x = 0;
    while($result = mysqli_fetch_array($query)){
    $x++;
?>
        <tr>
            <td><?php echo $x; ?></td>
            <td><img src="<?php echo $result['p_img']; ?>" width="150px"></td>
            <td><?php echo $result['p_name']; ?></td>
            <td><?php echo $result['p_price']; ?></td>
            <td><?php if($result['status']==1){echo "รอรับสินค้า";}else{echo "ยกเลิก";} ?></td>
    <td><?php if($result['status']==1){ ?><a href="cancel_purchase.php?pc_id=<?php echo $result['pc_id']; ?>&stt=0">ยกเลิก</a><?php }else{ ?><a href="cancel_purchase.php?pc_id=<?php echo $result['pc_id']; ?>&stt=1">สั่งซื้อ</a><?php } ?></td>
        </tr>
<?php
    }
?>
    </table>
    </div>


    
</body>
</html>

ไฟล์ที่ 6.2 view_purchase.php

ผลลัพธ์ไฟล์ที่ 6.2 

การแก้ไขข้อมูลสินค้า ในที่นี้ขอยกตัวอย่างการยกเลิกสั่งซ์้อสินค้า โดยสร้างไฟล์ cancel_purchase.php

<?php
require('db.php');
include('auth.php');

$data = "UPDATE purchasing SET status='".$_GET['stt']."' WHERE pc_id='".$_GET['pc_id']."'";
if(mysqli_query($con,$data)){
    echo "<meta http-equiv='refresh' content='0.1;view_purchase.php'>";
}
else{
    echo "<div class='form'><p><a href='dashboard.php'>Dashboard.php</a></p></div>";
}

?>

ไฟล์ที่ 7 cancel_purchase.php

ไฟล์ที่ 7 เป็นไฟล์ที่ใช้ในการดำเนินการแก้ไขสถานะการสั่งซื้อ สามารถเปลี่ยนเป็น สถานะยกเลิกหรือสถานสั่งซื้อก็ได้ ขึ้นอยู่กับการใช้งาน

 

อัพเดทไฟล์

1.อัเดทไฟล์ dashboard.php

<?php
require('db.php');
include("auth.php");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dashboard - Secured Page</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="form">
<p>Welcome to Dashboard.</p>
<p><a href="index.php">Home</a><p>
<p><a href="insert.php">Insert New Record</a></p>
<p><a href="view.php">View Records</a><p>
<p><a href="add_product.php">เพิ่มสินค้า</a></p>
<p><a href="view_products.php">สินค้า</a></p>
<p><a href="view_purchase.php">รายการสั่งซื้อ</a></p>
<p><a href="logout.php">Logout</a></p>
</div>
</body>
</html>

2.style.css

* {
     box-sizing: border-box;
   }
body {
     font-family:Arial, Sans-Serif;
}
.clearfix:before, .clearfix:after{
     content: "";
     display: table;
}
.clearfix:after{
     clear: both;
}
a{
     color:#e71744;
     text-decoration:none;
}
a:hover{
     color: white;
}
.aclass{
     color:white;
}
.form{
     width: 500px;
     margin: 0 auto;
}
input[type='text'], input[type='email'],
input[type='password'],input[type='file'] {
     width: 200px;
     border-radius: 2px;
     border: 1px solid #CCC;
     padding: 10px;
     color: #333;
     font-size: 14px;
     margin-top: 10px;
}
input[type='submit'], button{
     padding: 10px 25px 8px;
     color: #fff;
     background-color: #e71744;
     text-shadow: rgba(0,0,0,0.24) 0 1px 0;
     font-size: 16px;
     box-shadow: rgba(255,255,255,0.24) 0 2px 0 0 inset,#fff 0 1px 0 0;
     border: 1px solid #e71744;
     border-radius: 2px;
     margin-top: 10px;
     cursor:pointer;
}
input[type='submit']:hover, button{
     background-color: #e71744;
}
table {
     border:1px solid #000;
}
th{
     padding:8px;
     text-align:center;
     background-color: darkorange;
}
td{
     padding:8px;
     text-align:center;
     background-color: rgb(241, 241, 241);
}
.column {
     float: left;
     width: 25%;
     padding: 10px;
     height: 300px; 
   }
   
   .row:after {
     content: "";
     display: table;
     clear: both;
   }
   
   @media screen and (max-width: 600px) {
     .column {
       width: 100%;
     }
   }
.card {
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     max-width: 300px;
     margin: auto;
     text-align: center;
     font-family: arial;
}
   
.price {
     color: grey;
     font-size: 22px;
}

.card button {
     border: none;
     outline: 0;
     padding: 12px;
     color: white;
     background-color: rgb(255, 28, 66);
     text-align: center;
     cursor: pointer;
     width: 100%;
     font-size: 18px;
}

.card button:hover {
     opacity: 0.7;
}
.card img{
     width : 100px;
     height: 100px;
}