How to: Display Data from SQL Database in HTML Table - Bootstrap 5

The above picture refers to the table displaying the information from an SQL database.

*note: this tutorial is using Bootstrap 5 (CSS Framework) & PDO (PHP Data Object)


1. Set connection to the database
<?php
require_once('core.php')
?>

2. Write HTML <table>

    <div class="data">
    
        <div class="row">
            <div class="col-lg-12">
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                    <thead>
                    <tr>
                        <th scope="col">ID</th>
                        <th scope="col">Email</th>
                        <th scope="col">Full Name</th>
                        <th scope="col">Address</th>
                        <th scope="col">City</th>
                        <th scope="col">Zip</th>
                        <th scope="col">State</th>
                        <th scope="col">Country</th>
                        <th scope="col">Contact</th>
                        <th scope="col">Fax</th>
                    </tr>
                    </thead>
                    <tbody>
                            ..php coding here later
</tbody>
</table>
</div>
            </div>
        </div>
    </div>

*change the bold with your table heading content
*replace "..php coding here later" with these code below:

    1. Select data from database:
    <?php
     $sql = "SELECT id, user_email, user_fullname, user_address,         user_city, user_zip, user_state, user_country, user_tel,             user_fax from test_user";

*change test_user with your database name (and also don't forget to change the data name that you want to query)

    2. Execute the query above with these code:
    $result = $dbx->query($sql);
                    
                        if($result-> rowCount() > 0){
                            while($row = $result->                               fetch(PDO::FETCH_ASSOC)){
           echo "<tr><td>".$row["id"]."</td>        <td>"
                                .$row["user_email"] . "</td><td>"
                                .$row["user_fullname"]."</td><td>"
                                .$row["user_address"]."</td><td>"
                                .$row["user_city"]."</td><td>"
                                .$row["user_zip"]."</td><td>"
                                .$row["user_state"]."</td><td>"
                                .$row["user_country"]."</td><td>"
                                .$row["user_tel"]."</td><td>"
                                .$row["user_fax"]."</td></tr>";
                            }
                            echo "</table>";
                        }
                        else{
                            echo "0 result";
                        }
                    ?>

Done. You should be getting the expected result if you use them correctly with PDO and Bootstrap 5 (striped table). If you're using other MySQL method, please don't forget to browse on stackoverflow. Thank you.

Comments

Post a Comment

Popular posts from this blog

HTML5: HTML Tags

The tags introduced in HTML5 are more descriptive such as: main , header , footer , nav , video , article , section , audio & many more.  These tags helps with Search Engine Optimization (SEO) and accessibility. The main tag helps search engine and other developers find the main content of your page.  Adding an image to your page: Using img element by pointing it to a specific image's URL using the src attribute. This img tag is self-closing. The img tag must come with alt attribute to help screen readers especially when the image is failed to load (might be due to heavy load, internet connection and whatnots). alt attribute should contain a description of the image to help screen readers understand it. Link to external pages: Using a (anchor) element to link to any external pages The a tag contains href attribute which contains the destination page's URL The tag should also contain anchor text to allow clickable text which will direct user to the destination page &l
Read more

How to: Display Data from Database in Pagination

1. Please refer to this post to display data in table 2. After displaying them in the table, follow the instructions attached on the comment section (//) :   //determine no of data to display per page $results_per_page = 10; //count all column from the database $sql = "SELECT COUNT(*) FROM test_user"; $res = $dbx->query($sql); $count = $res->fetchColumn(); // determine no of total pagination needed by dividing no of total columns ($count) with total data to display (10) $number_of_pages = ceil($count/$results_per_page); // determine which page number visitor is currently on if(!isset($_GET['page'])){     $page = 1; }else{     $page = $_GET['page']; } // determine the sql LIMIT starting number for the results on the displaying page $this_page_first_result = ($page-1)*$results_per_page;                          $sql = "SELECT id, user_email, user_fullname, user_address, user_city, user_zip, user_state, user_country, user_tel, user_fax from test_user
Read more