PHP PDO แสดงสินค้าหน้าแรกและตกแต่งด้วย Bootstrap5

สวัสดีครับ ในบทความนี้จะแจกตัวอย่าง Code PHP PDO การสร้างเงื่อนไขตรวจสอบจำนวนสินค้าคงเหลือ (สต๊อกสินค้า) และมีการกำหนดสีของ td เพื่อให้รู้ว่าสินค้ารายการใดใกล้จะหมดสต๊อก และโค้ดจะรองรับ php7, php8 ฝึกไว้ครับเผื่อได้ใช้

ตัวอย่างระบบที่มีการแสดงข้อมูลสินค้า
1.เว็บอีคอมเมิร์ช คลิก
2.เว็บ FOOD POS ขายอาหารหน้าร้าน คลิก
3.เว็บ Coffee POS ขายกาแฟหน้าร้าน คลิก
4.หลังบ้านระบบอีคอมเมิร์ช คลิก
5.เว็บบริษัท / เว็บองค์กร คลิก
6.ระบบอื่นๆ เพิ่มเติม คลิก

รวมคลิปสอนปรับพื้นฐาน ภาษา php ฟรี 100 คลิป ++ https://devbanban.com/?p=3940

โค้ดประกอบด้วย

PHP PDO
MySQL SQL Query
HTML
Bootstrap5 Class : col, table

มาเริ่มทำ workshop กันครับ *คอมเม้นอยู่ในโค้ด

0.รวม Workshop PHP PDO ก่อนหน้าคลิก

1.ตารางเก็บข้อมูลตัวอย่างจะชื่อ tbl_product ให้สร้างฐานข้อมูลก่อนครับ เช่น ฐานข้อมูลชื่อ workshop_pdo จากนั้นไปที่เมนู sql คัดลอกโค้ดไปวางและ go

CREATE TABLE `tbl_product` (
  `no` int(11) NOT NULL,
  `product_name` varchar(100) NOT NULL,
  `product_price` int(16) NOT NULL,
  `product_img` varchar(100) NOT NULL,
  `product_qty` int(10) NOT NULL COMMENT 'qty'
) ENGINE=InnoDB DEFAULT CHARSET=utf8;



INSERT INTO `tbl_product` (`no`, `product_name`, `product_price`, `product_img`, `product_qty`) VALUES
(1, 'Ford Mustang 2021', 4500000, 'prd.jpg', 10),
(2, 'Ford Mustang 2021', 4500000, 'prd.jpg', 5),
(3, 'Ford Mustang 2021', 6500000, 'prd.jpg', 0),
(4, 'Ford Mustang 2021', 4500000, 'prd.jpg', 3),
(5, 'Ford Mustang 2021', 5500000, 'prd.jpg', 0),
(6, 'Ford Mustang 2021', 4500000, 'prd.jpg', 20),
(7, 'Ford Mustang 2021', 4500000, 'prd.jpg', 0),
(8, 'Ford Mustang 2021', 4500000, 'prd.jpg', 20);

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

ALTER TABLE `tbl_product`
  MODIFY `no` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;

