WEB.23 โปรแกรมแสดงสินค้าหน้าแรก (index) DW+ php + database
ใน workshop นี้จะพาทำหน้าแรกของเว็บไซต์ และมีการใช้ bootstrap ในการช่วยออกแบบโครงของหน้าเว็บ (Layout) อย่างง่ายๆ โดยจะแสดงสินค้าจากฐานข้อมูลของเรา และรองรับการใช้งานบนหลายๆ อุปกรณ์ (Responsive)
มาดูโค๊ดตัวอย่างเทมเพลตของเรา ในโค๊ดนี้จะรวมกันเป็นไฟล์เดียว แต่ผมจะพาแยกทุกอย่างออกเป็นส่วนๆ และนำมา include อีกที เพราะว่าถ้าเราใส่โค๊ดแบบนี้ รวมทั้งเมนู ส่วนแสดงสินค้า และส่วนท้าย (Footer) อยู่ด้วยกันทั้งหมด เวลาเราทำเว็บไปหลายๆหน้าเราก็ต้องตามแก้ทุกหน้า ซึ่งมันเสียเวลามากๆ เพราะฉะนั้นเราแยกเป็นไฟล์ๆ แยกเป็นส่วนๆดีกว่า เวลาแก้ก็แก้แค่ไฟล์เดียวและเปลี่ยนตามทุกหน้า ดูตามคลิปนะครับ ^_^
index.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 69 70 71 72 73 74 75 76 77 78 79 |
<!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> <!-- 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"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <!--start menu --> <div class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">devbanban.com</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">หน้าหลัก</a></li> <li><a href="#">วิธีซื้อสินค้า</a></li> <li><a href="#">วิธีชำระเงิน</a></li> <li><a href="#">ติดต่อ</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Login</a></li> </ul> </div><!-- /.navbar-collapse --> </div> <!--end menu--> </div> <!-- close col--> </div> <!-- close row--> </div> <!-- close container--> <!-- start show product --> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3"> <h1> ส่วนแสดงสินค้า </h1> </div> </div> </div> <!-- end show product --> <!-- start footer--> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <hr/> <p align="center"> ร้านค้าออนไลน์ devbanban.com @ 2016 </p> </div> </div> </div> <!-- end footer--> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html> |
ตอนที่ 1
ตอนที่ 2
code หน้า index ที่มีการ include แล้ว
|
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> <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 --> <div class="container"> <div class="row" align="center"> <?php include('showproduct_index.php');?> </div> </div> <!-- end show product --> <!-- 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> |
ติดตรงไหนไปคุยกันที่แฟนเพจนะครับ ^_^
https://www.facebook.com/sornwebsites/
(Visited 12,333 times, 31 visits today)
Related posts:
Array ตัดค่าซ้ำออก, Array_unique PHP
ตัวอย่าง if, elseif, else แบบง่ายๆ ใช้ตรวจสอบสถานะการสั่งซื้อสินค้า PHP
PHP+Mysql : โปรแกรมอัพโหลดภาพทีละหลายๆภาพด้วย Ajax+PHP+Database , Multiple ...
เว็บไซต์คณะวิทยาการจัดการ มรภ.ธนบุรี Version: 2016
เว็บไซต์คณะครุศาสตร์ มรภ.ธนบุรี
วิทยากรสอนนักศึกษาสาขาคอมพิวเตอร์ธุรกิจ มรภ.ธนบุรี ทำเว็บไซต์ด้วย bootstrap...
ระบบประเมินอาจารย์ที่ปรึกษาออนไลน์ ใช้งานภายในมหาวิทยาลัย
Review : Materializecss Front-end Framework
DataTable + PHP + mysqli
SQL: php+mysqli INNER JOIN 2 TABLE
