ในบทความนี้เป็นการเขียนโปรแกรม เพิ่ม แก้ไข ลบ ข้อมูล ด้วย PHP MySQL และ มีการใช้งานร่วมกับ Bootrap Css
ตัวอย่าง สร้าง ฐานข้อมูล ที่ชื่อ demo และมี Table ที่ชื่อ ว่า user เก็บข้อมูล รายชื่อ และ เบอร์โทร
CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) DEFAULT NULL, `tel` varchar(255) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
การสร้าง Class ที่ประกอบไปด้วย Method ต่าง ๆ สำหรับการ เพิ่ม แก้ไข ลบ ข้อมูล โดยจะทำงานร่วมกับ JQUER และ Bootstarp
ตัวอย่าง การสร้างไฟล์ database.class.php
สร้าง class Database โดยภายในจะมีMethod ต่าง ๆ ดังนี้
1.Method connect(); //Mehtod สำหรับการเชื่อมต่อฐานข้อมูล
2.Method get_all_user();//Mehtod สำหรับเรียกดูรายชือ user ทั้งหมด
3.Method get_user();//Mehtod สำหรับ การเรียกข้อมูล เฉพาะตามค่า parameter ที่ส่งมา
4.Method add_user();//Mehtod สำหรับการ เพิ่มข้อมูล
5.Method edit_user();//Mehtod สำหรับการ แก้ไขข้อมูล เฉพาะตามค่า parameter ที่ส่งมา
6.Method delete_user();//Mehtod สำหรับการ ลบข้อมูล เฉพาะตามค่า parameter ที่ส่งมา
<?php
class Database {
private $host = 'localhost'; //ชื่อ Host
private $user = 'root'; //ชื่อผู้ใช้งาน ฐานข้อมูล
private $password = ''; // password สำหรับเข้าจัดการฐานข้อมูล
private $database = 'demo'; //ชื่อ ฐานข้อมูล
//function เชื่อมต่อฐานข้อมูล
protected function connect(){
$mysqli = new mysqli($this->host,$this->user,$this->password,$this->database);
$mysqli->set_charset("utf8");
if ($mysqli->connect_error) {
die('Connect Error: ' . $mysqli->connect_error);
}
return $mysqli;
}
//function เรื่ยกดูข้อมูล all user
public function get_all_user(){
$db = $this->connect();
$get_user = $db->query("SELECT * FROM user");
while($user = $get_user->fetch_assoc()){
$result[] = $user;
}
if(!empty($result)){
return $result;
}
}
public function search_user($post = null){
$db = $this->connect();
$get_user = $db->query("SELECT * FROM user WHERE name LIKE '%".$post."%' ");
while($user = $get_user->fetch_assoc()){
$result[] = $user;
}
if(!empty($result)){
return $result;
}
}
public function get_user($user_id){
$db = $this->connect();
$get_user = $db->prepare("SELECT id,name,tel FROM user WHERE id = ?");
$get_user->bind_param('i',$user_id);
$get_user->execute();
$get_user->bind_result($id,$name,$tel);
$get_user->fetch();
$result = array(
'id'=>$id,
'name'=>$name,
'tel'=>$tel
);
return $result;
}
//function เพื่ม user
public function add_user($data){
$db = $this->connect();
$add_user = $db->prepare("INSERT INTO user (id,name,tel) VALUES(NULL,?,?) ");
$add_user->bind_param("ss",$data['send_name'],$data['send_tel']);
if(!$add_user->execute()){
echo $db->error;
}else{
echo "บันทึกข้อมูลเรียบร้อย";
}
}
//function edit user
public function edit_user($data){
$db = $this->connect();
$add_user = $db->prepare("UPDATE user SET name = ? , tel = ? WHERE id = ?");
$add_user->bind_param("ssi",$data['edit_name'],$data['edit_tel'],$data['edit_user_id']);
if(!$add_user->execute()){
echo $db->error;
}else{
echo "บันทึกข้อมูลเรียบร้อย";
}
}
//function delete user
public function delete_user($id){
$db = $this->connect();
$del_user = $db->prepare("DELETE FROM user WHERE id = ?");
$del_user->bind_param("i",$id);
if(!$del_user->execute()){
echo $db->error;
}else{
echo "ลบข้อมูลเรียบร้อย";
}
}
}
?>
ตัวอย่างไฟล์ index.php ไฟล์ที่ใช้ในการ แสดงผลการทำงาน
<?php
include"database.class.php";
//new database
$db = new Database();
if(isset($_POST['search_user'])){
//get search user
$get_user = $db->search_user($_POST['search_user']);
}else{
//call method getUser
$get_user = $db->get_all_user();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>ตัวอย่างการเขียนโปรแกรม เพิ่ม ลบ แก้ไข ข้อมูล ด้วย PHP JQUERY และ Bootstrap</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="script.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h4>ตัวอย่างการเขียนโปรแกรม เพิ่ม ลบ แก้ไข ข้อมูล ด้วย PHP JQUERY และ Bootstrap</h4>
<div class="col-md-6">
<button class="btn btn-info" data-toggle="modal" data-target="#add_user">เพิ่มข้อมูล</button>
</div>
<div class="col-md-6">
<div class="pull-right">
<!-- form สำหรับค้นหาข้อมูล -->
<form class="form-inline" method="POST" action="index.php">
<div class="form-group">
<input type="text" class="form-control" name="search_user" placeholder="พิมพ์ชื่อที่ต้องการค้นหา">
</div>
<input type="submit" value="ค้นหา">
</form>
</div>
</div>
<table class="table table-hover">
<thead>
<tr>
<th width="10%">ลำดับ</th>
<th width="30%">ชื่อ - สกุล</th>
<th width="20%">โทร</th>
<th width="15%">แก้ไข</th>
<th width="15%">ลบ</th>
</tr>
</thead>
<tbody>
<?php
$i = 1;
if(!empty($get_user)){
foreach($get_user as $user){
?>
<tr>
<td><?php echo $i?></td>
<td><?php echo $user['name']?></td>
<td><?php echo $user['tel']?></td>
<td><button class="btn btn-warning btn-xs" data-toggle="modal" data-target="#edit_user" onclick="return show_edit_user(<?php echo $user['id']?>);">แก้ไข</button></td>
<td><button class="btn btn-danger btn-xs" onclick="return delete_user(<?php echo $user['id']?>);">ลบ</button></td>
</tr>
<?php
$i++;
}
}else{
echo "<tr><td colspan='5'>ไม่พบข้อมูล</td></tr>";
}
?>
</tbody>
</table>
</div>
</div>
</div>
<!-- Modal Add User -->
<div class="modal fade" id="add_user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">ตัวอย่าง Form เพิ่มข้อมูล</h4>
</div>
<div class="modal-body">
<form id="add_user_form">
<div class="form-group">
<label >ชื่อ - สกุล</label>
<input type="text" class="form-control" name="send_name" placeholder="ระบุ ชื่อ - สกุล">
</div>
<div class="form-group">
<label >เบอร์โทรศัพท์</label>
<input type="text" class="form-control" name="send_tel" placeholder="ระบุ เบอร์โทรศัพท์">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="return add_user_form();">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal Edit User -->
<div class="modal fade" id="edit_user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">ตัวอย่าง Form แก้ไขข้อมูล</h4>
</div>
<div class="modal-body">
<div id="edit_form"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="return edit_user_form();">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
ตัวอย่าง ไฟล์ script.js
//add new data
function add_user_form(){
$.ajax({
type:"POST",
url:"process.php",
data:$("#add_user_form").serialize(),
success:function(data){
//close modal
$(".close").trigger("click");
//show result
alert(data);
//reload page
location.reload();
}
});
return false;
}
//show data for edit
function show_edit_user(id){
$.ajax({
type:"POST",
url:"process.php",
data:{show_user_id:id},
success:function(data){
$("#edit_form").html(data);
}
});
return false;
}
//edit data
function edit_user_form(){
$.ajax({
type:"POST",
url:"process.php",
data:$("#edit_user_form").serialize(),
success:function(data){
//close modal
$(".close").trigger("click");
//show result
alert(data);
//reload page
location.reload();
}
});
return false;
}
//delete user
function delete_user(id){
if(confirm("คุณต้องการลบข้อมูลหรือไม่")){
$.ajax({
type:"POST",
url:"process.php",
data:{delete_user_id:id},
success:function(data){
alert(data);
location.reload();
}
});
}
return false;
}
ตัวอย่างไฟล์ process.php เป็นไฟล์สำหรับการ รับข้อมูล จาก FORM เพื่อ ส่งให้กับ ไฟล์ database.class.php โดยจะมีการสร้าง Object และ เรียกใช้ Method ในการ เพิ่ม แก้ไข ลบ ข้อมูล ใน database
<?php
include"database.class.php";
//create object
$process = new Database();
//Add_user
if(isset($_POST['send_name'])){
//รับข้อมูลจาก FORM ส่งไปที่ Method add_user
$process->add_user($_POST);
}
//show edit data form
if(isset($_POST['show_user_id'])){
$edit_user = $process->get_user($_POST['show_user_id']);
echo'<form id="edit_user_form">
<div class="form-group">
<label >ชื่อ - สกุล</label>
<input type="text" class="form-control" name="edit_name" value="'.$edit_user['name'].'">
</div>
<div class="form-group">
<label >เบอร์โทรศัพท์</label>
<input type="text" class="form-control" name="edit_tel" value="'.$edit_user['tel'].'">
</div>
<input type="hidden" name="edit_user_id" value="'.$edit_user['id'].'" >
</form>';
}
//edit user
if(isset($_POST['edit_user_id'])){
$process->edit_user($_POST);
}
//delete user
if(isset($_POST['delete_user_id'])){
$process->delete_user($_POST['delete_user_id']);
}
?>