Wednesday, September 23, 2020

PHP AJAX CRUD - 4 | How to edit data or fetch data in TextBox in Pop up modal without page refresh

How to edit data or fetch data in TextBox in Pop up modal without page refresh.

Source Post:

https://www.fundaofwebit.com/php-solutions/fetch-data-in-textbox-pop-up-dialog-using-jquery-ajax-php

PHP AJAX CRUD - 3 | How to fetch single data in pop up modal without page reload using jQuery Ajax

How to fetch single data in pop up modal without page reload using jQuery Ajax in PHP.

Source Post:

https://www.fundaofwebit.com/php-solutions/fetch-single-data-in-pop-up-dialog-using-jquery-ajax-php

PHP AJAX CRUD - 2 | How to Store data without page reload in database using jquery ajax in php

How to Store data without page reload in database using jquery ajax in php

Source Post:

https://www.fundaofwebit.com/php-solutions/store-data-without-page-reload-using-jquery-ajax-in-php

PHP AJAX CRUD - 1 | How to Fetch data from database using jquery ajax in php

Hello Guys., so in this above video, we are learning about how to fetch the data from database using jQuery, Ajax in php.

So.. Let's get started, First take a template, orelse you can follow the Video template where we are using Bootstrap for designing the view. goto getbootstrap.com and copy the starter template and continue with below code:

Step 1: Create a table named students below code:

Create a table as per below code in your database:

CREATE TABLE students (

id int,

fname varchar(100),

lname varchar(100),

class varchar(100),

section varchar(100)

);

Step 2: Create a file named index.php and paste the below code:

<!doctype html>

<head>

</head>

<body>

<h4>

PHP - AJAX - CRUD | Data without page reload using jquery ajax in php.

Add

</button>

</h4>

</div>

</div>

<thead>

<tr>

<th>First Name</th>

<th>Class</th>

<th>Section</th>

<th>Action</th>

</tr>

</thead>

</tbody>

</table>

</div>

$(document).ready(function () {

getdata();

});

function getdata()

