การทำ Webboard ด้วย PHP MySQL ตอนที่ 2 การแยกส่วนต่างๆของเว็บดีไซน์และการเชื่อมต่อกับฐานข้อมูล

     หลังจากที่ได้Designเว็บเสร็จแล้ว ต่อไปผมจะสอนแยกส่วนต่างๆของเว็บที่เราดีไซน์ให้ออกเป็นส่วนๆ เพื่อง่ายต่อการแก้ไขการดีไซน์หรือข้อมูลในอนาคต เราจะแยกส่วนออกเป็นดังนี้

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();
}
?>