DEVTAI.COM

Workshop Bootstrap Toggle ร่วมกับ PHP Ajax MySQLi (แจกฟรี)

Workshop Bootstrap Toggle ร่วมกับ PHP Ajax MySQLi (แจกฟรี)

วัยวุฒิ ชุมเมืองปัก BOOTSTRAP
จำนวนคนเข้าดู: 1,972

Workshop Bootstrap Toggle ร่วมกับ PHP Ajax MySQLi

Workshop  การทำ Bootstrap Toggle ปุ่ม ON/OFF บันทึกลงฐานข้อมูล
เก็บค่าเป็น 0 กับ 1 ในการอัพเดต ทุกคนสามารถนำโค้ดไปพัฒนาต่อยอดได้ครับ

ลิงค์อ้างอิง https://www.bootstraptoggle.com/

  • ก่อนอื่นนะครับ ให้ทุกคนดาวน์โหลด ไฟล์ js กับ css ไปไว้ก่อนนะครับ คลิ๊กดาวน์โหลด
    ในนั้นจะเป็นพวก script jquery ajax bootstrap หรือ script  ต่างๆ ครับ
  • ต่อมาก็มาสร้างฐานข้อมูล จะตั้งชื่อว่าอะไร และตาราง ผมตั้งตารางชื่อว่า tbl_login
    ตัวอย่าง code สร้างตาราง SQL สามารถ copy ไปไว้ใน SQL ได้เลยครับ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
CREATE TABLE `tbl_login` (
  `user_id` int(11) NOT NULL COMMENT 'PK',
  `username` varchar(20) NOT NULL COMMENT 'ไอดี',
  `password` varchar(200) NOT NULL COMMENT 'รหัสผ่าน',
  `user_level` varchar(20) NOT NULL COMMENT 'สถานะ',
  `user_status` int(11) NOT NULL DEFAULT 0 COMMENT 'การใช้งาน'
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
 
 
INSERT INTO `tbl_login` (`user_id`, `username`, `password`, `user_level`, `user_status`) VALUES
(1, 'admin', 'admin', 'admin', 0),
(2, 'admin2', 'admin', 'worker', 1),
(3, 'admin2', 'admin', 'employee', 1),
(4, 'devtai', 'devtai', 'worker', 0),
(5, 'work', 'work', 'worker', 1),
(6, 'admin2', 'work', 'worker', 0),
(7, 'fokercc', 'work', 'worker', 1);
 
ALTER TABLE `tbl_login`
  ADD PRIMARY KEY (`user_id`);
 
ALTER TABLE `tbl_login`
  MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'PK', AUTO_INCREMENT=8;
COMMIT;

  • ขั้นตอนต่อไป หลังจากสร้างตารางฐานข้อมูลเสร็จแล้ว ให้สร้างไฟล์ที่เชื่อมต่อกับฐานข้อมูล
  • condb.php ในนี้ผมจะตั้งฐานข้อมูลชื่อมา web_db

1
2
3
4
5
6
<?php
$con= mysqli_connect("localhost","root","","web_db") or die("Error: " . mysqli_error($con));
mysqli_query($con, "SET NAMES 'utf8' ");
error_reporting( error_reporting() & ~E_NOTICE );
date_default_timezone_set('Asia/Bangkok');
?>

  • แล้วก็มาสร้างไฟล์หน้าแสดงข้อมูล 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
<link rel="canonical" href="http://www.bootstraptoggle.com">
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/github.min.css" rel="stylesheet" >
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap-toggle.css" rel="stylesheet">
<link href="doc/stylesheet.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<?php
include("condb.php"); // เชื่อมต่อฐานข้อมูล
$query_worker = "SELECT * FROM tbl_login
        order by user_id desc" or die ("Error:" . mysqli_error());
$result = mysqli_query($con, $query_worker);
// echo $query_worker;
// exit();
?>
<div class="container">
  <div class="col-md-8" align="">
    <table class="table table-striped">
      <thead>
        <tr role="row" class="info">
          <th  tabindex="0" rowspan="1" colspan="1" style="width: 5%;">ลำดับ</th>
          <th  tabindex="0" rowspan="1" colspan="1" style="width: 40%;">username</th>
          <th  tabindex="0" rowspan="1" colspan="1" style="width: 30%;">pssword</th>
          <th  tabindex="0" rowspan="1" colspan="1" style="width: 20%;">สถานะ</th>
          <th  tabindex="0" rowspan="1" colspan="1" style="width:5%;">on/off</th>
        </tr>
      </thead>
      <tbody>
        <?php foreach ($result as $row) { $i +=1; ?>
        <tr>
          <td>
            <?php echo $i; ?>
          </td>
          <td>
            <?php echo $row['username']; ?>
          </td>
          <td>
            <?php echo $row['password']; ?>
          </td>
          <td>
            <?php echo $row['user_level']; ?>
          </td>
          <td>
            <input type="checkbox" id="toggle" onchange="toggle_check(<?= $row['user_id']?>)" <?php echo($row['user_status'] == 1)?'checked':''; ?> data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-size="normal">
          </td>
          <?php } ?>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<script >
function toggle_check(user_id) {
// alert(user_id) เช็คค่า user_id
$.ajax({
method: 'POST',
url: 'update_status.php',
data: {
user_id: user_id
},
});
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js"></script>
<script src="doc/script.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="js/bootstrap-toggle.js"></script>

  • ขั้นตอนสุดท้าย จะเป็นการส่งค่าไปอัพเดต ที่ไฟล์ update_status.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
echo '<meta charset="utf-8">';
include('condb.php');
$user_id = mysqli_real_escape_string($con,$_POST["user_id"]);
 
$query_status = "SELECT user_status FROM tbl_login WHERE user_id = $user_id";
$result_query = mysqli_query($con, $query_status) or die ("Error in query: $query_status " . mysqli_error());
$row = $result_query -> fetch_assoc();
$st = $row['user_status'];
 
if ($st != 1) {
$st_full = 1;
 
}else if ($st != 0){
$st_full = 0;
}
 
$sql_update = "UPDATE tbl_login SET user_status = '".$st_full."' WHERE user_id = $user_id";
$result_update = mysqli_query($con, $sql_update) or die ("Error in query: $sql_update " . mysqli_error());
// ?>

  • พอเสร็จเรียบร้อย ไปเช็คที่ไฟล์ ฐานข้อมูล จะมีภาพตัวอย่างนะครับ
  •  0 = OFF และ 1 =ON

สนใจจ้างพัฒนาระบบ เขียนระบบ ทำเว็บไซต์ รับสอนเขียนโปรแกรม inbox มาที่เพจ หรือติดต่อ 098-373-8651 ช่องทางการชำระเงิน เงินสด หรือ e-banking ธนาคารกสิกรไทย เลขบัญชี : 0951168564 ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก
ติดต่อ สอบถามข้อมูลเพิ่มเติม