วันพฤหัสบดีที่ 7 สิงหาคม พ.ศ. 2557

สอนทำ Webboard ด้วย PHP MySQL ตอนที่ 4 เพิ่ม/แสดง/ลบ/แก้ไข หมวดกระทู้ และแสดงหมวดกระทู้ในหน้าโฮมเพจ

     บทความนี้จะสอนเขียนโค๊ด จัดการกับหมวดหมู่กระทู้ของ Webboard กันครับ เพื่อนำข้อมูลของหมวดกระทู้ มาแสดงผลในหน้าเว็บหลัก หรือหน้าโฮมเพจของเรานั่นเอง ตามที่ผมได้ออกแบบไว้ตั้งแต่ตอนที่ 1 บทความนี้จะสอนในส่วนของการ เพิ่ม ,ลบ,แก้ไข ,แสดงหมวดกระทู้ ซึ่งจะเป็นส่วนจัดการของผู้ดูแลระบบ สมาชิกไม่สามารถเข้ามาจัดการในส่วนนี้ได้

1.เริ่มกันที่ไฟล์แรกคือ ไฟล์ category_add.php  เป็นไฟล์สำหรับให้แอดมินเพิ่มข้อมูลหมวดกระทู้  ให้สร้างไฟล์นี้ไว้ตำแหน่งเดียวกับไฟล์ index.php ให้พิมพ์คำสั่งดังนี้

<?php
session_start();
require('check_admin.php');
if(!empty($_POST['btSave'])){//มีการคลิกที่ปุ่มบันทึก
    require('bin/connectdb.php');//เรียกไฟล์เชื่อมต่อกับฐานข้อมูล
    $msgError='';
    if(!empty($_POST['cg_name'])){
        $cg_name=$_POST['cg_name'];//ชื่อหมวด
        $cg_des=$_POST['cg_des'];//คำอธิบายหมวด
  $cg_order=$_POST['cg_order'];//เรียงลำดับการแสดงผล
  mysql_query("INSERT INTO tbl_category(cg_name,cg_des,cg_order) VALUES('$cg_name','$cg_des','$cg_order')");              
    }else{
        $msgError.="กรุณากรอกชื่อหมวดกระทู้ด้วย <br>";
    }
    if(empty($msgError)){
  //หากสมาชิกพิมพ์ข้อมูลถูกต้อง ให้Redirect หน้าไปที่ไฟล์ category.php
        header("Location:category.php");
    }else{
  //หากกรอกข้อมูลไม่ถูกต้อง ให้สร้างตัวแปร session มารับค่าเพื่อแจ้งให้ทราบถึงปัญหาที่เกิดขึ้น
        $_SESSION['message_error']=$msgError;
    }
}
?>
<html>
<head>
        <?php require('head.php'); ?>
        <link rel="stylesheet" type="text/css" href="btvalidate/dist/css/bootstrapValidator.min.css"/>
        <script type="text/javascript" src="btvalidate/dist/js/bootstrapValidator.min.js"></script>
        <title>เพิ่มหมวดกระทู้</title>
    </head>
    <body>
        <?php require('menu.php'); ?>
        <div class="container">
            <?php require('header.php'); ?>
            <div class="row ws-content">
                <div class="col-md-4  col-sm-4 col-md-offset-4 col-sm-offset-4">
                    <h1>เพิ่มหมวดกระทู้</h1>
                    <?php
                    if (!empty($_SESSION['message_error'])) {
      //แสดงปัญที่เกิดขึ้นจากการไม่กรอกชื่อหมวดกระทู้
                        ?>
                        <div class="alert alert-danger" role="alert">
                            <?php echo $_SESSION['message_error']; ?>
                        </div>
                        <?php
                        $_SESSION['message_error'] = '';
                    }
                    ?>
                    <form  method="post" enctype="multipart/form-data" id="categoryForm" name="categoryForm" action="">
                        <div class="form-group">
                            <label for="Category Name">ชื่อหมวดกระทู้</label>
                            <input type="text" class="form-control" id="cg_name" name="cg_name" placeholder="ชื่อหมวดกระทู้">
                        </div>
                        <div class="form-group">
                            <label for="Category Description">คำอธิบาย</label>
                            <textarea class="form-control" id="cg_des"  name="cg_des" placeholder="คำอธิบายหมวดกระทู้" rows="5"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="Category Order">เรียงลำดับ</label>
                            <input type="text" class="form-control" id="cg_order" name="cg_order" style="width:20%;" value="1">
                        </div>
                       
                        <div class="form-group">
                        <input type="submit" class="btn btn-primary" name="btSave" value="บันทึก" >
                        </div>
                    </form>
                </div>
            </div>
            <?php require('footer.php'); ?>
        </div>
        <script>
           $(document).ready(function() {//คำสั่งเช็ค การกรอกชื่อหมวดกระทู้ ภาษา Javascript โดยใช้ BootstrapValidator ปลั๊กอิน
                $('#categoryForm').bootstrapValidator({
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        cg_name: {
                            validators: {
                                notEmpty: {
                                    message: 'กรุณากรอก ชื่อหมวดกระทู้ ด้วย'
                                }
                            }
                        }
                    }
                });
            });
        </script>    
    </body>
