1.โฟลเดอร์ css ให้สร้างไฟล์ main.css ให้พิมพ์โค๊ดดังนี้
body{ background:#E8E8E8; font-family:Tahoma, Geneva, sans-serif; font-size:14px; color:#828282; } .ws-content h1{ font-size:14px; line-height: 1; border-bottom:1px dashed #0075EA; padding:5px; margin:5px 0px 10px 0px; font-weight:bold; color:#0075EA; } .container{ margin-top:2px; color:#646464; } .ws-name{ font-size:3em; } .ws-head{ margin-top:50px; padding-bottom:5px; background:#DBDBDB; color:#666; } .ws-footer{ color: #666666; font-size: 0.8em; text-align:center; margin-top:10px; } .ws-content{ margin-top:3px; } table{ font-size:14px; } table th{ color:#666666; }
2.footer.php เป็นไฟล์ส่วนท้ายของเว็บ ให้พิมพ์โค๊ดดังนี้
<div class="row"><div class="ws-footer">Copy Right 2014 MyWebboard By php-for-ecommerce.blogspot.com</div></div>
3.head.php เป็นไฟล์ที่เก็บคำสั่งเกี่ยวกับการเชื่อมต่อกับไฟล์ css และ javascript ให้พิมพ์โค๊ดดังนี้
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="css/main.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> <!--[if lt IE 9]><script src="http://getbootstrap.com/assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
4.header.php เป็นไฟล์ที่ใช้แสดงส่วนหัวของเว็บไซน์ ให้พิมพ์โค๊ดดังนี้
<div class="row ws-head"> <div class="col-xs-12 col-sm-12"> <div class="ws-name"><span style="color:#333333;">MY</span><span style="color:#3399CC">WEBBOARD</span></div> <div><span style="color:#828282">เว็บบอร์ด ถาม-ตอบ การพัฒนาเว็บไซต์ด้วย PHP JQuery MysQL</span></div> </div> </div>
5.menu.php เป็นไฟล์สำหรับแสดงเมนูของเว็บไซต์ ให้พิมพ์โค๊ดดังนี้
<div class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color:#E1E1E1;"> <div class="container"> <div class="row"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="index.php">Home</a></li> <?php if (empty($_SESSION['mem_id'])) { ?> <li><a href="login.php">เข้าสู่ระบบ</a></li> <li><a href="register.php">สมัครสมาชิก</a></li> <?php } else { ?> <li> <a href="#">ยินดีต้อนรับ : <b><?php echo $_SESSION['mem_name']; ?></b></a></li> <?php if ($_SESSION['mem_level'] == 1) { ?> <li> <a href="category.php">จัดการหมวดกระทู้</a></li> <?php } ?> <li><a href="logout.php">ออกจากระบบ</a></li> <?php } ?> </ul> </div> </div> </div> </div>
เมื่อเราได้สร้างไฟล์ทั้ง 5 ไฟล์เสร็จแล้ว ต่อไปเราจะทดสอบกันว่าเราสร้างไฟล์เหล่านี้ถูกต้องหรือไม่ ให้สร้างไฟล์ index.php และพิมพ์โค๊ดดังนี้
<?php session_start(); ?> <html> <head> <?php require('head.php'); ?> <title>สอนทำเว็บบอร์ดด้วย PHP + MySQL + Bootstrap</title> </head> <body> <?php require('menu.php'); ?> <div class="container"> <?php require('header.php'); ?> <div class="row ws-content"> <table class="table table-bordered table-hover"> <thead> <tr><th>#</th><th>ชื่อกระทู้</th><th class="hidden-xs">ความคิดเห็น</th><th class="hidden-xs">เข้าชม</th><th>ตอบล่าสุด</th></tr> </thead> <tbody> <tr><td>#</td> <td><a href="#">xxxxx xxxxxxxxxx xxxxxxxxx xxx xxxxxxxx xxxxxx</a></td><td class="hidden-xs">100</td><td class="hidden-xs">999</td><td>ล่าสุด</td></tr> <tr><td>#</td> <td>xxxxxxxx xxxxxxxx xxxxxxxx xxxxxx xxxxxxxxxxxxxxx</td><td class="hidden-xs">100</td><td class="hidden-xs">999</td><td>ล่าสุด</td></tr> <tr><td>#</td> <td>xxxxxxxx xxxxxx xxxxxxxx xxxxxx xxxxxx xxxxx</td><td class="hidden-xs">100</td><td class="hidden-xs">999</td><td>ล่าสุด</td></tr> <tr><td>#</td> <td>xxxxxxx xxxx xxxxxxxxxx xxxxxxxxxxx xxxxxxxx</td><td class="hidden-xs">100</td><td class="hidden-xs">999</td><td>ล่าสุด</td></tr> <tr><td>#</td> <td>xxxxxxx xxxx xxxxxx xxx xxxxxxx xxxxxx</td><td class="hidden-xs">100</td><td class="hidden-xs">999</td><td>ล่าสุด</td></tr> <tr><td>#</td> <td>xxxxx xxxxxxxxxxxx xxxxxxxxxx xxxxxxxxx xxxxx xxxxx xxxxxxxx</td><td class="hidden-xs">100</td><td class="hidden-xs">999</td><td>ล่าสุด</td></tr> <tr><td>#</td> <td>xxxxx xxxxxxx xxxxxx xxxxxxxxx xxxxxxx xxxxx</td><td class="hidden-xs">100</td><td class="hidden-xs">999</td><td>ล่าสุด</td></tr> </tbody> </table> </div> <?php require('footer.php'); ?> </div> </body> </html>
จะได้ผลลัพธุ์ดังนี้
ปล.ขอเพิ่มเติมคำสั่งเชื่อมต่อกับฐานข้อมูล กับไฟล์ตรวจสอบสิทธิการเข้าใช้งานของแอดมิน ในบทความนี้ครับ ให้สร้างไฟล์ connectdb.php ในโฟลเดอร์ bin ให้ใช้พิมพ์คำสั่งดังนี้
<?php $hostname = "localhost";//ชื่อHost $database = "db_wb";//ชื่อฐานข้อมูล $username = "root";//username ของฐานข้อมูลของท่าน $password = "";//รหัสผ่านของฐานข้อมูลของท่าน $connectdb = mysql_connect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR); mysql_select_db($database); mysql_query("SET character_set_results=utf8"); mysql_query("SET collation_connection=utf8"); mysql_query("SET NAMES 'utf8'"); ?>
จากนั้นให้สร้างไฟล์ check_admin.php ในตำแหน่งเดียวกับไฟล์ index.php สำหรับไว้ตรวจสอบสิทธิการเข้าใช้งานของผู้ดูแลระบบในหน้านั้นๆเช่น หน้าจัดการหมวดสินค้า ซึ่งแอดมินเท่านั้นที่สามารถเข้าไปเพิ่ม/ลบ/แก้ไขข้อมูลได้ เป็นต้น ให้พิมพ์โค๊ดดังนี้
<?php if($_SESSION['mem_level']!=1){//หากไม่ใช่ admin header('Location:index.php'); //ให้รีไดเร็คไปหน้า index.php exit(); } ?>
ไม่มีความคิดเห็น :
แสดงความคิดเห็น