Cara Menambah Banyak Data menggunakan PHP Ajax

Cara Menambah Banyak Data menggunakan PHP Ajax

Cara Menambah Banyak Data menggunakan PHP Ajax

Dengan mengirim atau memasukkan atau menyimpan banyak data dengan satu klik, Anda harus menggunakan kode Jquery dan javcript.

Disini kita menggunakan 2 file untuk Insert data dari database MySql menggunakan Ajax.

  1. index.php
  2. save.php

Buat Tabel

CREATE TABLE `user_data` (

`id` int(11) NOT NULL,

`Name` varchar(100) NOT NULL,

`email` varchar(50) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Salinan

 

The CREATE TABLE di MySQL database yang digunakan untuk membuat tabel baru

Buat tampilan

#index.php

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>

<div style="margin: auto;width: 60%;">

<form id="form1" name="form1" method="post">

<div class="form-group">

<label for="email">Student Name:</label>

<input type="text" name="sname" class="form-control" id="name">

</div>

<div class="form-group">

<label for="pwd">Student email:</label>

<input type="text" name="email" class="form-control" id="email">

</div>

<input type="button" name="send" class="btn btn-primary" value="add data" id="butsend">

<input type="button" name="save" class="btn btn-primary" value="Save to database" id="butsave">

</form>

<table id="table1" name="table1" class="table table-bordered">

<tbody>

<tr>

<th>ID</th>

<th>Name</th>

<th>email</th>

<th>Action</th>

<tr>

</tbody>

</table>

</div>

<script>

$(document).ready(function() {

var id = 1;

/*Assigning id and class for tr and td tags for separation.*/

$("#butsend").click(function() {

var newid = id++;

$("#table1").append('<tr valign="top" id="' + newid + '">\n\

<td width="100px" >' + newid + '</td>\n\

<td width="100px" class="name' + newid + '">' + $("#name").val() + '</td>\n\

<td width="100px" class="email' + newid + '">' + $("#email").val() + '</td>\n\

<td width="100px"><a href="javascript:void(0);" class="remCF">Remove</a></td>\n\ </tr>');

});

$("#table1").on('click', '.remCF', function() {

$(this).parent().parent().remove();

});

/*crating new click event for save button*/

$("#butsave").click(function() {

var lastRowId = $('#table1 tr:last').attr("id"); /*finds id of the last row inside table*/

var name = new Array();

var email = new Array();

for (var i = 1; i <= lastRowId; i++) {

name.push($("#" + i + " .name" + i).html()); /*pushing all the names listed in the table*/

email.push($("#" + i + " .email" + i).html()); /*pushing all the emails listed in the table*/

}

var sendName = JSON.stringify(name);

var sendEmail = JSON.stringify(email);

$.ajax({

url: "save.php",

type: "post",

data: {name: sendName, email: sendEmail},

success: function(data) {

alert(data); /* alerts the response from php.*/

}

});

});

});

</script>

</body>

</html>


 

Baca Juga  Cara multiple data dengan checkbox menggunakan PHP

Metode JSON.stringify() mengonversi objek atau nilai JavaScript menjadi string JSON, secara opsional mengganti nilai jika fungsi pengganti ditentukan atau secara opsional hanya menyertakan properti yang ditentukan jika larik pengganti ditentukan.

Buat file aksi

save.php

<?php

$nameArr = json_decode($_POST["name"]);

$emailArr = json_decode($_POST["email"]);

$con = mysqli_connect("localhost", "root", "", "php_ajax");

if (mysqli_connect_errno()) {

echo "Failed to connect to MySQL: " . mysqli_connect_error();

}

for ($i = 0; $i < count($nameArr); $i++) {

if (($nameArr[$i] != "")) { /* not allowing empty values and the row which has been removed. */

$sql = "INSERT INTO user_data (Name, email)

VALUES

('$nameArr[$i]','$emailArr[$i]')";

if (!mysqli_query($con, $sql)) {

die('Error: ' . mysqli_error($con));

}

}

}

Print "Data added Successfully !";

mysqli_close($con);

?>

 

Nah demikianlah tutorial dari kami skrip ini cocok di implementasikan untuk pembuatan aplikasi pos atau Kasir semoga bermanfaat

 

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Need Help? Chat with us