</html>


ให้สังเกตุคำสั่ง require('check_admin.php'); ไฟล์ check_admin.php ได้มาจากบทความนี้คับ http://php-for-ecommerce.blogspot.com/2014/07/webboard-php-mysql-2.html#check_admin

2.จากนั้นให้สร้างไฟล์ชื่อ category.php ในตำแหน่งเดียวกันกับไฟล์ category_add.php  เป็นไฟล์ที่แสดงหมวดกระทู้ทั้งหมดให้แอดมินสามารถเข้าไปลบหรือแก้ไขข้อมูลจากในหน้านี้ได้ ให้พิมพ์โค๊ดดังนี้

<?php
session_start();
require('check_admin.php');
require('bin/connectdb.php');
if(!empty($_POST['btOrderSave'])){//กดปุ่มบันทึการจัดเรียง
 foreach($_POST['cg_order'] as $cg_id => $cg_order){
  //Update การจัดเรียงลำดับของหมวดกระทู้
    mysql_query("UPDATE tbl_category SET cg_order='$cg_order' WHERE cg_id='$cg_id'");
 } 
}
if(!empty($_GET['del'])){//กดลบหมวดกระทู้
 mysql_query('DELETE FROM tbl_category  WHERE cg_id='.$_GET['del']);
 header('category.php');
}
//แสดงหมวดหมุ่กระทู้ทั้งหมดโดยเรียงตามลำดับ cg_order จากน้อยไปมาก
$rs_category=mysql_query("SELECT cg_id,cg_name FROM tbl_category ORDER BY cg_order ASC"); 
$chk_rows_category=mysql_num_rows($rs_category);//นับจำนวนแถวของหมวดกระทู้
?>
<html>
    <head>
        <?php require('head.php'); ?>
        <title>จัดการหมวดกระทู้</title>
    </head>
    <body>
        <?php require('menu.php'); ?>
        <div class="container">
            <?php require('header.php'); ?>
            <div class="row ws-content">
             <div class="col-md-10 col-sm-10 col-md-offset-1 col-sm-offset-1">
               <form id="categoryForm" name="categoryForm" method="post" action="" >
                 <table class="table table-bordered table-hover">
                   <thead>
                     <tr>
                       <th colspan="4">
                       <div style="float:right">
                       <span class="btn btn-default" ><a href="category_add.php">เพิ่มหมวดกระทู้</a></span>
                       <input type="submit" name="btOrderSave" id="btOrderSave" class="btn btn-primary" value="บันทึกการจัดเรียง" >
                       </div>
                       </th>
                     </tr>
                     <tr>
                       <th style="text-align:center">ลำดับ</th>
                       <th>ชื่อหมวดกระทู้</th>
                       <th>เรียงลำดับ</th>
                       <th>จัดการ</th>
                     </tr>
                   </thead>
                   <tbody>
                   <?php if($chk_rows_category>0) {//จำนวนแถวมากกว่า 0 แสดงว่ามีข้อมูล
        $order_i=1;
        while($show_category=mysql_fetch_assoc($rs_category)){
         $cg_id=$show_category['cg_id'];
        ?>
                     <tr>
                       <td style="width:10%;text-align:center"><?php echo  $order_i;?></td>
                       <td style="width:70%"><?php echo $show_category['cg_name'];?></td>
                       <td style="width:10%"><input type="text" name="cg_order[<?php echo  $cg_id;?>]"  class="form-control cg_order" value="<?php echo  $order_i;?>" ></td>
                       <td style="width:10%">
                       <a href="category_edit.php?edit=<?php echo  $cg_id;?>">แก้ไข</a> /
                       <a href="category.php?del=<?php echo  $cg_id;?>" onClick="return confirm('ยืนยันการลบหมวดกระทู้นี้')">ลบ</a></td>
                     </tr>
                     <?php 
      $order_i++;
        }
      }else{ //ไม่มีข้อมูลหมวดกระทู้
      ?>
                     <tr>
                       <td colspan="4" align="center">ไม่พบข้อมูล</td>
                     </tr>
                     <?php } ?>
                   </tbody>
                 </table>
               </form>
             </div>
            </div>
            <?php require('footer.php'); ?>
        </div>      
    </body>