CREATE TABLE `tbl_product` (

`no` int(11) NOT NULL,

`product_name` varchar(100) NOT NULL,

`product_price` int(16) NOT NULL,

`product_img` varchar(100) NOT NULL,

`product_qty` int(10) NOT NULL COMMENT 'qty'

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `tbl_product` (`no`, `product_name`, `product_price`, `product_img`, `product_qty`) VALUES

(1, 'Ford Mustang 2021', 4500000, 'prd.jpg', 10),

(2, 'Ford Mustang 2021', 4500000, 'prd.jpg', 5),

(3, 'Ford Mustang 2021', 6500000, 'prd.jpg', 0),

(4, 'Ford Mustang 2021', 4500000, 'prd.jpg', 3),

(5, 'Ford Mustang 2021', 5500000, 'prd.jpg', 0),

(6, 'Ford Mustang 2021', 4500000, 'prd.jpg', 20),

(7, 'Ford Mustang 2021', 4500000, 'prd.jpg', 0),

(8, 'Ford Mustang 2021', 4500000, 'prd.jpg', 20);

ALTER TABLE `tbl_product`

ADD PRIMARY KEY (`no`);

ALTER TABLE `tbl_product`

MODIFY `no` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;

**ปล. หารูปมาใส่เองนะครับ ใส่ไว้ในโฟลเดอร์ upload ชื่อไฟล์ prd.jpg

2.สร้างโฟลเดอร์สำหรับทดสอบ เช่น ชื่อโฟลเดอร์ workshop_pdo *สำหรับคนที่เพิ่งฝึกยังไม่เข้าใจข้อนี้ว่าต้องสร้างไว้ที่ไหน ให้ดูคลิปชุดนี้ก่อน รวมคลิปสอนปรับพื้นฐาน ภาษา php ฟรี 100 คลิป ++ https://devbanban.com/?p=3940

3.ไฟล์เชื่อมต่อฐานข้อมูล ชื่อไฟล์ connect.php

<?php
$servername = "localhost";
$username = "root";
$password = "";

try {
  $conn = new PDO("mysql:host=$servername;dbname=workshop_pdo;charset=utf8", $username, $password);
  // set the PDO error mode to exception
  $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  //echo "Connected successfully";
} catch(PDOException $e) {
  echo "Connection failed: " . $e->getMessage();
}
//Set ว/ด/ป เวลา ให้เป็นของประเทศไทย
    date_default_timezone_set('Asia/Bangkok');
?>

<?php

$servername = "localhost";

$username = "root";

$password = "";

try {

$conn = new PDO("mysql:host=$servername;dbname=workshop_pdo;charset=utf8", $username, $password);

// set the PDO error mode to exception

$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

//echo "Connected successfully";

} catch(PDOException $e) {

echo "Connection failed: " . $e->getMessage();

}

//Set ว/ด/ป เวลา ให้เป็นของประเทศไทย

date_default_timezone_set('Asia/Bangkok');

4.สร้างโฟลเดอร์สำหรับเก็บไฟล์ภาพ ชื่อ upload (ตั้งตาม code บรรทัด 29)

5.ไฟล์ workshop ตั้งชื่อ showProduct.php หรือแล้วแต่ เช่น index.php *มีคอมเม้นเพิ่มเติมใน code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <title>Basic PHP PDO แสดงสินค้าหน้าแรก by devbanban.com 2021</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <div class="alert alert-primary" role="alert">
           รายการสินค้า
          </div>
        </div>
        
        <?php
        //เรียกไฟล์เชื่อมต่อฐานข้อมูล
        require_once 'connect.php';
        //คิวรี่ข้อมูลมาแสดงในตาราง
        $stmt = $conn->prepare("SELECT* FROM tbl_product");
        $stmt->execute();
        $result = $stmt->fetchAll();
        foreach($result as $row) {
          ?>
           <div class="col-sm-3" style="margin-bottom:50px;">
          <img src="upload/<?= $row['product_img'];?>" width="100%"><br>
          <?= $row['product_name'];?> ราคา 
          <?= number_format($row['product_price'],2);?>
           บาท  <br>
           คงเหลือ <?= $row['product_qty'];?> คัน <br>
           <?php if($row['product_qty'] > 0){
            echo '<a href="#" style="width:100%" class="btn btn-success btn-sm">สั่งซื้อ</a>';
           }else{
            echo '<a href="#" style="width:100%" class="btn btn-danger btn-sm disabled" > สินค้าหมด !!</a>';
           }
           ?>
          </div> <!-- //col -->

          <?php } ?>
          <br><br>
          <center>Basic PHP PDO แสดงสินค้าหน้าแรก by devbanban.com 2021
            <br>
                        คอร์สออนไลน์ <a href="https://devbanban.com/?cat=250" title="click">click</a>
          </center>
        </div>
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Basic PHP PDO แสดงสินค้าหน้าแรก by devbanban.com 2021</title>

</head>

<body>

รายการสินค้า

</div>

<?php

//เรียกไฟล์เชื่อมต่อฐานข้อมูล

require_once 'connect.php';

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

$stmt = $conn->prepare("SELECT* FROM tbl_product");

$stmt->execute();

$result = $stmt->fetchAll();

foreach($result as $row) {

<img src="upload/<?= $row['product_img'];?>" width="100%"><br>

<?= $row['product_name'];?> ราคา

<?= number_format($row['product_price'],2);?>

บาท <br>

คงเหลือ <?= $row['product_qty'];?> คัน <br>

<?php if($row['product_qty'] > 0){

echo '<a href="#" style="width:100%" class="btn btn-success btn-sm">สั่งซื้อ</a>';

}else{

echo '<a href="#" style="width:100%" class="btn btn-danger btn-sm disabled" > สินค้าหมด !!</a>';

}

</div>

<?php } ?>

<center>Basic PHP PDO แสดงสินค้าหน้าแรก by devbanban.com 2021

<br>

คอร์สออนไลน์ <a href="https://devbanban.com/?cat=250" title="click">click</a>

</center>

</div>

</body>

</html>

6.ผลการทำงาน

ลองเอาไปประยุกต์ใช้ดูครับ และฝากติดตาม workshop ต่อๆ ไปด้วยครับผม
Bootstrap5 : https://getbootstrap.com/
ฝึก SQL : https://www.w3schools.com/sql/default.asp
แหล่งศึกษา PDO เพิ่มเติม : https://websitebeaver.com/php-pdo-vs-mysqli
List of PDOStatement::bindParam data_type parameters : https://www.php.net/manual/en/pdo.constants.php

ขอแนะนำระบบพร้อมใช้งาน *รายละเอียดและราคาอยู่ใต้คลิป

ระบบพร้อมใช้ทั้งหมด คลิก

ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com ได้ที่

ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 878-0-17747-6
————————————————————————————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 406-359094-1

fanpage : https://www.facebook.com/sornwebsites/

devbanban

PHP PDO แสดงสินค้าหน้าแรกและตกแต่งด้วย Bootstrap5

Byพิศิษฐ์ บวรเลิศสุธี

Related

Related Post

ระบบบริหารบุคลากร ระบบ HR + ระบบบันทึกเวลาเข้างาน

ฟรีคลิปสอนทำเว็บไซต์ PHP PDO MySQL AdminLTE3 2024

ระบบหอพัก , อพาร์ทเม้นท์ รายวัน รายเดือน ราคาเบาๆ เอาไปต่อยอดได้ 2024

You missed