{

$.ajax({

type: "GET",

url: "ajax-crud/fetch.php",

success: function (response) {

// console.log(response);

$.each(response, function (key, value) {

// console.log(value['fname']);

$('.studentdata').append('<tr>'+

'<td class="stud_id">'+value['id']+'</td>\

<td>'+value['fname']+'</td>\

<td>'+value['lname']+'</td>\

<td>'+value['class']+'</td>\

<td>'+value['section']+'</td>\

<td>\

<a href="#" class="badge btn-info viewbtn">VIEW</a>\

<a href="#" class="badge btn-primary edit_btn">EDIT</a>\

<a href="" class="badge btn-danger">Delete</a>\

</td>\

</tr>');

});

}

});

}

</script>

</body>

</html>

Step 3: Create a file named fetch.php inside ajax-crud and paste the below code:

First Create a folder name ajax-crud and create a file named fetch.php and paste the below code:

<?php

$conn = mysqli_connect("localhost","root","","phpcrud");

$query = "SELECT * FROM students";

$query_run = mysqli_query($conn, $query);

$result_array = [];

if(mysqli_num_rows($query_run) > 0)

{

foreach($query_run as $row)

{

array_push($result_array, $row);

}

header('Content-type: application/json');

echo json_encode($result_array);

}

else

{

echo $return = "<h4>No Record Found</h4>";

}

Thanks and Regards,

Ved Prakash N

Sunday, September 20, 2020

PHP CRUD-6: How to confirm and delete data from database using bootstrap modal in php jquery

Hi Guys. Here in this above video, i have taught about how to confirm and delete data from database with POP Up Dialog Box also known as Bootstrap Modal which will deleted records from database using php, jQuery, Ajax.

As We have taken the Starter Template design from getbootstrap.com website for designing purpose, i.e the Table and the POP Up Bootstrap Modal.

After all thing setup and your data is fetch a table and now you click on delete_btn to fetch the id of its data into your POP-Up modal for deleting the data using ajax jquery.

After fetching deleting id data into input hidden, start with your deleting code given below.

Step 1: We have created a table named student with fields and colums names:

1. id (PrimaryKey, AI (AutoIncrement) )

2. fname (varchar)

3. lname (varchar)

4. class (varchar)

5. section (varchar)

Step 2: Create a file named index.php

<?php session_start(); ?>

<!doctype html>

<head>

<title>PHP CRUD - Bootstrap Modal (POP UP)</title>

</head>

<body>

<h5 class="modal-title" id="deleteStudentModalLabel">Student Delete DATA </h5>

</button>

</div>

<h4>Are you sure, you want to delete this data ?</h4>

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

<button type="submit" name="delete_student" class="btn btn-danger">YES.! Delete</button>

</div>

</form>

</div>

<?php

if(isset($_SESSION['status']) && $_SESSION['status'] !='')

{

</button>

</div>

<?php

unset($_SESSION['status']);

}

<h5>

PHP CRUD - Bootstrap Modal (POP UP)

Add Student

</button>

</h5>

</div>

<thead>

<tr>

<th scope="col">First Name</th>

<th scope="col">Class</th>

<th scope="col">Section</th>

<th scope="col">Action</th>

</tr>

</thead>

<tbody>

<?php

$conn = mysqli_connect("localhost","root","","phpcrud");

$query = "SELECT * FROM students";

$query_run = mysqli_query($conn, $query);

if(mysqli_num_rows($query_run) > 0)

{

// while($row = mysqli_fetch_array($query_run))

foreach($query_run as $row)

{

<tr>

<td>

<a href="#" class="badge badge-danger delete_btn">DELETE</a>

</td>

</tr>

<?php

}

else

{

echo "<h5>No Record Found</h5>";

}

</tbody>

</table>

</div>

$(document).ready(function () {

$('.delete_btn').click(function (e) {

e.preventDefault();

var stud_id = $(this).closest('tr').find('.stud_id').text();

// console.log(stud_id);

$('#delete_id').val(stud_id);

$('#deleteStudentModal').modal('show');

});

</script>

</body>

</html>

Step 3: Create a file named code.php

<?php

session_start();

$conn = mysqli_connect("localhost","root","","phpcrud");

if(isset($_POST['delete_student']))

{

$id = $_POST['student_id'];

$query = "DELETE FROM students WHERE id='$id' ";

$query_run = mysqli_query($conn, $query);

if($query_run)

{

$_SESSION['status'] = "Successfully Deleted";

header('Location: index.php');

}

else

{

$_SESSION['status'] = "Something Went Wrong.!";

header('Location: index.php');

}

Thanks and Regards,

Ved Prakash N

PHP CRUD-5: How to update data in php jquery ajax using Bootstrap Modal (POP-UP Dialog-UP)

Hi Guys. Here in this above video, i have taught about how to update the data with POP Up Dialog Box also known as Bootstrap Modal which is updated into database in php, jQuery, Ajax.

First, We have taken the Starter Template design from getbootstrap.com website for designing purpose, i.e the Table and the POP Up Bootstrap Modal.

After all thing setup and your data is fetch a table and now you click on edit_button to fetch the data into your POP-Up modal, This is the Link to Fetch the data into TextBox : https://fundaofwebit.blogspot.com/2020/09/fetch-data-in-textbox-in-bootstrap.html .

After fetching data into textbox start with your updating code given below.

Step 1: We have created a table named student with fields and colums names:

1. id (PrimaryKey, AI)

2. fname

3. lname

4. class

5. section

Step 2: Create a file named index.php

<?php session_start(); ?>

<!doctype html>

<head>

<title>PHP CRUD - Bootstrap Modal (POP UP)</title>

</head>

<body>

<h5 class="modal-title" id="editStudentModalLabel">Student Edit Data</h5>

</button>

</div>

<label for="">First Name</label>

</div>

</div>

<label for="">Class</label>

</div>

<label for="">Section</label>

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

<button type="submit" name="update_student" class="btn btn-primary">Update</button>

</div>

</form>

</div>

<?php

if(isset($_SESSION['status']) && $_SESSION['status'] !='')

{

</button>

</div>

<?php

unset($_SESSION['status']);

}

<h5>

PHP CRUD - Bootstrap Modal (POP UP)

Add Student

</button>

</h5>

</div>

<thead>

<tr>

<th scope="col">First Name</th>

<th scope="col">Class</th>

<th scope="col">Section</th>

<th scope="col">Action</th>

</tr>

</thead>

<tbody>

<?php

$conn = mysqli_connect("localhost","root","","phpcrud");

$query = "SELECT * FROM students";

$query_run = mysqli_query($conn, $query);

if(mysqli_num_rows($query_run) > 0)

{

// while($row = mysqli_fetch_array($query_run))

foreach($query_run as $row)

{

<tr>

<td>

<a href="#" class="badge badge-danger">DELETE</a>

</td>

</tr>

<?php

}

else

{

echo "<h5>No Record Found</h5>";

}

</tbody>

</table>

</div>

$(document).ready(function () {

$('.edit_btn').click(function (e) {

e.preventDefault();

var stud_id = $(this).closest('tr').find('.stud_id').text();

// console.log(stud_id);

$.ajax({

type: "POST",

url: "code.php",

data: {

'checking_edit_btn': true,

'student_id': stud_id,

success: function (response) {

// console.log(response);

$.each(response, function (key, value) {

// console.log(value['fname']);

$('#edit_id').val(value['id']);

$('#edit_fname').val(value['fname']);

$('#edit_lname').val(value['lname']);

$('#edit_class').val(value['class']);

$('#edit_section').val(value['section']);

});

$('#editStudentModal').modal('show');

}

});

</script>

</body>

</html>

Step 3: Create a file named code.php

<?php

session_start();

$conn = mysqli_connect("localhost","root","","phpcrud");

// Student Edit Data

if(isset($_POST['checking_edit_btn']))

{

$s_id = $_POST['student_id'];

// echo $return = $s_id;

$result_array = [];

$query = "SELECT * FROM students WHERE id='$s_id' ";

$query_run = mysqli_query($conn, $query);

if(mysqli_num_rows($query_run) > 0)

{

foreach($query_run as $row)

{

array_push($result_array, $row);

header('Content-type: application/json');

echo json_encode($result_array);

}

else

{

echo $return = "<h5>No Record Found</h5>";

}

if(isset($_POST['update_student']))

{

$id = $_POST['edit_id'];

$fname = $_POST['fname'];

$lname = $_POST['lname'];

$class = $_POST['class'];

$section = $_POST['section'];

$query = "UPDATE students SET fname='$fname', lname='$lname', class='$class', section='$section' WHERE id='$id' ";

$query_run = mysqli_query($conn, $query);

if($query_run)

{

$_SESSION['status'] = "Successfully Updated";

header('Location: index.php');

}

else

{

$_SESSION['status'] = "Something Went Wrong.!";

header('Location: index.php');

}

Thanks and Regards,

Ved Prakash N

Wednesday, September 16, 2020

PHP CRUD-4: Bootstrap Modal (POP-UP): How to fetch data in Textbox from DB using jQuery AJAX PHP

Here.. in this above video, you will be learning how to fetch data into textbox using jquery ajax in php using bootstrap POP Up Modal (POP Dialog BOX).

Step 1: Create a table named student in your database:

We have already started with this student table in database wth below fields:

1. id (PrimaryKey, AI)

2. fname

3. lname

4. class

5. section

Step 2: Create a file named index.php.

Copy and paste the below php and html code for for fetching the data into textbox using jQuery Ajax in php.

So, i have written the code in php to fetch the data from table database and then given a simple view button to get get the data on POP Dialog Box (Bootstrap Modal) using jquery ajax.given below.

<?php session_start(); ?>

<!doctype html>

<head>

<title>PHP CRUD - Bootstrap Modal (POP UP)</title>

</head>

<body>

<h5 class="modal-title" id="editStudentModalLabel">Student Edit Data</h5>

</button>

</div>

<label for="">First Name</label>

</div>

</div>

<label for="">Class</label>

</div>

<label for="">Section</label>

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

<button type="submit" name="update_student" class="btn btn-primary">Update</button>

</div>

</form>

</div>

<?php

if(isset($_SESSION['status']) && $_SESSION['status'] !='')

{

</button>

</div>

<?php

unset($_SESSION['status']);

}

<h5>

PHP CRUD - Bootstrap Modal (POP UP)

Add Student

</button>

</h5>

</div>

<thead>

<tr>

<th scope="col">First Name</th>

<th scope="col">Class</th>

<th scope="col">Section</th>

<th scope="col">Action</th>

</tr>

</thead>

<tbody>

<?php

$conn = mysqli_connect("localhost","root","","phpcrud");

$query = "SELECT * FROM students";

$query_run = mysqli_query($conn, $query);

if(mysqli_num_rows($query_run) > 0)

{

// while($row = mysqli_fetch_array($query_run))

foreach($query_run as $row)

{

<tr>

<td>

<a href="#" class="badge badge-danger">DELETE</a>

</td>

</tr>

<?php

}

else

{

echo "<h5>No Record Found</h5>";

}

</tbody>

</table>

</div>

$(document).ready(function () {

$('.edit_btn').click(function (e) {

e.preventDefault();

var stud_id = $(this).closest('tr').find('.stud_id').text();

// console.log(stud_id);

$.ajax({

type: "POST",

url: "code.php",

data: {

'checking_edit_btn': true,

'student_id': stud_id,

success: function (response) {

// console.log(response);

$.each(response, function (key, value) {

// console.log(value['fname']);

$('#edit_id').val(value['id']);

$('#edit_fname').val(value['fname']);

$('#edit_lname').val(value['lname']);

$('#edit_class').val(value['class']);

$('#edit_section').val(value['section']);

});

$('#editStudentModal').modal('show');

}

});

</script>

</body>

</html>

Step 3: Create a file named code.php file.

Here, in this below code, it is written in php and mysql where we run some query and command to execute and then send the response by json_encode to the above pasted scripts.

<?php session_start(); $conn = mysqli_connect("localhost","root","","phpcrud"); // Student Edit Data if(isset($_POST['checking_edit_btn'])) { $s_id = $_POST['student_id']; // echo $return = $s_id; $result_array = []; $query = "SELECT * FROM students WHERE id='$s_id' "; $query_run = mysqli_query($conn, $query); if(mysqli_num_rows($query_run) > 0) { foreach($query_run as $row) { array_push($result_array, $row); header('Content-type: application/json'); echo json_encode($result_array); } } else { echo $return = "<h5>No Record Found</h5>"; } } ?>

Navbar

My Blog List

Wednesday, September 23, 2020

PHP AJAX CRUD - 4 | How to edit data or fetch data in TextBox in Pop up modal without page refresh

How to edit data or fetch data in TextBox in Pop up modal without page refresh.

PHP AJAX CRUD - 3 | How to fetch single data in pop up modal without page reload using jQuery Ajax

How to fetch single data in pop up modal without page reload using jQuery Ajax in PHP.

PHP AJAX CRUD - 2 | How to Store data without page reload in database using jquery ajax in php

PHP AJAX CRUD - 1 | How to Fetch data from database using jquery ajax in php

Step 1: Create a table named students below code:

Step 2: Create a file named index.php and paste the below code:

Step 3: Create a file named fetch.php inside ajax-crud and paste the below code:

Sunday, September 20, 2020

PHP CRUD-6: How to confirm and delete data from database using bootstrap modal in php jquery

Step 1: We have created a table named student with fields and colums names:

Step 2: Create a file named index.php

Step 3: Create a file named code.php

PHP CRUD-5: How to update data in php jquery ajax using Bootstrap Modal (POP-UP Dialog-UP)

Step 1: We have created a table named student with fields and colums names:

Step 2: Create a file named index.php

Step 3: Create a file named code.php

Wednesday, September 16, 2020

PHP CRUD-4: Bootstrap Modal (POP-UP): How to fetch data in Textbox from DB using jQuery AJAX PHP

Step 1: Create a table named student in your database:

Step 2: Create a file named index.php.

Step 3: Create a file named code.php file.