</html>

3.สร้างไฟล์ชื่อ category_edit.php สำหรับให้แอดมินสามารถแก้ไขข้อมูลหมวดกระทู้ ให้พิมพ์คำสั่งดังนี้

<?php
session_start();
require('check_admin.php');
 require('bin/connectdb.php');   //เรียกไฟล์เชื่อมต่อกับฐานข้อมูล
if(!empty($_POST['btSaveEdit'])){//มีการคลิกที่ปุ่มแก้ไข
    $msgError='';
    if(!empty($_POST['cg_name'])){
  $cg_id=$_GET['edit'];
        $cg_name=$_POST['cg_name'];//ชื่อหมวด
        $cg_des=$_POST['cg_des'];//คำอธิบายหมวด
  $cg_order=$_POST['cg_order'];//เรียงลำดับการแสดงผล
  mysql_query("UPDATE tbl_category SET cg_name='$cg_name',cg_des='$cg_des',cg_order='$cg_order' WHERE cg_id='$cg_id'");              
    }else{
        $msgError.='กรุณากรอกชื่อหมวดกระทู้ด้วย<br />';
    }
    if(empty($msgError)){
  //หากสมาชิกพิมพ์ข้อมูลถูกต้อง ให้Redirect หน้าไปที่ไฟล์ category.php
        header("Location:category.php");
    }else{
  //หากกรอกข้อมูลไม่ถูกต้อง ให้สร้างตัวแปร session มารับค่าเพื่อแจ้งให้ทราบถึงปัญหาที่เกิดขึ้น
        $_SESSION['message_error']=$msgError;
    }
}
$show_category_edit='';
if(!empty($_GET['edit'])){//พบพารามิเตอร์แบบ get ชื่อ edit แสดงว่าต้องการแก้ไขข้อมูล
 $cg_id=$_GET['edit'];
 $rs_category_edit=mysql_query("SELECT * FROM tbl_category WHERE cg_id='$cg_id'") or die(mysql_error());
 $rows_category_edit=mysql_num_rows($rs_category_edit);
 if($rows_category_edit>0){//มีข้อมูลของหมวดกระทู้ที่ต้องการแก้ไขในฐานข้อมูล
  $show_category_edit=mysql_fetch_assoc($rs_category_edit);
 }else{//ไม่พบข้อมูลของหมวดกระทู้
 header('category.php'); 
 }
}else{//ไม่พบ ให้กลับไปหน้าเดิม
header('category.php'); 
}
?>
<html>
<head>
        <?php require('head.php'); ?>
        <link rel="stylesheet" type="text/css" href="btvalidate/dist/css/bootstrapValidator.min.css"/>
        <script type="text/javascript" src="btvalidate/dist/js/bootstrapValidator.min.js"></script>
        <title>เพิ่มหมวดกระทู้</title>
    </head>
    <body>
        <?php require('menu.php'); ?>
        <div class="container">
            <?php require('header.php'); ?>
            <div class="row ws-content">
                <div class="col-md-4  col-sm-4 col-md-offset-4 col-sm-offset-4">
                    <h1>แก้ไขหมวดกระทู้</h1>
                    <?php
                    if (!empty($_SESSION['message_error'])) {
      //แสดงปัญที่เกิดขึ้นจากการไม่กรอกชื่อหมวดกระทู้
                        ?>
                        <div class="alert alert-danger" role="alert">
                            <?php echo $_SESSION['message_error']; ?>
                        </div>
                        <?php
                        $_SESSION['message_error'] = '';
                    }
                    ?>
                    <form  method="post" enctype="multipart/form-data" id="categoryForm" name="categoryForm" action="">
                        <div class="form-group">
                            <label for="Category Name">ชื่อหมวดกระทู้</label>
                            <input type="text" class="form-control" id="cg_name" name="cg_name" placeholder="ชื่อหมวดกระทู้" value="<?php echo $show_category_edit['cg_name']?>">
                        </div>
                        <div class="form-group">
                            <label for="Category Description">คำอธิบาย</label>
                            <textarea class="form-control" id="cg_des"  name="cg_des" placeholder="คำอธิบายหมวดกระทู้" rows="5"><?php echo $show_category_edit['cg_des']?></textarea>
                        </div>
                        <div class="form-group">
                            <label for="Category Order">เรียงลำดับ</label>
                            <input type="text" class="form-control" id="cg_order" name="cg_order" style="width:20%;" value="<?php echo $show_category_edit['cg_order']?>">
                        </div>
                       
                        <div class="form-group">
                        <input type="submit" class="btn btn-primary" name="btSaveEdit" value="แก้ไข" >
                        </div>
                    </form>
                </div>
            </div>
            <?php require('footer.php'); ?>
        </div>
        <script>
           $(document).ready(function() {//คำสั่งเช็ค การกรอกชื่อหมวดกระทู้ ภาษา Javascript โดยใช้ BootstrapValidator ปลั๊กอิน
                $('#categoryForm').bootstrapValidator({
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        cg_name: {
                            validators: {
                                notEmpty: {
                                    message: 'กรุณากรอก ชื่อหมวดกระทู้ ด้วย'
                                }
                            }
                        }
                    }
                });
            });
        </script>    
    </body>
