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 10,277 times, 110 visits today)
Related posts:
การบันทึกข้อมูลและเข้ารหัสแบบ MD5 PHP+Mysqli
bootstrap.7 สอนใช้งาน bootstrap3 ฟรี, Boostrap Class Visible & Hidden
bootstrap.11สอนใช้ bootstrap class modal, ทำ popup หน้าเว็บ [พร้อม code]
Free Template 01 Index.html + code ตัวอย่าง
Free Template 16 : Free Backend design by bootstrap + google chart
เว็บกองทุนหมู่บ้าน กองทุนเงินกู้ยืม
Codeigniter : Basic login with database
ระบบมอบหมายงานออนไลน์ คณะวิทยาการจัดการ ม.ราชภัฏธนบุรี
PHP+Mysqli : CRUD WITH MODAL, เพิ่ม ลบ แสดง แก้ไขด้วย Bootstrap Modal
SQL: php+mysqli INNER JOIN 2 TABLE
