View detail of user selected record - PHP

View detail of user selected record – PHP

5
(1)

In this article, we will teach you how you can view detail of user selected record in PHP. We will display detail in Bootstrap modal.

For example, you are displaying a list of users or products or anything that has so much attributes that you cannot display them all in 1 table. That is where you will display only 2 or 3 attributes in a table and display every other detail in a pop-up.

Start off, by creating a simple index.php, it is the only file where we will be working on. You can download bootstrap library from the link below and paste them in your project directory, all files have also being attached in the source files at the end of this page (along with jQuery):

Download Bootstrap

Displaying records from database

First you have to display 2 or 3 attributes of records from database and create a button to view details. We will be using a sample database called classicmodels, you can find it in the source files below. And we will be displaying records from table named customers.

<?php
    // Connecting with database and executing query
    $connection = mysqli_connect("localhost", "root", "", "classicmodels");
    $sql = "SELECT * FROM customers";
    $result = mysqli_query($connection, $sql);
?>

<!-- Include bootstrap & jQuery -->
<link rel="stylesheet" href="bootstrap.css" />
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap.js"></script>

<!-- Creating table heading -->
<div class="container">
    <table class="table">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Phone</th>
        </tr>

        <!-- Display dynamic records from database -->
        <?php while ($row = mysqli_fetch_object($result)) { ?>
            <tr>
                <td><?php echo $row->customerNumber; ?></td>
                <td><?php echo $row->customerName; ?></td>
                <td><?php echo $row->phone; ?></td>
            </tr>
        <?php } ?>
    </table>
</div>

At this point, you will be able to view the records from database in a table. Now, you have to create a button which upon clicking will show the detail of that particular record. Change the following line in the table tag:

<tr>
    <th>ID</th>
    <th>Name</th>
    <th>Phone</th>
    <th>Actions</th>
</tr>

<?php while ($row = mysqli_fetch_object($result)) { ?>
    <tr>
        <td><?php echo $row->customerNumber; ?></td>
        <td><?php echo $row->customerName; ?></td>
        <td><?php echo $row->phone; ?></td>
        <!--Button to display details -->
        <td>
            <button class = "btn btn-primary">
                Details
            </button>
        </td>
    </tr>
<?php } ?>

Creating a pop-up/dialog to view details

Now, create a simple model.

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <h4 class = "modal-title">
               Customer Detail
            </h4>

            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
         </div>
         
         <div id = "modal-body">
            Press ESC button to exit.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               OK
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

Then create a function to be called when the button is pressed. We will load that customer’s data and display in this modal/pop-up.

<button class = "btn btn-primary" onclick="loadData(this.getAttribute('data-id'));" data-id="<?php echo $row->customerNumber; ?>">
    Details
</button>
  • We have created a custom attribute named data-id and assigned it the value of customer ID, we will be using this to get all record.
  • onclick event will call the function loadData and we are passing current customer ID as a parameter this.getAttribute(‘data-id’). This will get the value of data-id attribute in this button tag.

After that, you have to create a function and call an AJAX to get that customer’s data. We are using POST method, url will be same as current file name. In data object, we will be using get_data to check when user has requested to view the detail:

<script>
    function loadData(id) {
    	$.ajax({
    	    url: "index.php",
    	    method: "POST",
    	    data: {get_data: 1, id: id},
    	    success: function (response) {
    	        console.log(response);
    	    }
        });
    }
</script>

Now, at the start of this file index.php, get the ID of customer and provide the customer’s detail:

<?php
    // Check if user has requested to get detail
    if (isset($_POST["get_data"]))
    {
        // Get the ID of customer user has selected
        $id = $_POST["id"];

        // Connecting with database
        $connection = mysqli_connect("localhost", "root", "", "classicmodels");

        // Getting specific customer's detail
        $sql = "SELECT * FROM customers WHERE customerNumber='$id'";
        $result = mysqli_query($connection, $sql);
        $row = mysqli_fetch_object($result);

        // Important to echo the record in JSON format
        echo json_encode($row);

        // Important to stop further executing the script on AJAX by following line
        exit();
    }
?>

At this point, click on any customer’s detail button and in your browser console you will see it’s detail in JSON(string) format.

View detail of user selected record

Convert this JSON data in Javascript object on your AJAX success function. You will also need to create a custom HTML layout like in the following:

success: function (response) {
    response = JSON.parse(response);
    console.log(response);

    var html = "";

    // Displaying city
    html += "<div class='row'>";
        html += "<div class='col-md-6'>City</div>";
        html += "<div class='col-md-6'>" + response.city + "</div>";
    html += "</div>";

    // And now assign this HTML layout in pop-up body
    $("#modal-body").html(html);

    // And finally you can this function to show the pop-up/dialog
    $("#myModal").modal();
}

I have displayed only city name, try displaying every other column in the table too. That’s how you can view the detail of user selected record in PHP.

Learn more Javascript tutorials.

How useful was this post

Click on a star to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post





3 Replies to “View detail of user selected record – PHP”

  1. I have a genealogical website with a mysql database file containing more than 6000 records of the tombstones at the cemetery in our city. Each record consists of 15 columns. In each record I also have 2 columns with the latitude and longitude coordinates of the tombstone of the person concerned.
    Now find a routine to save the value of the requested latitude and longitude as a variable so that I can use it in my google maps routine to place a mark on the location of the tombstone you are looking for. The two columns with the coordinates have not yet been incorporated into my online website, as I want to test this first in my “localhost”!
    http://www.beerten-fr.be/grafinfo

Leave a Reply

Please disable your adblocker or whitelist this site!