</html>

4.สุดท้ายคือ ไฟล์ index.php  ซึ่งก็คือหน้าโฮมเพจของเรานั่นเอง และเราได้สร้างเอาไว้แล้วตั้งแต่เริ่มต้นแล้วครับ ให้พิมพ์คำสั่งเหล่านี้ลงไปแทน

<?php
session_start();
require('bin/connectdb.php');
//แสดงหมวดหมุ่กระทู้ทั้งหมดโดยเรียงตามลำดับ cg_order จากน้อยไปมาก
$rs_category = mysql_query("SELECT * FROM tbl_category ORDER BY cg_order ASC");
$chk_rows_category = mysql_num_rows($rs_category); //นับจำนวนแถวของหมวดกระทู้
?>
<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 class="hidden-xs">หัวข้อกระทู้</th>
                            <th class="hidden-xs">ความคิดเห็น</th></tr>
                    </thead>
                    <tbody>
                        <?php
                        if ($chk_rows_category > 0) {//จำนวนแถวมากกว่า 0 แสดงว่ามีข้อมูล
                            while ($show_category = mysql_fetch_assoc($rs_category)) {
                                $cg_id = $show_category['cg_id'];
                                $cg_name = $show_category['cg_name'];
                                $cg_des = $show_category['cg_des'];
                                $cg_v = $show_category['cg_replie_totals'];
                                $cg_tp_total = $show_category['cg_topic_totals'];
                                ?>
                                <tr>
                                    <td style="width:80%">
                                        <a href="showboard.php?id=<?php echo $cg_id; ?>"><?php echo $cg_name; ?></a>
                                        <br /><?php echo $cg_des; ?>
                                    </td>
                                    <td style="width:10%" class="hidden-xs"><?php echo $cg_tp_total; ?></td>
                                    <td style="width:10%" class="hidden-xs"><?php echo $cg_v; ?></td>
                                </tr>
                                <?php
                            }
                        } else { //ไม่มีข้อมูลหมวดกระทู้
                            ?>
                            <tr>
                                <td colspan="3" align="center"><strong>ไม่พบข้อมูล</strong></td>
                            </tr>
                        <?php } ?>
                    </tbody>
                </table>
            </div>
            <?php require('footer.php'); ?>
        </div>      
    </body>
