如何在单击按钮时以可折叠的侧边栏形式填充表格行数据？

Question

I am trying to populate a collapsible sidebar form, with table row data on button click of specific record from the table (Similar to action button EDIT). The HTML of the collapsible sidebar is on the same php page. Can any one help me with code to populate the collapsible sidebar form with the selected rows data.

Requirement: While clicking on edit button of particular row, the collapsible sidebar has to toggle and the row data has to be displayed in the form of sidebar.

Bellow is my php code with collapsible sidebar

<?php

 require_once 'authentication/auth.php';
// HTML authentication
    authHTML();

  require_once "configs/config.php";
  $session_username = $_SESSION["username"];
  $query = "SELECT username, ticket_title, ticket_category, ticket_status FROM tickets_file ";
  $result1 = mysqli_query($link, $query);

  ?>
            <!-- Data list view starts -->
            <section id="data-list-view" class="data-list-view-header">
                

                <!-- DataTable starts -->
                <div class="table-responsive">
                    <table class="table data-list-view">
                        <thead>
                            <tr>
                                <th></th>
                                <th>USER NAME</th>
                                <th>TITLE</th>
                                <th>CATEGORY</th>
                                <th>STATUS</th>
                                <th>ACTION</th>
                                
                            </tr>
                        </thead>
                        <tbody>
                        <?php while($row1 = mysqli_fetch_array($result1)):;?>
                            <tr>
                                <td></td>
                                <td class="product-name"><?php echo $row1[0];?></td>
                                <td class="product-category"> <div class="chip chip-warning">
                                        <div class="chip-body">
                                            <div class="chip-text"><?php echo $row1[1];?></div>
                                        </div>
                                    </div></td>
                                <td class="product-category"><?php echo $row1[2];?></td>
                                <td class="product-name"><?php echo $row1[3];?></td>
                                <td class="product-action">
                                    <span class="action-edit"><i class="feather icon-eye"></i></span>
                                    
                                </td>  
                            </tr>
                            <?php endwhile;?>
                      
                            
                            
                        </tbody>
                    </table>
                </div>
                <!-- DataTable ends -->

                <!-- add new sidebar starts -->
                <div class="add-new-data-sidebar">
                    <div class="overlay-bg"></div>
                    <div class="add-new-data">
                        <div class="div mt-2 px-2 d-flex new-data-title justify-content-between">
                            <div>
                                <h4 class="text-uppercase">List View Data</h4>
                            </div>
                            <div class="hide-data-sidebar">
                                <i class="feather icon-x"></i>
                            </div>
                        </div>
                        <div class="data-items pb-3">
                            <div class="data-fields px-2 mt-3">
                                <div class="row">
                                    <div class="col-sm-12 data-field-col">
                                        <label for="data-name">Name</label>
                                        <input type="text" class="form-control" id="data-name">
                                    </div>
                                    <div class="col-sm-12 data-field-col">
                                        <label for="data-category"> Category </label>
                                        <select class="form-control" id="data-category">
                                            <option>Audio</option>
                                            <option>Computers</option>
                                            <option>Fitness</option>
                                            <option>Appliance</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-12 data-field-col">
                                        <label for="data-status">Order Status</label>
                                        <select class="form-control" id="data-status">
                                            <option>Pending</option>
                                            <option>Canceled</option>
                                            <option>Delivered</option>
                                            <option>On Hold</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-12 data-field-col">
                                        <label for="data-price">Price</label>
                                        <input type="text" class="form-control" id="data-price">
                                    </div>
                                    <div class="col-sm-12 data-field-col data-list-upload">
                                        <form action="#" class="dropzone dropzone-area" id="dataListUpload">
                                            <div class="dz-message">Upload Image</div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="add-data-footer d-flex justify-content-around px-3 mt-2">
                            <div class="add-data-btn">
                                <button class="btn btn-primary">Add Data</button>
                            </div>
                            <div class="cancel-data-btn">
                                <button class="btn btn-outline-danger">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- add new sidebar ends -->

            </section>
            <!-- Data list view end -->

        </div>
    </div>
</div>
<!-- END: Content-->

<div class="sidenav-overlay"></div>
<div class="drag-target"></div>

Answer 1

I will be using MySQLi for my answer specifically. Another method would be using PDO.

My first example will fetch one row through a WHERE clause (under the assumption that username is unique). If you need to pull all the data and use loops to construct HTML, as well as display a lot of row data, see second example instead.

First Example:

<?php
// DB variables
$servername = "DBSERVER";
$username = "DBUSER";
$password = "DBPASS";
$dbname = "DBNAME";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if($conn->connect_error){
  die("Connection failed: " . $conn->connect_error);
}

// Your session variable
$session_username = $_SESSION["username"];

/*
Since you have the username in a session variable,
you don't really need to pull the username from the database (again).
Simply use the session variable. However, I pull the username
either way since that's what you did initially.
*/

// Declare SQL query
$sql = "SELECT
            username,
            ticket_title,
            ticket_category,
            ticket_status
        FROM
            tickets_file
        WHERE
            username = ?";
            
// Prepare and bind
$stmt = $conn->prepare($sql);
$stmt->bind_param('s', $session_username);

// Execture query
$stmt->execute();

// Bind result(s) to variable(s)
$stmt->bind_result($username, $ticket_title, $ticket_category, $ticket_status);

// Fetch result(s)
$stmt->fetch();

// Close connection
$stmt->close();
$conn->close();
?>

Since we have bound our data to the different variables: $username , $ticket_title ... etc. we can now use them anywhere we see fit by simply echoing the variable, example:

<?php echo $ticket_title; ?>

Second Example:

<?php
// DB variables
$servername = "DBSERVER";
$username = "DBUSER";
$password = "DBPASS";
$dbname = "DBNAME";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if($conn->connect_error){
  die("Connection failed: " . $conn->connect_error);
}

// Declare the query
$sql = "SELECT
            username,
            ticket_title,
            ticket_category,
            ticket_status
        FROM
            tickets_file";

// Prepare
$stmt = $conn->prepare($sql);

// Execute the query
$stmt->execute();

// Get result of query
$result = $stmt->get_result();

// Close connection
$stmt->close();
$conn->close();

// Loop through the result(s)
while ($data = $result->fetch_assoc()) {
    /*
    Then to display the results you simply echo $data['row_name_here'];
    Example: echo $data['ticket_title'];
    
    Pair that with your HTML structure and you're good to go.
    */
}
?>

I would recommend that you look up MySQLi and/or PDO . I would also recommend that you look up prepared statements and parametized queries . The MySQLi and PDO links also cover the topic within a PHP environment. This will be very important moving forward, because it will make your applications secure against SQL Injection Attacks .