จำนวนคนเข้าดู: 48

Workshop ShoppingCart Uploading Multiple Images with Filepond

Workshop อัพโหลดภาพทีละหลายๆ ไฟล์ ด้วย Filepond โดยใช้ PHP8 + MySQL พร้อมตัวอย่างโค้ด

ตัวอย่างการสร้างตาราง SQL สามารถ import ผ่าน SQL ได้เลยครับ

CREATE TABLE `tbl_img_detail` (
  `id` int NOT NULL,
  `p_id` int NOT NULL,
  `img` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb3;

CREATE TABLE `tbl_product` (
  `p_id` int NOT NULL,
  `p_name` varchar(200) NOT NULL,
  `type_id` int NOT NULL,
  `p_detail` text NOT NULL,
  `p_price` int NOT NULL,
  `p_qty` varchar(11) NOT NULL,
  `p_unit` varchar(20) NOT NULL,
  `p_view` int NOT NULL DEFAULT '0',
  `p_status` int NOT NULL DEFAULT '1',
  `datesave` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb3;

ALTER TABLE `tbl_img_detail`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `tbl_product`
  ADD PRIMARY KEY (`p_id`);

CREATE TABLE `tbl_img_detail` (

`id` int NOT NULL,

`p_id` int NOT NULL,

`img` text NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb3;

CREATE TABLE `tbl_product` (

`p_id` int NOT NULL,

`p_name` varchar(200) NOT NULL,

`type_id` int NOT NULL,

`p_detail` text NOT NULL,

`p_price` int NOT NULL,

`p_qty` varchar(11) NOT NULL,

`p_unit` varchar(20) NOT NULL,

`p_view` int NOT NULL DEFAULT '0',

`p_status` int NOT NULL DEFAULT '1',

`datesave` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb3;

ALTER TABLE `tbl_img_detail`

ADD PRIMARY KEY (`id`);

ALTER TABLE `tbl_product`

ADD PRIMARY KEY (`p_id`);

ไฟลตั้งต้นสำหรับจัดการสินค้า product.php

<!DOCTYPE html>
<html lang="en">
<?php $menu = "product";?>
<!-- เรียกใช้ไฟล์ haed --> 
<?php include'head.php'; ?>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">

  <!-- Navbar -->
  <?php include'nav.php'; ?>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
 <?php include'menu.php'; ?>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <a href="product.php?act=add" type="button" class="btn btn-info btn-rounded btn-sm"><i class="fas fa-plus-circle"></i> สินค้า</a><p>
         <?php 
            $act = (isset($_GET['act']) ? $_GET['act'] : '');
            if ($act == 'add') {
            include('product_add.php');
            }elseif ($act == 'edit') {
            include('product_edit.php');
            }elseif ($act == 'img') {
            include('product_img.php');
            }else{
            include('product_list.php'); 
            }
          ?>
      </div><!-- /.container-fluid -->
    </div>
  </div>
  <!-- /.content-wrapper -->
  <?php include'footer.php'; ?>
  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
<?php include'script.php'; ?>
</body>
</html>

<!DOCTYPE html>

<?php $menu = "product";?>

<?php include'head.php'; ?>

<?php include'nav.php'; ?>

<?php include'menu.php'; ?>

<?php

$act = (isset($_GET['act']) ? $_GET['act'] : '');

if ($act == 'add') {

include('product_add.php');

}elseif ($act == 'edit') {

include('product_edit.php');

}elseif ($act == 'img') {

include('product_img.php');

}else{

include('product_list.php');

}

</div>

</div>

<?php include'footer.php'; ?>

</aside>

</div>

<?php include'script.php'; ?>

</body>

</html>

ตัวอย่างการเรียก CDN script ของ Filepond

<!-- Filepond css -->
    <link href="https://unpkg.com/filepond@^4/dist/filepond.css" rel="stylesheet" />
    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css" rel="stylesheet" />

<!-- filepond js -->
<script src="https://unpkg.com/filepond@^4/dist/filepond.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>

<script>
    FilePond.registerPlugin(FilePondPluginImagePreview);
</script>

FilePond.registerPlugin(FilePondPluginImagePreview);

</script>

ไฟล์เพิ่มข้อมูล product_add.php

    <?php 
  //คิวรี่ข้อมูลมาแสดงในตาราง
      include '../condb.php';
      $stmtType = $conn->prepare("
      SELECT * FROM tbl_type 
      ORDER BY type_id  ASC #เรียงลำดับข้อมูลจากน้อยไปมาก
      ");
        $stmtType->execute();
        $resultType = $stmtType->fetchAll();                                         
  ?>
   
    <form id="filepond-form" action="product_add_db.php" method="post" enctype="multipart/form-data">
        <div class="card-body">
            <!-- First row: Username and Password -->
            <div class="row">
                <div class="form-group col-4">
                    <label for="exampleInputEmail1">สินค้า</label>
                    <input type="text" name="p_name" class="form-control" id="exampleInputEmail1" placeholder="ชื่อสินค้า" required>
                </div>
          <div class="form-group col-4">
              <label for="exampleInputPassword1">ประเภทสินค้า</label>
              <select id="productType" name="type_id" class="form-control" required>
                  <option disabled selected>เลือกประเภทสินค้า</option>
                  <?php foreach ($resultType as $row_type) { ?>  
                      <option value="<?php echo $row_type['type_id']; ?>"><?php echo $row_type['type_name']; ?></option>
                  <?php } ?>
              </select>
          </div>
            </div>

            <!-- Second row: Name, Email -->
            <div class="row">
                <div class="form-group col-8">
                      <label for="exampleInputEmail1">รายละเอียดสินค้า</label>
                    <textarea name="p_detail" id="p_detail" class="form-control" placeholder="รายละเอียดสินค้า" required></textarea>
                </div>
            </div>

            <!-- Third row: Phone number -->
            <div class="row">
               <div class="form-group col-3">
                    <label for="exampleInputPassword1">ราคา</label>
                    <input type="number" name="p_price" class="form-control" id="exampleInputPassword1" placeholder="ราคาสินค้า" required>
                </div>
                <div class="form-group col-2">
                    <label for="exampleInputEmail1">จำนวน</label>
                    <input type="text" name="p_qty" class="form-control" id="exampleInputEmail1" placeholder="จำนวน" required>
                </div>
                  <div class="form-group col-3">
                    <label for="exampleInputEmail1">หน่วย</label>
                    <select name="p_unit" class="form-control" required>
                  <option disabled selected>เลือกหน่วยสินค้า</option>
                      <option value="กล่อง">กล่อง</option>
                      <option value="ชิ้น">ชิ้น</option>
                      <option value="อัน">อัน</option>
                      <option value="ชุด">ชุด</option>
                      <option value="เล่ม">เล่ม</option>
              </select>
                </div>
                
            </div> 
            <!-- File input -->
   
        <div class="row">
            <div class="form-group col-8">
                <label for="exampleInputFile">File รูปภาพ สินค้า *jpg, png</label>
                <input type="file" class="filepond"  multiple>
            </div>
          </div>
        <!-- Submit button -->
            <div class="form-group col-4">
            <button type="submit" id="btnSubmit" class="btn btn-success">บันทึกข้อมูล</button>
            <a href="product.php" type="button" class="btn btn-dark">กลับ</a>
        </div>
    </form>
</div>
<script>
    $(document).ready(function() {
       const pond = FilePond.create(document.querySelector('.filepond'), {
            instantUpload: false,
            imagePreviewHeight: 150,
            imagePreviewWidth: 150,
            imagePreviewMaxHeight: 300,
            imagePreviewMaxFileSize: '5MB',
            imagePreviewTransparencyIndicator: 'background',
            imagePreviewUpscale: true,
            imagePreviewHoverZoom: true,
            imagePreviewZoomFactor: 2,
            imagePreviewMinHeight: 100,
            server: {
                url: '/upload.php',
                process: '/process',
                revert: '/revert',
                restore: '/restore',
                load: '/load',
                fetch: '/fetch',
            }
        });

        $("#btnSubmit").click(function(e){
            e.preventDefault(); 

            var formData = new FormData($("#filepond-form")[0]);
            pond.getFiles().forEach(fileItem => {
                formData.append('filepond[]', fileItem.file);
            });

            $.ajax({
                url: 'product_add_db.php',
                method: 'POST',
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function(response) {
                    if(response.status){
                        Swal.fire({
                            title: response.message,
                            text: 'Your action was successful!',
                            icon: 'success',
                            timer: 1000,  
                            showConfirmButton: false
                        }).then(function() {
                            window.location = "product.php";
                        });
                    }else{
                        Swal.fire({
                            title: response.message,
                            text: 'error!',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                }
            });

            // console.log(formData)

        });

    });
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

<?php

//คิวรี่ข้อมูลมาแสดงในตาราง

include '../condb.php';

$stmtType = $conn->prepare("

SELECT * FROM tbl_type

ORDER BY type_id ASC #เรียงลำดับข้อมูลจากน้อยไปมาก

");

$stmtType->execute();

$resultType = $stmtType->fetchAll();

</div>

<label for="exampleInputPassword1">ประเภทสินค้า</label>

<option disabled selected>เลือกประเภทสินค้า</option>

<?php foreach ($resultType as $row_type) { ?>

<?php } ?>

</select>

</div>

<label for="exampleInputEmail1">รายละเอียดสินค้า</label>

</div>

</div>

<label for="exampleInputEmail1">จำนวน</label>

</div>

<option disabled selected>เลือกหน่วยสินค้า</option>

</select>

</div>

<label for="exampleInputFile">File รูปภาพ สินค้า *jpg, png</label>

</div>

<button type="submit" id="btnSubmit" class="btn btn-success">บันทึกข้อมูล</button>

</div>

</form>

</div>

$(document).ready(function() {

const pond = FilePond.create(document.querySelector('.filepond'), {

instantUpload: false,

imagePreviewHeight: 150,

imagePreviewWidth: 150,

imagePreviewMaxHeight: 300,

imagePreviewMaxFileSize: '5MB',

imagePreviewTransparencyIndicator: 'background',

imagePreviewUpscale: true,

imagePreviewHoverZoom: true,

imagePreviewZoomFactor: 2,

imagePreviewMinHeight: 100,

server: {

url: '/upload.php',

process: '/process',

revert: '/revert',

restore: '/restore',

load: '/load',

fetch: '/fetch',

}

});

$("#btnSubmit").click(function(e){

e.preventDefault();

var formData = new FormData($("#filepond-form")[0]);

pond.getFiles().forEach(fileItem => {

formData.append('filepond[]', fileItem.file);

});

$.ajax({

url: 'product_add_db.php',

method: 'POST',

data: formData,

dataType: 'json',

processData: false,

contentType: false,

success: function(response) {

if(response.status){

Swal.fire({

title: response.message,

text: 'Your action was successful!',

icon: 'success',

timer: 1000,

showConfirmButton: false

}).then(function() {

window.location = "product.php";

});

}else{

Swal.fire({

title: response.message,

text: 'error!',

icon: 'error',

confirmButtonText: 'OK'

});

}

});

// console.log(formData)

});

</script>

product_add_db.php

<?php
// echo "<pre>";
// print_r($_POST);
// print_r($_FILES);
// echo "</pre>";
// exit();
if (isset($_POST['p_name'])) {
    include '../condb.php';
    
    
    $p_name = htmlspecialchars(trim($_POST['p_name']));
    $type_id = (int)$_POST['type_id'];
    $p_detail = htmlspecialchars(trim($_POST['p_detail']));
    $p_price = (int)$_POST['p_price'];
    $p_qty = (int)$_POST['p_qty'];
    $p_unit = htmlspecialchars(trim($_POST['p_unit']));

    // Insert the main product data into tbl_product
    $stmt = $conn->prepare("INSERT INTO tbl_product (p_name, type_id, p_detail, p_price, p_qty, p_unit)
                            VALUES (:p_name, :type_id, :p_detail, :p_price, :p_qty, :p_unit)");
    $stmt->bindParam(':p_name', $p_name, PDO::PARAM_STR);
    $stmt->bindParam(':type_id', $type_id, PDO::PARAM_INT);
    $stmt->bindParam(':p_detail', $p_detail, PDO::PARAM_STR);
    $stmt->bindParam(':p_price', $p_price, PDO::PARAM_INT);
    $stmt->bindParam(':p_qty', $p_qty, PDO::PARAM_INT);
    $stmt->bindParam(':p_unit', $p_unit, PDO::PARAM_STR);
    $stmt->execute();
    

    $last_id = $conn->lastInsertId();
    $file_count = count($_FILES['filepond']['name']);
    $date1 = date("Ymd_His");
    $numrand = (mt_rand());
    
    for ($i = 0; $i < $file_count; $i++) {
        $file_name = $_FILES['filepond']['name'][$i];
        $file_tmp = $_FILES['filepond']['tmp_name'][$i];
        $file_size = $_FILES['filepond']['size'][$i];
        $file_type = mime_content_type($file_tmp);


        if (($file_type == 'image/jpeg' || $file_type == 'image/png') && $file_size <= 5000000) {
            $typefile = strrchr($file_name, ".");
            $newname = $numrand . $date1 . "_$i" . $typefile;
            $path = "../p_gallery/";
            $path_copy = $path . $newname;

            if (move_uploaded_file($file_tmp, $path_copy)) {
                $stmt_photo = $conn->prepare("INSERT INTO tbl_img_detail (p_id, img) 
                                              VALUES (:last_id, :img_name)");
                $stmt_photo->bindParam(':last_id', $last_id, PDO::PARAM_INT);
                $stmt_photo->bindParam(':img_name', $newname, PDO::PARAM_STR);
                $stmt_photo->execute();
            }
        } else {
            echo '<script>alert("File upload error: Invalid file type or size.");</script>';
        }
    }
    
    // Feedback to the user
    if ($stmt && $stmt_photo) {
        echo json_encode(array("status" => true, "message" => "บันทึกเรียบร้อย"));
    } else {
        echo json_encode(array("status" => false, "message" => "Error"));
    }

    $conn = null;
}
?>

<?php

// echo "<pre>";

// print_r($_POST);

// print_r($_FILES);

// echo "</pre>";

// exit();

if (isset($_POST['p_name'])) {

include '../condb.php';

$p_name = htmlspecialchars(trim($_POST['p_name']));

$type_id = (int)$_POST['type_id'];

$p_detail = htmlspecialchars(trim($_POST['p_detail']));

$p_price = (int)$_POST['p_price'];

$p_qty = (int)$_POST['p_qty'];

$p_unit = htmlspecialchars(trim($_POST['p_unit']));

// Insert the main product data into tbl_product

$stmt = $conn->prepare("INSERT INTO tbl_product (p_name, type_id, p_detail, p_price, p_qty, p_unit)

VALUES (:p_name, :type_id, :p_detail, :p_price, :p_qty, :p_unit)");

$stmt->bindParam(':p_name', $p_name, PDO::PARAM_STR);

$stmt->bindParam(':type_id', $type_id, PDO::PARAM_INT);

$stmt->bindParam(':p_detail', $p_detail, PDO::PARAM_STR);

$stmt->bindParam(':p_price', $p_price, PDO::PARAM_INT);

$stmt->bindParam(':p_qty', $p_qty, PDO::PARAM_INT);

$stmt->bindParam(':p_unit', $p_unit, PDO::PARAM_STR);

$stmt->execute();

$last_id = $conn->lastInsertId();

$file_count = count($_FILES['filepond']['name']);

$date1 = date("Ymd_His");

$numrand = (mt_rand());

for ($i = 0; $i < $file_count; $i++) {

$file_name = $_FILES['filepond']['name'][$i];

$file_tmp = $_FILES['filepond']['tmp_name'][$i];

$file_size = $_FILES['filepond']['size'][$i];

$file_type = mime_content_type($file_tmp);

if (($file_type == 'image/jpeg' || $file_type == 'image/png') && $file_size <= 5000000) {

$typefile = strrchr($file_name, ".");

$newname = $numrand . $date1 . "_$i" . $typefile;

$path = "../p_gallery/";

$path_copy = $path . $newname;

if (move_uploaded_file($file_tmp, $path_copy)) {

$stmt_photo = $conn->prepare("INSERT INTO tbl_img_detail (p_id, img)

VALUES (:last_id, :img_name)");

$stmt_photo->bindParam(':last_id', $last_id, PDO::PARAM_INT);

$stmt_photo->bindParam(':img_name', $newname, PDO::PARAM_STR);

$stmt_photo->execute();

}

} else {

echo '<script>alert("File upload error: Invalid file type or size.");</script>';

}

// Feedback to the user

if ($stmt && $stmt_photo) {

echo json_encode(array("status" => true, "message" => "บันทึกเรียบร้อย"));

} else {

echo json_encode(array("status" => false, "message" => "Error"));

}

$conn = null;

}

ฟอร์มแก้ไขสินค้า product_edit.php

    <?php 
  //คิวรี่ข้อมูลมาแสดงในตาราง
      include '../condb.php';
      $stmtType = $conn->prepare("
      SELECT * FROM tbl_type 
      ORDER BY type_id  ASC #เรียงลำดับข้อมูลจากน้อยไปมาก
      ");
        $stmtType->execute();
        $resultType = $stmtType->fetchAll();                                         
  ?>

    <?php
      if(isset($_GET['p_id'])){
      include '../condb.php';
      $stmt_pro = $conn->prepare("
        SELECT * FROM tbl_product as p
        INNER JOIN tbl_type as t ON p.type_id = t.type_id
        WHERE p.p_id=?
        ORDER BY p.p_id ASC #เรียงลำดับข้อมูลจากน้อยไปมาก
        ");
      $stmt_pro->execute([$_GET['p_id']]);
      $row_prod = $stmt_pro->fetch(PDO::FETCH_ASSOC);
      //ถ้าคิวรี่ผิดพลาดให้กลับไปหน้า index
        if($stmt_pro->rowCount() < 1){
            header('Location: index.php');
            exit();
         }
      }//isset
      ?>
    <form id="filepond-form" action="product_edit_db.php" method="post" enctype="multipart/form-data">
        <div class="card-body">
            <!-- First row: Username and Password -->
            <div class="row">
                <div class="form-group col-4">
                    <label for="exampleInputEmail1">สินค้า</label>
                    <input type="text" name="p_name" value="<?= $row_prod['p_name'];?>" class="form-control" id="exampleInputEmail1" placeholder="ชื่อสินค้า" required>
                </div>
          <div class="form-group col-4">
              <label for="exampleInputPassword1">ประเภทสินค้า</label>
              <select id="productType" name="type_id" class="form-control" required>
               <option value="<?php echo $row_prod['type_id']; ?>"><?php echo $row_prod['type_name']; ?></option>
                  <option disabled >เลือกประเภทสินค้า</option>
                  <?php foreach ($resultType as $row_type) { ?>  
                      <option value="<?php echo $row_type['type_id']; ?>"><?php echo $row_type['type_name']; ?></option>
                  <?php } ?>
              </select>
          </div>
            </div>

            <!-- Second row: Name, Email -->
            <div class="row">
                <div class="form-group col-8">
                      <label for="exampleInputEmail1">รายละเอียดสินค้า</label>
                    <textarea name="p_detail" id="p_detail"  class="form-control" placeholder="รายละเอียดสินค้า" required><?= $row_prod['p_detail'];?> </textarea>
                </div>
            </div>

            <!-- Third row: Phone number -->
            <div class="row">
               <div class="form-group col-3">
                    <label for="exampleInputPassword1">ราคา</label>
                    <input type="number" name="p_price" value="<?= $row_prod['p_price'];?>"  class="form-control" id="exampleInputPassword1" placeholder="ราคาสินค้า" required>
                </div>
                <div class="form-group col-2">
                    <label for="exampleInputEmail1">จำนวน</label>
                    <input type="text" name="p_qty" value="<?= $row_prod['p_qty'];?>" class="form-control" id="exampleInputEmail1" placeholder="จำนวน" required>
                </div>
                  <div class="form-group col-3">
                    <label for="exampleInputEmail1">หน่วย</label>
                    <select name="p_unit" class="form-control" required>
                    <option  value="<?= $row_prod['p_unit'];?>"><?= $row_prod['p_unit'];?></option>
                    <option disabled >เลือกหน่วยสินค้า</option>
                      <option value="กล่อง">กล่อง</option>
                      <option value="ชิ้น">ชิ้น</option>
                      <option value="อัน">อัน</option>
                      <option value="ชุด">ชุด</option>
                      <option value="เล่ม">เล่ม</option>
              </select>
                </div>
            </div> 
            <!-- File input -->
            <div class="row">
            <div class="form-group col-8">
                <label for="exampleInputFile">File รูปภาพ สินค้า *jpg, png</label>
                <input type="file" class="filepond"  multiple>
            </div>
          </div>
        <!-- Submit button -->
              <div class="form-group col-4">
            <input type="hidden" name="p_id" value="<?= $row_prod['p_id'];?>">
            <button type="submit" id="btnSubmit" class="btn btn-success">บันทึกข้อมูล</button>
            <a href="product.php" type="button" class="btn btn-dark">กลับ</a>
        </div>
    </form>
</div>

<script>
    $(document).ready(function() {

       const pond = FilePond.create(document.querySelector('.filepond'), {
            instantUpload: false,
            imagePreviewHeight: 150,
            imagePreviewWidth: 150,
            imagePreviewMaxHeight: 300,
            imagePreviewMaxFileSize: '5MB',
            imagePreviewTransparencyIndicator: 'background',
            imagePreviewUpscale: true,
            imagePreviewHoverZoom: true,
            imagePreviewZoomFactor: 2,
            imagePreviewMinHeight: 100,
            server: {
                url: '/upload.php',
                process: '/process',
                revert: '/revert',
                restore: '/restore',
                load: '/load',
                fetch: '/fetch',
            }
        });

        $.ajax({
          url: 'product_edit_db.php',
          method: 'GET',
          data: { id: '<?php echo $_GET["p_id"]; ?>' },
          dataType: 'json',
          success: function(response) {
            pond.addFiles(response.data.map(item => {
                return {
                    source: '../p_gallery/' + item.source
                };
            }));
          }
      });

        $("#btnSubmit").click(function(e){
            e.preventDefault(); 
            var formData = new FormData($("#filepond-form")[0]);
            pond.getFiles().forEach(fileItem => {
                formData.append('filepond[]', fileItem.file);
            });

            $.ajax({
                url: 'product_edit_db.php',
                method: 'POST',
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function(response) {
                    if(response.status){
                        Swal.fire({
                            title: response.message,
                            text: 'Your action was successful!',
                            icon: 'success',
                            timer: 1000,  
                            showConfirmButton: false
                        }).then(function() {
                            window.location = "product.php";
                        });
                    }else{
                        Swal.fire({
                            title: response.message,
                            text: 'error!',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                }
            });
        });

    });
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

<?php

//คิวรี่ข้อมูลมาแสดงในตาราง

include '../condb.php';

$stmtType = $conn->prepare("

SELECT * FROM tbl_type

ORDER BY type_id ASC #เรียงลำดับข้อมูลจากน้อยไปมาก

");

$stmtType->execute();

$resultType = $stmtType->fetchAll();

<?php

if(isset($_GET['p_id'])){

include '../condb.php';

$stmt_pro = $conn->prepare("

SELECT * FROM tbl_product as p

INNER JOIN tbl_type as t ON p.type_id = t.type_id

WHERE p.p_id=?

ORDER BY p.p_id ASC #เรียงลำดับข้อมูลจากน้อยไปมาก

");

$stmt_pro->execute([$_GET['p_id']]);

$row_prod = $stmt_pro->fetch(PDO::FETCH_ASSOC);

//ถ้าคิวรี่ผิดพลาดให้กลับไปหน้า index

if($stmt_pro->rowCount() < 1){

header('Location: index.php');

exit();

}

}//isset

<input type="text" name="p_name" value="<?= $row_prod['p_name'];?>" class="form-control" id="exampleInputEmail1" placeholder="ชื่อสินค้า" required>

</div>

<label for="exampleInputPassword1">ประเภทสินค้า</label>

<option disabled >เลือกประเภทสินค้า</option>

<?php foreach ($resultType as $row_type) { ?>

<?php } ?>

</select>

</div>

<label for="exampleInputEmail1">รายละเอียดสินค้า</label>

</div>

<input type="number" name="p_price" value="<?= $row_prod['p_price'];?>" class="form-control" id="exampleInputPassword1" placeholder="ราคาสินค้า" required>

</div>

<label for="exampleInputEmail1">จำนวน</label>

<input type="text" name="p_qty" value="<?= $row_prod['p_qty'];?>" class="form-control" id="exampleInputEmail1" placeholder="จำนวน" required>

</div>

<option disabled >เลือกหน่วยสินค้า</option>

</select>

</div>

<label for="exampleInputFile">File รูปภาพ สินค้า *jpg, png</label>

</div>

<button type="submit" id="btnSubmit" class="btn btn-success">บันทึกข้อมูล</button>

</div>

</form>

</div>

$(document).ready(function() {

const pond = FilePond.create(document.querySelector('.filepond'), {

instantUpload: false,

imagePreviewHeight: 150,

imagePreviewWidth: 150,

imagePreviewMaxHeight: 300,

imagePreviewMaxFileSize: '5MB',

imagePreviewTransparencyIndicator: 'background',

imagePreviewUpscale: true,

imagePreviewHoverZoom: true,

imagePreviewZoomFactor: 2,

imagePreviewMinHeight: 100,

server: {

url: '/upload.php',

process: '/process',

revert: '/revert',

restore: '/restore',

load: '/load',

fetch: '/fetch',

}

});

$.ajax({

url: 'product_edit_db.php',

method: 'GET',

data: { id: '<?php echo $_GET["p_id"]; ?>' },

dataType: 'json',

success: function(response) {

pond.addFiles(response.data.map(item => {

return {

source: '../p_gallery/' + item.source

};

}));

}

});

$("#btnSubmit").click(function(e){

e.preventDefault();

var formData = new FormData($("#filepond-form")[0]);

pond.getFiles().forEach(fileItem => {

formData.append('filepond[]', fileItem.file);

});

$.ajax({

url: 'product_edit_db.php',

method: 'POST',

data: formData,

dataType: 'json',

processData: false,

contentType: false,

success: function(response) {

if(response.status){

Swal.fire({

title: response.message,

text: 'Your action was successful!',

icon: 'success',

timer: 1000,

showConfirmButton: false

}).then(function() {

window.location = "product.php";

});

}else{

Swal.fire({

title: response.message,

text: 'error!',

icon: 'error',

confirmButtonText: 'OK'

});

}

});

</script>

producr_edit_db.php

<?php 
// echo "<pre>";
// print_r($_POST);
// echo "</pre>";
// exit();
include '../condb.php';
if (isset($_POST['p_id'])) {

  // รับค่าจากฟอร์ม
  $p_id = $_POST['p_id'];
  $p_name = $_POST['p_name'];
  $type_id = $_POST['type_id'];
  $p_detail = $_POST['p_detail'];
  $p_price = $_POST['p_price'];
  $p_qty = $_POST['p_qty'];
  $p_unit = $_POST['p_unit'];

  $stmt = $conn->prepare("UPDATE tbl_product SET 
      p_name=:p_name,
      type_id=:type_id,
      p_detail=:p_detail,
      p_price=:p_price,
      p_qty=:p_qty,
      p_unit=:p_unit
      WHERE p_id=:p_id");
  $stmt->bindParam(':p_id', $p_id, PDO::PARAM_INT);
  $stmt->bindParam(':p_name', $p_name, PDO::PARAM_STR);
  $stmt->bindParam(':p_detail', $p_detail, PDO::PARAM_STR);
  $stmt->bindParam(':type_id', $type_id, PDO::PARAM_INT);
  $stmt->bindParam(':p_price', $p_price, PDO::PARAM_STR);
  $stmt->bindParam(':p_qty', $p_qty, PDO::PARAM_STR);
  $stmt->bindParam(':p_unit', $p_unit, PDO::PARAM_STR);
  $result = $stmt->execute();

  if ($result) {
      // Delete old images if new images are provided
      $stmt = $conn->prepare('DELETE FROM tbl_img_detail WHERE p_id=:p_id');
      $stmt->bindParam(':p_id', $p_id , PDO::PARAM_INT);
      $stmt->execute();

      if (isset($_FILES['filepond']) && isset($_FILES['filepond']['name']) && is_array($_FILES['filepond']['name']) 
      && count($_FILES['filepond']['name']) > 0 && $_FILES['filepond']['name'][0] != '') {

        $file_count = count($_FILES['filepond']['name']);
        $date1 = date("Ymd_His");
        $numrand = (mt_rand());
        
        for ($i = 0; $i < $file_count; $i++) {
            $file_tmp = $_FILES['filepond']['tmp_name'][$i];
            $file_name = $_FILES['filepond']['name'][$i];
            $file_type = $_FILES['filepond']['type'][$i];
            $file_size = $_FILES['filepond']['size'][$i];
       
            if (($file_type == 'image/jpeg' || $file_type == 'image/png') && $file_size <= 5000000) {
                $file_extension = '';
                if ($file_type == 'image/jpeg') {
                    $file_extension = '.jpg';
                } elseif ($file_type == 'image/png') {
                    $file_extension = '.png';
                }

                $newname = $numrand . $date1 . "_$i" . $file_extension;
                $path = "../p_gallery/";
                $path_copy = $path . $newname;
    
                if (move_uploaded_file($file_tmp, $path_copy)) {
                    $stmt_photo = $conn->prepare("INSERT INTO tbl_img_detail (p_id, img) 
                                                  VALUES (:p_id, :img_name)");
                    $stmt_photo->bindParam(':p_id', $p_id, PDO::PARAM_INT);
                    $stmt_photo->bindParam(':img_name', $newname, PDO::PARAM_STR);
                    $stmt_photo->execute();
                }
            }
        }
      }

      echo json_encode(array("status" => true, "message" => "แก้ไขเรียบร้อย"));
  } else {
      echo json_encode(array("status" => false, "message" => "Error"));
  }




  } else if (isset($_GET['id'])) {
    
        // Prepare the SQL query
        $stmt = $conn->prepare("SELECT img AS source FROM tbl_img_detail
        WHERE p_id = ?
        	");
        $stmt->execute([$_GET['id']]);
        $products_img = $stmt->fetchAll(PDO::FETCH_ASSOC);

        $conn = null;

        // Return the products data as JSON
        echo json_encode(array("status" => true, "data" => $products_img));

  }
?>

100

<?php

// echo "<pre>";

// print_r($_POST);

// echo "</pre>";

// exit();

include '../condb.php';

if (isset($_POST['p_id'])) {

// รับค่าจากฟอร์ม

$p_id = $_POST['p_id'];

$p_name = $_POST['p_name'];

$type_id = $_POST['type_id'];

$p_detail = $_POST['p_detail'];

$p_price = $_POST['p_price'];

$p_qty = $_POST['p_qty'];

$p_unit = $_POST['p_unit'];

$stmt = $conn->prepare("UPDATE tbl_product SET

p_name=:p_name,

type_id=:type_id,

p_detail=:p_detail,

p_price=:p_price,

p_qty=:p_qty,

p_unit=:p_unit

WHERE p_id=:p_id");

$stmt->bindParam(':p_id', $p_id, PDO::PARAM_INT);

$stmt->bindParam(':p_name', $p_name, PDO::PARAM_STR);

$stmt->bindParam(':p_detail', $p_detail, PDO::PARAM_STR);

$stmt->bindParam(':type_id', $type_id, PDO::PARAM_INT);

$stmt->bindParam(':p_price', $p_price, PDO::PARAM_STR);

$stmt->bindParam(':p_qty', $p_qty, PDO::PARAM_STR);

$stmt->bindParam(':p_unit', $p_unit, PDO::PARAM_STR);

$result = $stmt->execute();

if ($result) {

// Delete old images if new images are provided

$stmt = $conn->prepare('DELETE FROM tbl_img_detail WHERE p_id=:p_id');

$stmt->bindParam(':p_id', $p_id , PDO::PARAM_INT);

$stmt->execute();

if (isset($_FILES['filepond']) && isset($_FILES['filepond']['name']) && is_array($_FILES['filepond']['name'])

&& count($_FILES['filepond']['name']) > 0 && $_FILES['filepond']['name'][0] != '') {

$file_count = count($_FILES['filepond']['name']);

$date1 = date("Ymd_His");

$numrand = (mt_rand());

for ($i = 0; $i < $file_count; $i++) {

$file_tmp = $_FILES['filepond']['tmp_name'][$i];

$file_name = $_FILES['filepond']['name'][$i];

$file_type = $_FILES['filepond']['type'][$i];

$file_size = $_FILES['filepond']['size'][$i];

if (($file_type == 'image/jpeg' || $file_type == 'image/png') && $file_size <= 5000000) {

$file_extension = '';

if ($file_type == 'image/jpeg') {

$file_extension = '.jpg';

} elseif ($file_type == 'image/png') {

$file_extension = '.png';

}

$newname = $numrand . $date1 . "_$i" . $file_extension;

$path = "../p_gallery/";

$path_copy = $path . $newname;

if (move_uploaded_file($file_tmp, $path_copy)) {

$stmt_photo = $conn->prepare("INSERT INTO tbl_img_detail (p_id, img)

VALUES (:p_id, :img_name)");

$stmt_photo->bindParam(':p_id', $p_id, PDO::PARAM_INT);

$stmt_photo->bindParam(':img_name', $newname, PDO::PARAM_STR);

$stmt_photo->execute();

}

echo json_encode(array("status" => true, "message" => "แก้ไขเรียบร้อย"));

} else {

echo json_encode(array("status" => false, "message" => "Error"));

}

} else if (isset($_GET['id'])) {

// Prepare the SQL query

$stmt = $conn->prepare("SELECT img AS source FROM tbl_img_detail

WHERE p_id = ?

");

$stmt->execute([$_GET['id']]);

$products_img = $stmt->fetchAll(PDO::FETCH_ASSOC);

$conn = null;

// Return the products data as JSON

echo json_encode(array("status" => true, "data" => $products_img));

}

หน้าแสดงข้อมูลสินค้า product_list.php

<?php 
//คิวรี่ข้อมูลมาแสดงในตาราง
    include '../condb.php';
    // $stmtProduct = $conn->prepare("
    // SELECT * FROM tbl_product as p 
    // INNER JOIN tbl_type as t ON p.type_id = t.type_id
    // ORDER BY p.p_id  ASC #เรียงลำดับข้อมูลจากน้อยไปมาก
    // ");
    
      $stmtProduct = $conn->prepare("SELECT p.*, t.*, imgs.img
      FROM tbl_product AS p
      INNER JOIN tbl_type AS t ON p.type_id = t.type_id
      LEFT JOIN (
          SELECT p_id, MIN(img) AS img
          FROM tbl_img_detail
          GROUP BY p_id
      ) AS imgs ON p.p_id = imgs.p_id");

      $stmtProduct->execute();
      $resultProduct = $stmtProduct->fetchAll();                                         
?>
<style type="text/css" media="screen">
  .light-gray {
    color: #616A6B; /* เลือกสีที่ต้องการ */
}  
</style>
  <table id="example1" class="table table-striped dataTable">
    <thead>
      <tr role="row" class="info">
        <th  tabindex="0" rowspan="1" colspan="1" style="width: 1%;">No.</th>
        <th  tabindex="0" rowspan="1" colspan="1" style="width: 5%;">รูป</th>
        <th  tabindex="0" rowspan="1" colspan="1" style="width: 20%;">สินค้า/ประเภท</th>
        <th  tabindex="0" rowspan="1" colspan="1" style="width: 25%;">รายละเอียดสินค้า</th>
        <th  tabindex="0" rowspan="1" colspan="1" style="width: 10%;">ราคา</th>
        <th  tabindex="0" rowspan="1" colspan="1" style="width: 10%;">จำนวน</th>
        <th  tabindex="0" rowspan="1" colspan="1" style="width: 10%;">การเข้าชม</th>
        <th  tabindex="0" rowspan="1" colspan="1" style="width: 3%;">-</th>
        <th  tabindex="0" rowspan="1" colspan="1" style="width: 3%;">-</th>  
        <th  tabindex="0" rowspan="1" colspan="1" style="width: 3%;">-</th> 
      </tr>
    </thead>
    <tbody>
       <?php $runNumber = 1; foreach ($resultProduct as $row_prod) { ?>  
      <tr>
        <td  align="center">
         <?php echo $runNumber++; ?>
        </td>
         <td  align="center">
        <img src="../p_gallery/<?php echo $row_prod['img']; ?>"  width="60">
        </td>
         <td>
         <?php echo $row_prod['p_name']; ?><br>
          <span class="light-gray">ประเภท: <?php echo $row_prod['type_name']; ?></span>
        </td>
         <td>
         <?php echo $row_prod['p_detail']; ?>
        </td>
         <td>
         <?php echo number_format($row_prod['p_price']); ?> 
        </td>
         <td>
           <?php echo $row_prod['p_qty']; ?> <?php echo $row_prod['p_unit']; ?> 
        </td>
        </td>
        <td>
          <i class="far fa-eye"></i> <?php echo $row_prod['p_view']; ?> ครั้ง
        </td>
        <td>
            <div class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
            <input 
                type="checkbox"
                class="custom-control-input"
                id="customSwitch<?= $row_prod['p_id']?>"
                onchange="toggle_check(<?= $row_prod['p_id']?>)"
                <?php echo($row_prod['p_status'] == 1)?'checked':''; ?> 
            >
            <label class="custom-control-label" for="customSwitch<?= $row_prod['p_id']?>"></label>
        </div>
        </td>
        <td><a href="product.php?act=edit&p_id=<?php echo $row_prod['p_id']; ?>"><i class="fas fa-edit" style="color: #2E86C1;"></i></a></td>
        <td><a href=""  onclick="confirmDelete(event, '<?php echo $row_prod['p_id']; ?>')"><i class="fas fa-trash" style="color: #D35400;"></i></a></td>   
         <?php } ?>  
      </tr>
    </tbody>
  </table>
   <script>
       function confirmDelete(event, p_id) {
          event.preventDefault(); // หยุดการเปลี่ยนเส้นทางไปยังหน้าลบก่อน
          Swal.fire({
              text: "คุณแน่ใจที่จะลบข้อมูลหรือไม่?",
              icon: "warning",
              showCancelButton: true,
              confirmButtonColor: "#3085d6",
              cancelButtonColor: "#d33",
              confirmButtonText: "ตกลง",
              cancelButtonText: "ยกเลิก"
          }).then((result) => {
              if (result.isConfirmed) {
                  // Redirect to logout.php if user confirms
                   window.location.href = "product_del.php?p_id=" + encodeURIComponent(p_id)
              }
          });
      }
      function toggle_check(p_id) {
      // alert(m_id) //เช็คค่า user_id
        $.ajax({
        method: 'POST',
        url: 'product_update_status.php',
        data: {
        p_id: p_id
        },
        });
      }
    </script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

<?php

//คิวรี่ข้อมูลมาแสดงในตาราง

include '../condb.php';

// $stmtProduct = $conn->prepare("

// SELECT * FROM tbl_product as p

// INNER JOIN tbl_type as t ON p.type_id = t.type_id

// ORDER BY p.p_id ASC #เรียงลำดับข้อมูลจากน้อยไปมาก

// ");

$stmtProduct = $conn->prepare("SELECT p.*, t.*, imgs.img

FROM tbl_product AS p

INNER JOIN tbl_type AS t ON p.type_id = t.type_id

LEFT JOIN (

SELECT p_id, MIN(img) AS img

FROM tbl_img_detail

GROUP BY p_id

) AS imgs ON p.p_id = imgs.p_id");

$stmtProduct->execute();

$resultProduct = $stmtProduct->fetchAll();

.light-gray {

color: #616A6B; /* เลือกสีที่ต้องการ */

}

</style>

<thead>

<th tabindex="0" rowspan="1" colspan="1" style="width: 20%;">สินค้า/ประเภท</th>

<th tabindex="0" rowspan="1" colspan="1" style="width: 25%;">รายละเอียดสินค้า</th>

<th tabindex="0" rowspan="1" colspan="1" style="width: 10%;">จำนวน</th>

<th tabindex="0" rowspan="1" colspan="1" style="width: 10%;">การเข้าชม</th>

</tr>

</thead>

<tbody>

<?php $runNumber = 1; foreach ($resultProduct as $row_prod) { ?>

<tr>

<?php echo $runNumber++; ?>

</td>

<img src="../p_gallery/<?php echo $row_prod['img']; ?>" width="60">

</td>

<td>

<?php echo $row_prod['p_name']; ?><br>

<span class="light-gray">ประเภท: <?php echo $row_prod['type_name']; ?></span>

</td>

<td>

<?php echo $row_prod['p_detail']; ?>

</td>

<td>

<?php echo number_format($row_prod['p_price']); ?>

</td>

<td>

<?php echo $row_prod['p_qty']; ?> <?php echo $row_prod['p_unit']; ?>

</td>

<td>

<i class="far fa-eye"></i> <?php echo $row_prod['p_view']; ?> ครั้ง

</td>

<td>

<input

type="checkbox"

class="custom-control-input"

id="customSwitch<?= $row_prod['p_id']?>"

onchange="toggle_check(<?= $row_prod['p_id']?>)"

<?php echo($row_prod['p_status'] == 1)?'checked':''; ?>

</div>

</td>

<?php } ?>

</tr>

</tbody>

</table>

function confirmDelete(event, p_id) {

event.preventDefault(); // หยุดการเปลี่ยนเส้นทางไปยังหน้าลบก่อน

Swal.fire({

text: "คุณแน่ใจที่จะลบข้อมูลหรือไม่?",

icon: "warning",

showCancelButton: true,

confirmButtonColor: "#3085d6",

cancelButtonColor: "#d33",

confirmButtonText: "ตกลง",

cancelButtonText: "ยกเลิก"

}).then((result) => {

if (result.isConfirmed) {

// Redirect to logout.php if user confirms

window.location.href = "product_del.php?p_id=" + encodeURIComponent(p_id)

}

});

}

function toggle_check(p_id) {

// alert(m_id) //เช็คค่า user_id

$.ajax({

method: 'POST',

url: 'product_update_status.php',

data: {

p_id: p_id

});

}

</script>

ลบสินค้า product_del.php

<?php 
if(isset($_GET['p_id'])){
    include '../condb.php';
//ประกาศตัวแปรรับค่าจาก param method get
$p_id = $_GET['p_id'];
$stmt = $conn->prepare('DELETE FROM tbl_product WHERE p_id=:p_id');
$stmt->bindParam(':p_id', $p_id , PDO::PARAM_INT);
$stmt->execute();

  if($stmt->rowCount() > 0){
        echo '<script>       
              window.location = "product.php"; //หน้าที่ต้องการให้กระโดดไป
              </script>';
    }else{
       echo '<script>         
              window.location = "product.php"; //หน้าที่ต้องการให้กระโดดไป
             </script>';
    }
$conn = null;
} //isset
?>

<?php

if(isset($_GET['p_id'])){

include '../condb.php';

//ประกาศตัวแปรรับค่าจาก param method get

$p_id = $_GET['p_id'];

$stmt = $conn->prepare('DELETE FROM tbl_product WHERE p_id=:p_id');

$stmt->bindParam(':p_id', $p_id , PDO::PARAM_INT);

$stmt->execute();

if($stmt->rowCount() > 0){

echo '<script>

window.location = "product.php"; //หน้าที่ต้องการให้กระโดดไป

</script>';

}else{

echo '<script>

window.location = "product.php"; //หน้าที่ต้องการให้กระโดดไป

</script>';

}

$conn = null;

} //isset

product_update_status.php

<?php
echo '<meta charset="utf-8">';
include('../condb.php');

$p_id = $_POST["p_id"]; // No need to escape since using prepared statements

// Prepare the SQL statement to fetch m_status
$query_status = "SELECT p_status FROM tbl_product WHERE p_id = :p_id";
$stmt = $conn->prepare($query_status);
$stmt->bindParam(':p_id', $p_id);
$stmt->execute();

// Fetch the result
$row = $stmt->fetch(PDO::FETCH_ASSOC);

// Prepare the SQL statement to update p_status (toggle between 0 and 1)
$sql_update = "UPDATE tbl_product SET p_status = CASE WHEN p_status = 1 THEN 0 ELSE 1 END WHERE p_id = :p_id";
$stmt = $conn->prepare($sql_update);
$stmt->bindParam(':p_id', $p_id);
$stmt->execute();

echo "Status updated successfully.";

?>

<?php

echo '<meta charset="utf-8">';

include('../condb.php');

$p_id = $_POST["p_id"]; // No need to escape since using prepared statements

// Prepare the SQL statement to fetch m_status

$query_status = "SELECT p_status FROM tbl_product WHERE p_id = :p_id";

$stmt = $conn->prepare($query_status);

$stmt->bindParam(':p_id', $p_id);

$stmt->execute();

// Fetch the result

$row = $stmt->fetch(PDO::FETCH_ASSOC);

// Prepare the SQL statement to update p_status (toggle between 0 and 1)

$sql_update = "UPDATE tbl_product SET p_status = CASE WHEN p_status = 1 THEN 0 ELSE 1 END WHERE p_id = :p_id";

$stmt = $conn->prepare($sql_update);

$stmt->bindParam(':p_id', $p_id);

$stmt->execute();

echo "Status updated successfully.";

วัยวุฒิ ชุมเมืองปัก

สนใจจ้างพัฒนาระบบ เขียนระบบ
ทำเว็บไซต์ รับสอนเขียนโปรแกรม
inbox มาที่เพจ หรือติดต่อ 098-373-8651

ช่องทางการชำระเงิน
เงินสด หรือ e-banking
ธนาคารกสิกรไทย
เลขบัญชี : 0951168564
ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก

Filepond PHP8 ShoppingCart Uploading Multiple Images

วัยวุฒิ ชุมเมืองปัก

สนใจจ้างพัฒนาระบบ เขียนระบบ ทำเว็บไซต์ รับสอนเขียนโปรแกรม inbox มาที่เพจ หรือติดต่อ 098-373-8651 ช่องทางการชำระเงิน เงินสด หรือ e-banking ธนาคารกสิกรไทย เลขบัญชี : 0951168564 ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก

ShoppingCart Uploading Multiple Images with PHP8 PDO and Filepond

Workshop ShoppingCart Uploading Multiple Images with Filepond

Related

วัยวุฒิ ชุมเมืองปัก

Workshop ShoppingCart Uploading Multiple Images with Filepond

Share this:

Related

วัยวุฒิ ชุมเมืองปัก