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 11,918 times, 81 visits today)
Related posts:
AJAX เช็คข้อมูลการสมัครสมาชิก PHP
ตัวอย่าง if, elseif, else แบบง่ายๆ ใช้ตรวจสอบสถานะการสั่งซื้อสินค้า PHP
WEB.6 โปรแกรมแสดงข้อมูลจาก database แบบมีการแบ่งหน้าและแสดงผลรวมของข้อมูล[d...
แก้ Deprecated: Function mysql_db_query() is deprecated in
WEB.22 โปรแกรมแสดงข้อมูลสินค้า DW+ php + database
Free Template 13 ฟอร์มเพิ่มข้อมูลสมาชิก + code ตัวอย่าง แบบเรียบง่าย
Free Template 16 : Free Backend design by bootstrap + google chart
DataTable + PHP + mysqli
เว็บไซต์ : สาขาการจัดการชุมชน มหาวิทยาลัยราชภัฏธนบุรี 2017
PHP+MySqli : ตย.PHP+MySqli : ระบบค้นหาข้อมูลจากตารางมากกว่า 1 Column โดยรับ...
