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,294 times, 196 visits today)
Related posts:
phpmyadmin : การสร้างและลบฐานข้อมูลเบื้องต้น
การเรียกข้อมูลมาแก้ไข Update, SQL, PHP
ตัวอย่างโปรเจค Validate Form PHP
bootstrap.6 สอนใช้งาน glyphicon ใน bootstrap ฟรี, ใส่ไอคอนหน้าเว็บ, Icon we...
ตัวอย่าง if, elseif, else แบบง่ายๆ ใช้ตรวจสอบสถานะการสั่งซื้อสินค้า PHP
Free Template 09 ฟอร์มเพิ่มสินค้า, form add product html+ Bootstrap
เว็บไซต์คณะวิทยาการจัดการ มรภ.ธนบุรี Version : 2017
Free Template 11 ฟอร์มเพิ่มข่าว Bootstrap + CKEditor + FREE CODE
เว็บไซต์สโมสรนักศึกษา คณะวิทยาการจัดการ มรภ.ธนบุรี
เว็บไซต์เช่าบ้าน/เช่าคอนโด/ขายบ้าน