</html>

มาดูผลลัพธุ์การทำงานกันครับ ให้เข้าสู่ระบบโดยผู้ดูแลระบบ (Admin) ก่อนครับ ถ้าไม่ใช่ผู้ดูแลระบบจะเข้าไปจัดการส่วนนี้ไม่ได้ โดยพิมพ์รหัสผ่านแอดมินที่ผมกำหนดไว้แล้วว่า admin,123456
 

ให้คลิกเมนู จัดการหมวดกระทู้ จะปรากฏหน้าจัดการหมวดกระทู้ ดังรูป


ถ้าเปิดหน้าจัดการหมวดกระทู้บนมือถือจะได้ผลลัพธุ์ดังนี้


เราสามารถ เพิ่มหมวดกระทู้ โดยคลิกที่ เพิ่มหมวดกระทู้ หรือ แก้ไขหมวดกระทู้ โดยคลิกที่ แก้ไข หรือคลิกที่ ลบ เพื่อต้องการลบหมวดกระทู้ หรือคลิกที่ บันทึกการจัดเรียง และกำหนดตัวเลขที่ช่อง เรียงลำดับ เพื่อเรียงลำดับหมวดกระทู้

ถ้าหากเราคลิกที่ เพิ่มหมวดกระทู้  จะแสดงหน้าเพิ่มหมวดกระทู้ ดังนี้


ถ้าหากเปิดหน้าเพิ่มหมวดกระทู้บนมือถือจะได้ผลลัพธุ์ดังนี้


หากคลิกที่ แก้ไข จากตัวเลือกใดตัวเลือกหนึ่งของหมวดกระทู้ ในหน้าจัดการหมวดกระทู้ จะได้ผลลัพธุ์ดังนี้


ถ้าหากเปิดหน้าแก้ไขหมวดกระทู้ บนมือถือจะได้ผลลัพธุ์ดังนี้


และหน้าสุดท้ายที่ผมได้ ดึงหมวดกระทู้มาแสดง คือ หน้าโฮมเพจ จะได้ผลลัพธุ์ดังนี้


เมื่อเปิดหน้าโฮมเพจบน มือถือ จะได้ผลลัพธุ์ดังนี้ครัธุ์ดังนี้ครับ


บทความต่อไปจะสอนในเรื่องของการตั้งกระทู้,แสดงกระทู้,แก้ไขกระทู้ที่ตั้งครับ

4 ความคิดเห็น :

  1. ช่วยด้วยครับ เชื่อมต่อ database ไม่ได้ ผมใช้ MAMP

    ตอบลบ
  2. ผมลองเเล้วมันขึ้ว่า getError form action

    ตอบลบ