สวัสดีครับ ในบทความนี้จะแจกตัวอย่าง PHP PDO Single Row ตัวอย่างหน้าแสดงรายละเอียดสินค้า และตกแต่งด้วย Bootstrap5 เพื่อให้ดูง่ายและสวยงาม โค้ดจะรองรับ php7, php8 ฝึกไว้ครับ เผื่อได้ใช้
ขอแนะนำระบบพร้อมใช้ ราคาถูก ได้ Code + Database ทั้งหมด
1.เว็บอีคอมเมิร์ช คลิก
2.เว็บ FOOD POS ขายอาหารหน้าร้าน คลิก
3.เว็บ Coffee POS ขายกาแฟหน้าร้าน คลิก
4.หลังบ้านระบบอีคอมเมิร์ช คลิก
5.เว็บบริษัท / เว็บองค์กร คลิก
6.ระบบหอพัก โปรแกรมหอพัก คลิก
7.ระบบยืมคืน เบิกจ่ายพัสดุ ครุภัณฑ์ คลิก
8.ระบบแจ้งซ่อมสำหรับองค์กร คลิก
9.ระบบกระเป๋าตังค์ คลิก
10.ระบบฐานข้อมูลวิจัย คลังข้อมูลวิจัย ฐานข้อมูลวิทยานิพนธ์ Research Corpus คลิก
11.ระบบอื่นๆ เพิ่มเติม คลิก
รวมคลิปสอนปรับพื้นฐาน ภาษา php ฟรี 100 คลิป ++ https://devbanban.com/?p=3940
โค้ดประกอบด้วย
- PHP PDO
- MySQL SQL Query
- HTML
- Bootstrap5 Class : col
มาเริ่มทำ 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 |
CREATE TABLE `tbl_product` ( `no` int(11) NOT NULL, `product_name` varchar(100) NOT NULL, `product_detail` text NOT NULL COMMENT 'รายละเอียดสินค้า', `product_price` int(16) NOT NULL, `product_img` varchar(100) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; INSERT INTO `tbl_product` (`no`, `product_name`, `product_detail`, `product_price`, `product_img`) VALUES (1, 'Ford Mustang 2022', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.', 4500000, 'prd.jpg'), (2, 'ฟอร์ด มัสแตง 2021', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.', 4500000, 'prd.jpg'), (3, 'Ford Mustang 2021', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.', 6500000, 'prd.jpg'), (4, 'Ford มัสแตง 2021', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.', 4500000, 'prd.jpg'), (5, 'Ford Mustang 2021', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.', 5500000, 'prd.jpg'), (6, 'ฟอร์ด Mustang 2021', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.', 4500000, 'prd.jpg'), (7, 'รถ Ford Mustang 2021', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.', 4500000, 'prd.jpg'), (8, 'Ford Mustang 2019', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.', 4500000, 'prd.jpg'); 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 = "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
5.ไฟล์ workshop ตั้งชื่อ showProduct.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 |
<!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'; //คิวรี่ข้อมูลมาแสดงในตาราง $stmtPrd = $conn->prepare("SELECT* FROM tbl_product"); $stmtPrd->execute(); $rsPrd = $stmtPrd->fetchAll(); foreach($rsPrd as $row) { ?> <div class="col-sm-3" style="margin-bottom:50px;"> <img src="upload/<?= $row['product_img'];?>" width="100%"><br> <?= $row['product_name'];?><br> <font color="red"> ราคา <?= number_format($row['product_price'],2);?> บาท </font> <a href="productDetail.php?no=<?=$row['no'];?>" class="btn btn-info btn-sm">read more</a> </div> <!-- //col --> <?php } ?> <br><br> <center> คอร์สออนไลน์ <a href="https://devbanban.com/?cat=250" title="click">click</a> </center> </div> </div> </div> </body> </html> |
6.ไฟล์ workshop ตั้งชื่อ productDetail.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 |
<?php //เงื่อนตรวจสอบการส่ง method get parameter no if(isset($_GET['no'])){ require_once 'connect.php'; //sql query product detail *คิวรี่แบบ Single row ก็คือแสดงแค่ 1 รายการเท่านั้น $stmtPrdD = $conn->prepare("SELECT * FROM tbl_product WHERE no=:no"); //bindParam str , int $stmtPrdD->bindParam(':no', $_GET['no'] , PDO::PARAM_INT); $stmtPrdD->execute(); $rowPrdD = $stmtPrdD->fetch(PDO::FETCH_ASSOC); //แสดงจำนวนการคิวรี่ข้อมูลได้ คิวรี่ได้ต้องได้ 1 //echo $stmtPrdD->rowCount(); //เปิดคอมเม้นดูครับ //ถ้าคิวรี่ผิดพลาดให้กลับไปหน้าแสดงสินค้า if($stmtPrdD->rowCount() != 1){ header('Location: showProduct.php'); exit(); } }//isset ?> <!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-12 col-sm-12"> <div class="alert alert-primary" role="alert"> หน้าแสดงรายละเอียดสินค้า <a href="showProduct.php" class="btn btn-info btn-sm">ย้อนกลับ</a> </div> </div> <div class="col-12 col-sm-4"> <img src="upload/<?= $rowPrdD['product_img'];?>" width="100%"> </div> <div class="col-12 col-sm-8"> <h4> <?= $rowPrdD['product_name'];?> </h4> <font color="red"> ราคา <?= number_format($rowPrdD['product_price'],2);?> บาท </font> <br> <b>รายละเอียดสินค้า</b> <br> <?= $rowPrdD['product_detail'];?> </div> <!-- //col --> <br><br> <center> คอร์สออนไลน์ <a href="https://devbanban.com/?cat=250" title="click">click</a> </center> </div> </div> </div> </body> </html> |
7.ผลการทำงาน
ลองเอาไปประยุกต์ใช้ดูครับ และฝากติดตาม 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/