สวัสดีครับ ในบทความนี้จะแจกตัวอย่าง Code PHP PDO แสดงสินค้าหน้าแรก และระบบค้นหาสินค้า โดยใช้ SQL LIKE เพื่อประยุกต์ใช้ทำเว็บอีคอมเมิร์ช เว็บขายสินค้าออนไลน์ เว็บแคตตาล็อคสินค้า และตกแต่งให้สวยงามด้วย Bootstrap5 โค้ดจะรองรับ php7, php8 ฝึกไว้ครับเผื่อได้ใช้
ตัวอย่างระบบที่มีการแสดงข้อมูลสินค้า
1.เว็บอีคอมเมิร์ช คลิก
2.เว็บ FOOD POS ขายอาหารหน้าร้าน คลิก
3.เว็บ Coffee POS ขายกาแฟหน้าร้าน คลิก
4.หลังบ้านระบบอีคอมเมิร์ช คลิก
5.เว็บบริษัท / เว็บองค์กร คลิก
6.ระบบอื่นๆ เพิ่มเติม คลิก
รวมคลิปสอนปรับพื้นฐาน ภาษา php ฟรี 100 คลิป ++ https://devbanban.com/?p=3940
โค้ดประกอบด้วย
- PHP PDO
- MySQL SQL Query, LIKE
- HTML
- Bootstrap5 Class : col, table, form, button, alert
มาเริ่มทำ workshop กันครับ *คอมเม้นอยู่ในโค้ด
0.รวม Workshop PHP PDO ก่อนหน้าคลิก
1.ตารางเก็บข้อมูลตัวอย่างจะชื่อ tbl_product ให้สร้างฐานข้อมูลก่อนครับ เช่น ฐานข้อมูลชื่อ workshop_pdo จากนั้นไปที่เมนู sql คัดลอกโค้ดไปวางและ go
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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, 'ฟอร์ด Mustang 2021', 4500000, 'prd.jpg', 5), (3, 'รถ Ford มัสแตง 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 มัสแตง 2021', 4500000, 'prd.jpg', 0), (8, 'ฟอร์ด 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?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 บรรทัด 64)
5.ไฟล์ workshop ตั้งชื่อ showProductAndSearch.php หรือแล้วแต่ เช่น index.php *มีคอมเม้นเพิ่มเติมใน code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<?php //เรียกไฟล์เชื่อมต่อฐานข้อมูล require_once 'connect.php'; //สร้างเงื่อนไขตรวจสอบถ้ามีการค้นหาให้แสดงเฉพาะรายการค้นหา if (isset($_GET['q']) && $_GET['q']!='') { //ประกาศตัวแปรรับค่าจากฟอร์ม $q = "%{$_GET['q']}%"; //คิวรี่ข้อมูลมาแสดงจากการค้นหา $stmt = $conn->prepare("SELECT* FROM tbl_product WHERE product_name LIKE ?"); $stmt->execute([$q]); $stmt->execute(); $result = $stmt->fetchAll(); }else{ //คิวรี่ข้อมูลมาแสดงตามปกติ *แสดงทั้งหมด $stmt = $conn->prepare("SELECT* FROM tbl_product"); $stmt->execute(); $result = $stmt->fetchAll(); } ?> <!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"> <b> PHP PDO แสดงสินค้าหน้าแรก และระบบค้นหาสินค้า </b> </div> <form action="showProductAndSearch.php" method="get"> <div class="mb-3 row"> <!-- d-none d-sm-block คือซ่อนเมื่ออยู่หน้าจอโทรศัพท์ --> <label class="col-2 col-sm-1 col-form-label d-none d-sm-block">ค้นหาข้อมูล</label> <div class="col-7 col-sm-5"> <input type="text" name="q" required class="form-control" placeholder="ระบุชื่อสินค้าที่ต้องการค้นหา" value="<?php if (isset($_GET['q'])) { echo $_GET['q'];}?>"> </div> <div class="col-2 col-sm-1"> <button type="submit" class="btn btn-primary">ค้นหา</button> </div> <div class="col-2 col-sm-1"> <a href="showProductAndSearch.php" class="btn btn-warning">Reset</a> </div> </div> </form> <?php //แสดงข้อความที่ค้นหา if (isset($_GET['q']) && $_GET['q']!='') { echo '<font color="red"> ข้อมูลการค้นหา : '.$_GET['q']; echo ' *พบ '. $stmt->rowCount().' รายการ</font><br><br>'; }?> </div> <?php 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'];?> <font color="blue"> QTY <?= $row['product_qty'];?> คัน </font> <br> ราคา <?= number_format($row['product_price'],2);?> บาท <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> |
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/