WE.21 โปรแกรมเพิ่มสินค้า+อัพโหลดภาพสินค้า DW+ php + database
จาก workshop นี้เป็นต้นไปจะเอา workshop ที่ 1-20 มารวมกันให้เป็นระบบแคตตาล็อคสินค้าออนไลน์นะครับ สำหรับใครที่เพิ่งมาดู workshop นี้และติดปัญหา !!! ให้กลับไปดู WE 1-20 ก่อนนะครับแล้วค่อยทำตาม เพราะผมจะพาทำต่อไปเรื่อยๆครับ
WE.21 จะเป็นโปรแกรมเพิ่มสินค้า รายละเอียด ราคา และภาพสินค้าเข้าไปในฐานข้อมูลแบบง่ายๆกันนะครับ
เริ่มต้นด้วยการสร้างฐานข้อมูลก่อนนะครับ และเอา code ด้านล่าง ภาษา sql ไปวาง ก็จะได้ตารางไว้เก็บข้อมูลสินค้าครับ
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 |
-- -- Table structure for table `tbl_product` -- CREATE TABLE IF NOT EXISTS `tbl_product` ( `p_id` int(11) NOT NULL, `p_name` varchar(200) CHARACTER SET utf8 COLLATE utf8_german2_ci NOT NULL, `p_detail` text CHARACTER SET utf8 NOT NULL, `p_price` float NOT NULL, `p_img` varchar(200) CHARACTER SET utf8 DEFAULT NULL, `date_save` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='table product'; -- -- Indexes for dumped tables -- -- -- Indexes for table `tbl_product` -- ALTER TABLE `tbl_product` ADD PRIMARY KEY (`p_id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `tbl_product` -- ALTER TABLE `tbl_product` MODIFY `p_id` int(11) NOT NULL AUTO_INCREMENT; |
ไฟล์เชื่อมต่อฐานข้อมูล (ดูได้จาก WE แรกๆ นะครับจะสอนวิธีเชื่อมต่อกับฐานข้อมูลโดยใช้ Dreamweaver
condb.php
1 2 3 4 5 6 7 8 9 10 11 |
<?php # FileName="Connection_php_mysql.htm" # Type="MYSQL" # HTTP="true" $hostname_condb = "localhost"; $database_condb = "devbanban"; $username_condb = "root"; $password_condb = "devbanban"; $condb = mysql_pconnect($hostname_condb, $username_condb, $password_condb) or trigger_error(mysql_error(),E_USER_ERROR); mysql_query("SET NAMES UTF8"); ?> |
ฟอร์มเพิ่มสินค้า (action ไปที่ไฟล์ add_product_db.php) เพื่อเพิ่มสินค้าลงในฐานข้อมูล และอย่าลืมสร้างโฟลเดอร์ img ไว้เก็บไฟล์ภาพสินค้าด้วยนะครับ
add_product.php
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 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>devbanban.com</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <br /> <h4 align="center"> ฟอร์มเพิ่มสินค้า </h4> <hr /> <form action="add_product_db.php" method="POST" enctype="multipart/form-data" name="addprd" class="form-horizontal" id="addprd"> <div class="form-group"> <div class="col-sm-12"> <p> ชื่อสินค้า</p> <input type="text" name="p_name" class="form-control" required placeholder="ชื่อสินค้า" /> </div> </div> <div class="form-group"> <div class="col-sm-12"> <p> รายละเอียดสินค้า </p> <textarea name="p_detail" class="form-control" rows="3" required placeholder="รายละเอียดสินค้า"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-3"> <p> ราคา (บาท) </p> <input type="number" name="p_price" class="form-control" required placeholder="ราคา" /> </div> <div class="col-sm-8 info"> <p> ภาพสินค้า </p> <input type="file" name="p_img" class="form-control" /> </div> </div> <div class="form-group"> <div class="col-sm-12"> <button type="submit" class="btn btn-primary" name="btnadd"> + เพิ่มสินค้า </button> </div> </div> </form> </div> </div> </div> <p align="center"> design by devbanban.com </p> </body> </html> |
add_product_db.php
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 |
<meta charset="UTF-8" /> <?php require_once('condb.php'); //Set ว/ด/ป เวลา ให้เป็นของประเทศไทย date_default_timezone_set('Asia/Bangkok'); //สร้างตัวแปรวันที่เพื่อเอาไปตั้งชื่อไฟล์ที่อัพโหลด $date1 = date("Ymd_His"); //สร้างตัวแปรสุ่มตัวเลขเพื่อเอาไปตั้งชื่อไฟล์ที่อัพโหลดไม่ให้ชื่อไฟล์ซ้ำกัน $numrand = (mt_rand()); //รับชื่อไฟล์จากฟอร์ม $p_name = $_POST['p_name']; $p_detail = $_POST['p_detail']; $p_price = $_POST['p_price']; $p_img = (isset($_POST['p_img']) ? $_POST['p_img'] : ''); $upload=$_FILES['p_img']; if($upload <> '') { //โฟลเดอร์ที่เก็บไฟล์ $path="img/"; //ตัวขื่อกับนามสกุลภาพออกจากกัน $type = strrchr($_FILES['p_img']['name'],"."); //ตั้งชื่อไฟล์ใหม่เป็น สุ่มตัวเลข+วันที่ $newname =$numrand.$date1.$type; $path_copy=$path.$newname; $path_link="img/".$newname; //คัดลอกไฟล์ไปยังโฟลเดอร์ move_uploaded_file($_FILES['p_img']['tmp_name'],$path_copy); } $sql = "INSERT INTO tbl_product (p_name, p_detail, p_price, p_img) VALUES ('$p_name', '$p_detail', '$p_price', '$newname')"; $result = mysql_db_query($database_condb, $sql) or die ("Error in query: $sql " . mysql_error()); mysql_close(); if($result){ echo "<script type='text/javascript'>"; echo "alert('เพิ่มสินค้าเรียบร้อย');"; echo "window.location='add_product.php';"; echo "</script>"; } else{ echo "<script type='text/javascript'>"; echo "window.location='add_product.php';"; echo "</script>"; } ?> |
คลิปทั้งหมด
ปล.งดให้คำปรึกษาการเขียนเว็บด้วย adobe dreamweaver แล้วครับ
ไปฝึกเขียนแบบใหม่ดีกว่าครับ คลิปสอนคลิก
devbanban.com