Skip to main content

การเขียนโปรแกรม เพิ่ม แก้ไข ลบ ข้อมูล PHP MySQL Jquery Bootstarp Modal

ในบทความนี้เป็นการเขียนโปรแกรม เพิ่ม แก้ไข ลบ ข้อมูล ด้วย 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">&times;</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">&times;</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']);
	}
	

?>

ไฟล์ตัวอย่าง