ใน workshop นี้จะพาทำหน้าแสดงรายละเอียดของสินค้า และมีการใช้ bootstrap ในการช่วยออกแบบโครงของหน้าเว็บ (Layout) อย่างง่ายๆ โดยจะแสดงสินค้าจากฐานข้อมูลของเรา และรองรับการใช้งานบนหลายๆ อุปกรณ์ (Responsive) และมีการเก็บจำนวนการเข้าชมสินค้าแต่ละตัวด้วย
มาดูโค๊ดตัวอย่างเทมเพลต ต่อจาก WEB 23
|
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 |
<!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"> <title>devbanban.com</title> <?php include('bootstrap_h.php');?> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <?php include('menu.php');?> </div> <!-- close col--> </div> <!-- close row--> </div> <!-- close container--> <!-- start show product detail --> <div class="container"> <div class="row" align="center"> <div class="col-xs-12 col-sm-4 col-md-3"> <!-- show product img --> </div> <div class="col-xs-12 col-sm-8 col-md-9"> <!-- show product detail --> </div> </div> </div> <!-- end show product detail --> <!-- start footer--> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <?php include('footer.php');?> </div> </div> </div> <!-- end footer--> <?php include('script.php');?> </body> </html> |
code นับจำนวนการเข้าชมสินค้า
|
1 2 3 4 5 6 7 8 |
//update product view $p_id = $row_showproduct['p_id']; $p_view = $row_showproduct['p_view']; $count = $p_view + 1; $sql= "UPDATE tbl_product SET p_view=$count WHERE p_id = $p_id"; mysql_db_query($database_condb,$sql); // |
ให้สร้างฟิลด์เพิ่มในตารางสินค้าของเรา ชื่อฟิลด์คือ p_view เพื่อใช้สำหรับเก็บสถิติการเข้าชมสินค้าแต่ละตัว ให้สังเกต $row_showproduct คำว่า “showproduct” คือชื่อของ Recordset ที่ได้สร้างไว้
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 |
<!-- start show product detail --> <div class="container"> <div class="row" align="left"> <h3 align="center"> แสดงรายละเอียดสินค้า </h3> <div class="col-xs-12 col-sm-4 col-md-4"> <!-- show product img --> <img src="img/<?php echo $row_showproduct['p_img']; ?>" width="100%" class="img-thumbnail"> </div> <div class="col-xs-12 col-sm-8 col-md-8"> <!-- show product detail --> <h3> <?php echo $row_showproduct['p_name']; ?> <font color="blue"> <?php echo number_format($row_showproduct['p_price'],2); ?> </font> บาท <a href="#" class="btn btn-info"> <span class="glyphicon glyphicon-shopping-cart"> </span> หยิบใส่ตะกร้า </a> </h3 <p style="font-size: 13pt"> <b> รายละเอียดสินค้า :</b> <?php echo $row_showproduct['p_detail']; ?> </p> <p align="left"> <span class="glyphicon glyphicon-eye-open"> </span> <span class="badge"><?php echo $row_showproduct['p_view']; ?> </span> ครั้ง </p> <!-- อันนี้ต้องสมัครเองนะครับ --> <p align="right"> <!-- Go to www.addthis.com/dashboard to customize your tools --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5500ee80057fdb99"></script> <!-- Go to www.addthis.com/dashboard to customize your tools --> <div class="addthis_inline_share_toolbox_r64r"></div> </p> </div> </div> </div> <!-- end show product detail --> |
ผลการทำงาน
คลิปทั้งหมด
ปล.งดให้คำปรึกษาการเขียนเว็บด้วย adobe dreamweaver แล้วครับ
ไปฝึกเขียนแบบใหม่ดีกว่าครับ คลิปสอนคลิก