(2023) PHP+MySqli EP.41
How to AJAX CrudPHP MySqli
(Part 1 insert AND view)

ระบบบริหารจัดการ ศูนย์ซ่อมรถยนต์ Car Service System ( PHP 7++ ขึ้นไป )

ตัวอย่างผลงาน FD22 Logistic 2020 ระบบบริหารจัดการขนส่ง

ระบบ บริหารจัดการร้านกาแฟ PHP | FD22-Cafe (Coffee AND Bakery)

CART&POS (ระบบจัดการงานขายหน้าร้านและ ออนไลน์ สำหรับร้านค้าขนาดกลาง,SME

เว็บไซต์ จองคิวทำเล็บ MANICURE SYSTEM ( PHP 7++ ขึ้นไป )

(2023) PHP+MySqli EP.40 How to Backup MySQL Database using PHP

SQL

-- phpMyAdmin SQL Dump
-- PHP Version: 7.2.34
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";
-- Database: `ajax_db`
CREATE DATABASE IF NOT EXISTS `ajax_db` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
USE `ajax_db`;
-- --------------------------------------------------------
-- Table structure for table `crud`

CREATE TABLE `crud` (
  `id` int(11) NOT NULL,
  `name` varchar(100) CHARACTER SET utf8 NOT NULL,
  `email` varchar(100) CHARACTER SET utf8 NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- Dumping data for table `crud`

INSERT INTO `crud` (`id`, `name`, `email`) VALUES
(1, 'fordev22.com', 'fordev22@fordev22.com'),
(2, 'fordev22_2.com', 'fordev22_2@fordev22_2.com');
--
-- Indexes for table `crud`
--
ALTER TABLE `crud`
  ADD PRIMARY KEY (`id`);
-- AUTO_INCREMENT for dumped tables
-- AUTO_INCREMENT for table `crud`
--
ALTER TABLE `crud`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=19;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

-- phpMyAdmin SQL Dump

-- PHP Version: 7.2.34

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

START TRANSACTION;

SET time_zone = "+00:00";

-- Database: `ajax_db`

CREATE DATABASE IF NOT EXISTS `ajax_db` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

USE `ajax_db`;

-- --------------------------------------------------------

-- Table structure for table `crud`

CREATE TABLE `crud` (

`id` int(11) NOT NULL,

`name` varchar(100) CHARACTER SET utf8 NOT NULL,

`email` varchar(100) CHARACTER SET utf8 NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- Dumping data for table `crud`

INSERT INTO `crud` (`id`, `name`, `email`) VALUES

(1, 'fordev22.com', 'fordev22@fordev22.com'),

(2, 'fordev22_2.com', 'fordev22_2@fordev22_2.com');

-- Indexes for table `crud`

ALTER TABLE `crud`

ADD PRIMARY KEY (`id`);

-- AUTO_INCREMENT for dumped tables

-- AUTO_INCREMENT for table `crud`

ALTER TABLE `crud`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=19;

COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

database.php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "ajax_db";
$conn = mysqli_connect($servername, $username, $password, $dbname);
mysqli_query($conn,"SET NAMES UTF8");
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
?>

<?php

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "ajax_db";

$conn = mysqli_connect($servername, $username, $password, $dbname);

mysqli_query($conn,"SET NAMES UTF8");

if (!$conn) {

die("Connection failed: " . mysqli_connect_error());

}

ajax_view.php

<?php
include 'database.php';
?>
<!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">
	<title>User Data</title>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<!-- <link rel="stylesheet" href="css/style.css"> -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="ajax_crud.js"></script>
</head>
<body>
<div class="container">
<p id="success"></p>
	<div class="table-wrapper">
		<div class="table-title">
			<div class="row">
				<div class="col-sm-8">
					<h2> Ajex CRUD By fordev22.com</h2>
				</div>
				<div class="col-sm-4">
					<a href="#addEmployeeModal" class="btn btn-success" data-toggle="modal"><i class="material-icons"></i> <span>Add New User</span></a>
										
				</div>
			</div>
		</div>
		<table class="table table-striped table-hover">
			<thead>
				<tr>
					
					<th>SL NO</th>
					<th>NAME</th>
					<th>EMAIL</th>
					
					<th>ACTION</th>
				</tr>
			</thead>
			<tbody>
			
			<?php
			$result = mysqli_query($conn,"SELECT * FROM crud");
				$i=1;
				while($row = mysqli_fetch_array($result)) {
			?>
			<tr id="<?php echo $row["id"]; ?>">
			
				<td><?php echo $i; ?></td>
				<td><?php echo $row["name"]; ?></td>
				<td><?php echo $row["email"]; ?></td>
				
				<td>
					
				</td>
			</tr>
			<?php
			$i++;
			}
			?>
			</tbody>
		</table>
	</div>
</div>
<!-- Add Modal HTML -->
<div id="addEmployeeModal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<form id="user_form">
				<div class="modal-header">						
					<h4 class="modal-title">Add User</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				</div>
				<div class="modal-body">					
					<div class="form-group">
						<label>NAME</label>
						<input type="text" id="name" name="name" class="form-control" required>
					</div>
					<div class="form-group">
						<label>EMAIL</label>
						<input type="email" id="email" name="email" class="form-control" required>
					</div>
										
				</div>
				<div class="modal-footer">
					<input type="hidden" value="1" name="type">
					<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
					<button type="button" class="btn btn-success" id="btn-add">Add</button>
				</div>
			</form>
		</div>
	</div>
</div>


</body>
</html>

100

101

102

103

<?php

include 'database.php';

<!DOCTYPE html>

<head>

</head>

<body>

<h2> Ajex CRUD By fordev22.com</h2>

</div>

</div>

<thead>

<tr>

<th>EMAIL</th>

<th>ACTION</th>

</tr>

</thead>

<tbody>

<?php

$result = mysqli_query($conn,"SELECT * FROM crud");

$i=1;

while($row = mysqli_fetch_array($result)) {

<td>

</td>

</tr>

<?php

$i++;

}

</tbody>

</table>

</div>

</div>

</div>

<label>EMAIL</label>

</div>

</div>

</form>

</div>

</body>

</html>

ajax_crud.js

$(document).on('click','#btn-add',function(e) {
		var data = $("#user_form").serialize();
		$.ajax({
			data: data,
			type: "post",
			url: "save_db.php",
			success: function(dataResult){
					var dataResult = JSON.parse(dataResult);
					if(dataResult.statusCode==200){
						$('#addEmployeeModal').modal('hide');
						alert('Data added successfully !'); 
                        location.reload();						
					}
					else if(dataResult.statusCode==201){
					   alert(dataResult);
					}
			}
		});
	});

$(document).on('click','#btn-add',function(e) {

var data = $("#user_form").serialize();

$.ajax({

data: data,

type: "post",

url: "save_db.php",

success: function(dataResult){

var dataResult = JSON.parse(dataResult);

if(dataResult.statusCode==200){

$('#addEmployeeModal').modal('hide');

alert('Data added successfully !');

location.reload();

}

else if(dataResult.statusCode==201){

alert(dataResult);

}

});

save_db.php

<?php
include 'database.php';
if(count($_POST)>0){
	if($_POST['type']==1){
		$name=$_POST['name'];
		$email=$_POST['email'];
		$sql = "INSERT INTO `crud`( `name`, `email`) 
		VALUES ('$name','$email')";
		if (mysqli_query($conn, $sql)) {
			echo json_encode(array("statusCode"=>200));
		} 
		else {
			echo "Error: " . $sql . "<br>" . mysqli_error($conn);
		}
		mysqli_close($conn);
	}
}
?>

<?php

include 'database.php';

if(count($_POST)>0){

if($_POST['type']==1){

$name=$_POST['name'];

$email=$_POST['email'];

$sql = "INSERT INTO `crud`( `name`, `email`)

VALUES ('$name','$email')";

if (mysqli_query($conn, $sql)) {

echo json_encode(array("statusCode"=>200));

}

else {

echo "Error: " . $sql . "<br>" . mysqli_error($conn);

}

mysqli_close($conn);

}

ระบบบริหารจัดการ ศูนย์ซ่อมรถยนต์ Car Service System ( PHP 7++ ขึ้นไป )

ตัวอย่างผลงาน FD22 Logistic 2020 ระบบบริหารจัดการขนส่ง

ระบบ บริหารจัดการร้านกาแฟ PHP | FD22-Cafe (Coffee AND Bakery)

CART&POS (ระบบจัดการงานขายหน้าร้านและ ออนไลน์ สำหรับร้านค้าขนาดกลาง,SME

เว็บไซต์ จองคิวทำเล็บ MANICURE SYSTEM ( PHP 7++ ขึ้นไป )

(2023) PHP+MySqli EP.40 How to Backup MySQL Database using PHP

You might also like