CRUD Operation in MySQL Using PHP - Fetch And Display Data

CRUD Operation in MySQL Using PHP - Fetch And Display Data

byRAYS CODING -
0
Hello guys, today we will talk about "How to fetch and display the data in the "PHP Crud Operation". This is the second article of the "PHP Crud Operation".

I have already uploaded the first article on the "PHP Crud Operation", In which I have explained: "how to insert the data in the database using PHP  in the PHP Crud Operation".

PHP Crud Operation


Get Source Code

Create The table

In this step, we create the table using HTML, and CSS, with Bootstrap or without Bootstrap, I have used Bootstrap for creating the form.

<!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.0">
    <title>Rays Coding :- PHP Crud Operation</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-dark d-flex justify-content-between">
                        <h4 class="text-center text-light">Rays Coding : PHP CRUD Operation</h4>
                        <a href="../form/form.php"  class="btn bg-warning text-dark"><b>Add User</b></a>
                    </div>
                    <div class="card-body">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>S No</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Contact</th>
                                    <th>Image</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>


This HTML document represents a web page template for managing CRUD (Create, Read, Update, Delete) operations in a PHP application. Let's break down the structure and functionality of this template:

Document Structure: The document begins with the <!DOCTYPE html> declaration, specifying the HTML version being used. The <html> element indicates the start of the HTML document, and the lang="en" attribute specifies the document's language as English.

Meta Tags: Meta tags provide metadata about the HTML document, such as character encoding, viewport settings, and compatibility settings. The provided meta tags ensure proper rendering and compatibility across different devices and browsers.

Title: The <title> element sets the title of the web page, displayed in the browser's title bar or tab.

External Resources: Several external CSS and JavaScript libraries are included to enhance the styling and functionality of the web page. These include Bootstrap CSS and JavaScript files for styling and responsive design, as well as Font Awesome for icons.

Body Content: The <body> element contains the main content of the web page. Within the <div class="container">, the content is organized into rows and columns using Bootstrap's grid system. The content includes a card element with a header and body section.

Card Header: The card header contains the title "Rays Coding: PHP CRUD Operation" and a button labeled "Add User." The button is linked to a form (../form/form.php) for adding new users to the database.

Card Body: The card body contains a table element (<table class="table">) for displaying user data retrieved from the database. The table header (<thead>) defines column headings such as "S No," "Name," "Email," "Contact," and "Image." The table body (<tbody>) is currently empty and intended to display user data dynamically.

Script: The <script> tag at the end of the document includes Bootstrap's JavaScript bundle for enabling interactive components and functionalities provided by Bootstrap.

PHP Crud Operation

Write select query

In this step, I have explained the select query and displayed the data in the table form.

<?php
    require_once('../connection/conn.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.0">
    <title>Rays Coding :- PHP Crud Operation</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-dark d-flex justify-content-between">
                        <h4 class="text-center text-light">Rays Coding : PHP CRUD Operation</h4>
                        <a href="../form/form.php"  class="btn bg-warning text-dark"><b>Add User</b></a>
                    </div>
                    <div class="card-body">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>S No</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Contact</th>
                                    <th>Image</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php
                                    $select_data = "SELECT * FROM `simple_table`";
                                    $select_query = mysqli_query($conn, $select_data);
                                    $rows = mysqli_num_rows($select_query);
                                    if(mysqli_num_rows($select_query)>0)
                                    {
                                        $sno  =  1;
                                        while($row_data = mysqli_fetch_array($select_query))
                                        {
                                            ?>
                                                <tr>
                                                    <!-- <td><?php echo $row_data['id']?></td> -->
                                                    <td><?php echo $sno++; ?></td>
                                                    <td><?php echo $row_data['name']?></td>
                                                    <td><?php echo $row_data['email']?></td>
                                                    <td><?php echo $row_data['contact']?></td>
                                                    <td><img src="../profiles/<?php if(isset($row_data['profile'])){echo $row_data['profile']; }?>" alt="profile" width='60' height='60'></td>
                                                    <td>
                                                        <a href="../edit/edit.php?id=<?php echo $row_data['id'];?>" title='Edit'><i class="fa-solid fa-pen-to-square"></i></a>
                                                        <a href="../delete/delete.php?id=<?php echo $row_data['id'];?>" title='Delete'><i class="fa-solid fa-trash"></i></a>
                                                    </td>
                                                </tr>
                                            <?php
                                        }
                                    }
                                ?>      
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>

This PHP script is responsible for displaying data from a MySQL database in a tabular format within an HTML document. Let's analyze the functionality of the script:

Database Connection: The script begins by including the 'conn.php' file, which likely contains the code for establishing a connection to the MySQL database. This inclusion ensures that the database connection is available for use within this script.

HTML Document Structure: Following the PHP inclusion, the script outputs the standard HTML structure for a web page. It includes meta tags for character encoding, viewport settings, and compatibility, as well as a title tag specifying the title of the web page.

External Resources: The script links external CSS and JavaScript files for styling and functionality. It utilizes Bootstrap CSS for styling and Font Awesome for icons, enhancing the visual appeal of the web page.

Body Content: Within the body section, the script constructs a Bootstrap container containing a card element. The card header displays the title "Rays Coding: PHP CRUD Operation" and includes a button labeled "Add User," which is linked to a form for adding new users.

Table Displaying Database Data: The card body contains a table element with headers for "S No," "Name," "Email," "Contact," "Image," and "Action." The PHP code inside the table body retrieves data from the 'simple_table' database table using an SQL SELECT query. It loops through the retrieved rows using a while loop, outputting each row's data as table rows. Within each row, it displays the serial number, name, email, contact information, profile image, and action links for editing and deleting records.

Database Query: The script executes an SQL SELECT query to retrieve all rows from the 'simple_table' table. It then checks if any rows were returned using mysqli_num_rows(). If rows are found, it iterates over each row using a while loop, fetching the row data with mysqli_fetch_array(), and displaying it in the table rows.

Image Display: The profile images are displayed using tags, with the image source pointing to the 'profiles' directory and the file name retrieved from the database.

JavaScript: Finally, the script includes the Bootstrap JavaScript bundle for enabling interactive components and functionalities provided by Bootstrap, ensuring proper functionality of Bootstrap components like modals or dropdowns.

Tags

You may like these posts

Post a Comment

Previous Post Next Post

Recent in Technology

Responsive Advertisement