สวัสดีครับ ในบทความนี้จะแจกตัวอย่าง Code PHP PDO ฟอร์มเพิ่มข้อมูล Banner Slides และเรียกไปแสดงใน Bootstrap5 carousel (Slider) เพื่อทำส่วนการแสดงโปรโมชั่นหน้าเว็บสำหรับเว็บอีคอมเมิร์ชครับ มันเป็นลูกเล่นสำคัญที่ต้องมีทุกเว็บ !! และโค้ดจะรองรับ php7, php8 ฝึกไว้ครับเผื่อได้ใช้
ตัวอย่างระบบที่มีการเพิ่มข้อมูลสินค้าหรือการนำสไลด์มาแสดงหน้าเว็บ
1.เว็บอีคอมเมิร์ช คลิก
2.เว็บ FOOD POS ขายอาหารหน้าร้าน คลิก
3.เว็บ Coffee POS ขายกาแฟหน้าร้าน คลิก
4.หลังบ้านระบบอีคอมเมิร์ช คลิก
5.เว็บบริษัท / เว็บองค์กร คลิก
6.ระบบอื่นๆ เพิ่มเติม คลิก
รวมคลิปสอนปรับพื้นฐาน ภาษา php ฟรี 100 คลิป ++ https://devbanban.com/?p=3940
โค้ดประกอบด้วย
- PHP PDO
- MySQL SQL Insert, Query
- HTML
- Bootstrap5 Class : col, btn, form, carousel
- Sweet Alert
มาเริ่มทำ workshop กันครับ *คอมเม้นอยู่ในโค้ด
0.รวม Workshop PHP PDO ก่อนหน้าคลิก
1.ตารางเก็บข้อมูลตัวอย่างจะชื่อ tbl_slides ให้สร้างฐานข้อมูลก่อนครับ เช่น ฐานข้อมูลชื่อ 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 |
CREATE TABLE `tbl_slides` ( `no` int(11) NOT NULL, `slide_name` varchar(100) NOT NULL, `slide_link` text NOT NULL, `slide_img` varchar(100) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; INSERT INTO `tbl_slides` (`no`, `slide_name`, `slide_link`, `slide_img`) VALUES (1, 'รายการ Banner Slides', 'https://devbanban.com/?p=2867', 'banner.jpg'), (2, 'รายการ Banner Slides', 'https://devbanban.com/?p=2867', 'banner.jpg'), (3, 'รายการ Banner Slides', 'https://devbanban.com/?p=2867', 'banner.jpg'), (4, 'รายการ Banner Slides', 'https://devbanban.com/?p=2867', 'banner.jpg'), (5, 'PHP PDO ฟอร์มเพิ่มข้อมูล Banner Slides Bootstrap carousel', 'https://devbanban.com/?p=2867', 'banner.jpg'), (6, 'PHP PDO ฟอร์มเพิ่มข้อมูล Banner Slides Bootstrap carousel', 'https://devbanban.com/?p=2867', 'banner.jpg'); ALTER TABLE `tbl_slides` ADD PRIMARY KEY (`no`); ALTER TABLE `tbl_slides` MODIFY `no` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7; |
**ปล. หารูปมาใส่เองนะครับ ใส่ไว้ในโฟลเดอร์ upload ชื่อไฟล์ banner.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 = "yourpassword"; 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 บรรทัด 148)
5.ไฟล์ workshop ตั้งชื่อ formAddSlides.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 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 |
<!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"> <title>Basic PHP PDO Form add slide by devbanban.com 2021</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <!-- sweet alert --> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <br> <?php //ถ้ามีการส่งพารามิเตอร์ method get และ method get ชือ act = add จะแสดงฟอร์มเพิ่มข้อมูล if(isset($_GET['act']) && $_GET['act']=='add'){ ?> <h3>PHP PDO ฟอร์มเพิ่มข้อมูล Banner Slides Bootstrap carousel </h3> <form method="post" enctype="multipart/form-data"> ชื่อ slide <input type="text" name="slide_name" required class="form-control" placeholder="ชื่อ slide ข้อความ" minlength="4"> <br> Link <input type="url" name="slide_link" required class="form-control" value="https://devbanban.com/?p=2867" minlength="5"> <br> <font color="red">*อัพโหลดได้เฉพาะ .jpeg , .jpg , .png </font> <input type="file" name="slide_img" required class="form-control" accept="image/jpeg, image/png, image/jpg"> <br> <div class="row"> <div class="d-grid gap-2 col-sm-6"> <button type="submit" class="btn btn-primary">เพิ่มข้อมูล</button> </div> <div class="d-grid gap-2 col-sm-6"> <a href="formAddSlides.php" class="btn btn-warning">ยกเลิก</a> </div> </div> <br> </form> <?php } ?> <h3>รายการ Banner Slides <a href="formAddSlides.php?act=add" class="btn btn-info btn-sm">+slide</a> </h3> <!-- slide --> <?php //เรียกไฟล์เชื่อมต่อฐานข้อมูล require_once 'connect.php'; //คิวรี่ข้อมูลมาแสดงในตาราง $stmt = $conn->prepare("SELECT* FROM tbl_slides"); $stmt->execute(); $result = $stmt->fetchAll(); ?> <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <?php //กำหนด class active เพื่อเรียกใช้ button สำหรับคลิกสไลด์ $i=0; foreach($result as $row){ $actives=''; if($i==0){ $actives='active'; } ?> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="<?php echo $i;?>" class="<?php echo $actives;?>" aria-current="true" aria-label="Slide <?php echo $i;?>"></button> <?php $i++; } ?> </div> <div class="carousel-inner"> <?php //กำหนด class active สำหรับเรียกรูปมาแสดง $i=0; foreach($result as $row){ $actives=''; if($i==0){ $actives='active'; } ?> <div class="carousel-item <?php echo $actives;?>"> <a href="<?php echo $row['slide_link'];?>" target="_blank" title="คลิก"> <img src="upload/<?php echo $row['slide_img'];?>" class="d-block w-100" alt="..."> </a> <div class="carousel-caption d-none d-md-block"> <p><?php echo $row['slide_name'];?> <br> <a href="<?php echo $row['slide_link'];?>" target="_blank" title="คลิก" class="btn btn-info btn-sm"> more detail... </a></p> </div> </div> <?php $i++; } ?> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <!-- // slide --> <br> <center>Basic PHP PDO Form add slide by devbanban.com 2021 <br> คอร์สออนไลน์ <a href="https://devbanban.com/?cat=250" title="click">click</a></center> </div> </div> </div> </body> </html> <?php //code ส่วนของการเพิ่มข้อมูล // echo '<pre>'; // print_r($_POST); // echo '</pre>'; // exit(); //ตรวจสอบตัวแปรที่ส่งมาจากฟอร์ม if (isset($_POST['slide_name']) && isset($_POST['slide_link'])) { //ไฟล์เชื่อมต่อฐานข้อมูล require_once 'connect.php'; //สร้างตัวแปรวันที่เพื่อเอาไปตั้งชื่อไฟล์ใหม่ $date1 = date("Ymd_His"); //สร้างตัวแปรสุ่มตัวเลขเพื่อเอาไปตั้งชื่อไฟล์ที่อัพโหลดไม่ให้ชื่อไฟล์ซ้ำกัน $numrand = (mt_rand()); $slide_img = (isset($_POST['slide_img']) ? $_POST['slide_img'] : ''); $upload=$_FILES['slide_img']['name']; //มีการอัพโหลดไฟล์ if($upload !='') { //ตัดขื่อเอาเฉพาะนามสกุล $typefile = strrchr($_FILES['slide_img']['name'],"."); //สร้างเงื่อนไขตรวจสอบนามสกุลของไฟล์ที่อัพโหลดเข้ามา if($typefile =='.jpg' || $typefile =='.jpg' || $typefile =='.png'){ //โฟลเดอร์ที่เก็บไฟล์ $path="upload/"; //ตั้งชื่อไฟล์ใหม่เป็น สุ่มตัวเลข+วันที่ $newname = $numrand.$date1.$typefile; $path_copy=$path.$newname; //คัดลอกไฟล์ไปยังโฟลเดอร์ move_uploaded_file($_FILES['slide_img']['tmp_name'],$path_copy); //ประกาศตัวแปรรับค่าจากฟอร์ม $slide_name = $_POST['slide_name']; $slide_link = $_POST['slide_link']; //sql insert $stmt = $conn->prepare("INSERT INTO tbl_slides (slide_name, slide_link, slide_img) VALUES (:slide_name, :slide_link, '$newname')"); //bindParam data type $stmt->bindParam(':slide_name', $slide_name, PDO::PARAM_STR); $stmt->bindParam(':slide_link', $slide_link, PDO::PARAM_STR); $result = $stmt->execute(); $conn = null; //close connect db //เงื่อนไขตรวจสอบการเพิ่มข้อมูล if($result){ echo '<script> setTimeout(function() { swal({ title: "เพิ่มข้อมูลสำเร็จ", type: "success" }, function() { window.location = "formAddSlides.php"; //หน้าที่ต้องการให้กระโดดไป }); }, 1000); </script>'; }else{ echo '<script> setTimeout(function() { swal({ title: "เกิดข้อผิดพลาด", type: "error" }, function() { window.location = "formAddSlides.php"; //หน้าที่ต้องการให้กระโดดไป }); }, 1000); </script>'; } //else ของ if result }else{ //ถ้าไฟล์ที่อัพโหลดไม่ตรงตามที่กำหนด echo '<script> setTimeout(function() { swal({ title: "คุณอัพโหลดไฟล์ไม่ถูกต้อง", type: "error" }, function() { window.location = "formAddSlides.php"; //หน้าที่ต้องการให้กระโดดไป }); }, 1000); </script>'; } //else ของเช็คนามสกุลไฟล์ } // if($upload !='') { } //isset ?> |
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/