สอนทำ Webboard ด้วย PHP MySQL ตอนที่ 4 เพิ่ม/แสดง/ลบ/แก้ไข หมวดกระทู้ และแสดงหมวดกระทู้ในหน้าโฮมเพจ
บทความนี้จะสอนเขียนโค๊ด จัดการกับหมวดหมู่กระทู้ของ Webboard กันครับ เพื่อนำข้อมูลของหมวดกระทู้ มาแสดงผลในหน้าเว็บหลัก หรือหน้าโฮมเพจของเรานั่นเอง ตามที่ผมได้ออกแบบไว้ตั้งแต่ตอนที่ 1 บทความนี้จะสอนในส่วนของการ เพิ่ม ,ลบ,แก้ไข ,แสดงหมวดกระทู้ ซึ่งจะเป็นส่วนจัดการของผู้ดูแลระบบ สมาชิกไม่สามารถเข้ามาจัดการในส่วนนี้ได้
1.เริ่มกันที่ไฟล์แรกคือ ไฟล์ category_add.php เป็นไฟล์สำหรับให้แอดมินเพิ่มข้อมูลหมวดกระทู้ ให้สร้างไฟล์นี้ไว้ตำแหน่งเดียวกับไฟล์ index.php ให้พิมพ์คำสั่งดังนี้
ให้สังเกตุคำสั่ง 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 เป็นไฟล์ที่แสดงหมวดกระทู้ทั้งหมดให้แอดมินสามารถเข้าไปลบหรือแก้ไขข้อมูลจากในหน้านี้ได้ ให้พิมพ์โค๊ดดังนี้
3.สร้างไฟล์ชื่อ category_edit.php สำหรับให้แอดมินสามารถแก้ไขข้อมูลหมวดกระทู้ ให้พิมพ์คำสั่งดังนี้
4.สุดท้ายคือ ไฟล์ index.php ซึ่งก็คือหน้าโฮมเพจของเรานั่นเอง และเราได้สร้างเอาไว้แล้วตั้งแต่เริ่มต้นแล้วครับ ให้พิมพ์คำสั่งเหล่านี้ลงไปแทน
มาดูผลลัพธุ์การทำงานกันครับ ให้เข้าสู่ระบบโดยผู้ดูแลระบบ (Admin) ก่อนครับ ถ้าไม่ใช่ผู้ดูแลระบบจะเข้าไปจัดการส่วนนี้ไม่ได้ โดยพิมพ์รหัสผ่านแอดมินที่ผมกำหนดไว้แล้วว่า admin,123456
ให้คลิกเมนู จัดการหมวดกระทู้ จะปรากฏหน้าจัดการหมวดกระทู้ ดังรูป
ถ้าเปิดหน้าจัดการหมวดกระทู้บนมือถือจะได้ผลลัพธุ์ดังนี้
เราสามารถ เพิ่มหมวดกระทู้ โดยคลิกที่ เพิ่มหมวดกระทู้ หรือ แก้ไขหมวดกระทู้ โดยคลิกที่ แก้ไข หรือคลิกที่ ลบ เพื่อต้องการลบหมวดกระทู้ หรือคลิกที่ บันทึกการจัดเรียง และกำหนดตัวเลขที่ช่อง เรียงลำดับ เพื่อเรียงลำดับหมวดกระทู้
ถ้าหากเราคลิกที่ เพิ่มหมวดกระทู้ จะแสดงหน้าเพิ่มหมวดกระทู้ ดังนี้
ถ้าหากเปิดหน้าเพิ่มหมวดกระทู้บนมือถือจะได้ผลลัพธุ์ดังนี้
หากคลิกที่ แก้ไข จากตัวเลือกใดตัวเลือกหนึ่งของหมวดกระทู้ ในหน้าจัดการหมวดกระทู้ จะได้ผลลัพธุ์ดังนี้
ถ้าหากเปิดหน้าแก้ไขหมวดกระทู้ บนมือถือจะได้ผลลัพธุ์ดังนี้
และหน้าสุดท้ายที่ผมได้ ดึงหมวดกระทู้มาแสดง คือ หน้าโฮมเพจ จะได้ผลลัพธุ์ดังนี้
เมื่อเปิดหน้าโฮมเพจบน มือถือ จะได้ผลลัพธุ์ดังนี้ครัธุ์ดังนี้ครับ
บทความต่อไปจะสอนในเรื่องของการตั้งกระทู้,แสดงกระทู้,แก้ไขกระทู้ที่ตั้งครับ
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
ให้คลิกเมนู จัดการหมวดกระทู้ จะปรากฏหน้าจัดการหมวดกระทู้ ดังรูป
ถ้าเปิดหน้าจัดการหมวดกระทู้บนมือถือจะได้ผลลัพธุ์ดังนี้
เราสามารถ เพิ่มหมวดกระทู้ โดยคลิกที่ เพิ่มหมวดกระทู้ หรือ แก้ไขหมวดกระทู้ โดยคลิกที่ แก้ไข หรือคลิกที่ ลบ เพื่อต้องการลบหมวดกระทู้ หรือคลิกที่ บันทึกการจัดเรียง และกำหนดตัวเลขที่ช่อง เรียงลำดับ เพื่อเรียงลำดับหมวดกระทู้
ถ้าหากเราคลิกที่ เพิ่มหมวดกระทู้ จะแสดงหน้าเพิ่มหมวดกระทู้ ดังนี้
ถ้าหากเปิดหน้าเพิ่มหมวดกระทู้บนมือถือจะได้ผลลัพธุ์ดังนี้
หากคลิกที่ แก้ไข จากตัวเลือกใดตัวเลือกหนึ่งของหมวดกระทู้ ในหน้าจัดการหมวดกระทู้ จะได้ผลลัพธุ์ดังนี้
ถ้าหากเปิดหน้าแก้ไขหมวดกระทู้ บนมือถือจะได้ผลลัพธุ์ดังนี้
และหน้าสุดท้ายที่ผมได้ ดึงหมวดกระทู้มาแสดง คือ หน้าโฮมเพจ จะได้ผลลัพธุ์ดังนี้
เมื่อเปิดหน้าโฮมเพจบน มือถือ จะได้ผลลัพธุ์ดังนี้ครัธุ์ดังนี้ครับ
บทความต่อไปจะสอนในเรื่องของการตั้งกระทู้,แสดงกระทู้,แก้ไขกระทู้ที่ตั้งครับ
ช่วยด้วยครับ เชื่อมต่อ database ไม่ได้ ผมใช้ MAMP
ตอบลบลองเช็คข้อมูลให้ถูกครับ
ลบgood
ตอบลบผมลองเเล้วมันขึ้ว่า getError form action
ตอบลบ