Bootstrap Table with PHP

Bootstrap 5 Computer Lessons PHP Programming
adminLeave a Comment on Bootstrap Table with PHP

table-primary.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">
    <!-- Latest compiled and minified CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Boostarp Table Data Looping</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-9"></div>
            <div class="col-md-3">
                <div class="dropdown">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
                        Choose Table Style
                    </button>
                    <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="bootstrap-table-loop.php">Simple</a></li>
                        <li><a class="dropdown-item" href="table-striped.php">Striped</a></li>
                        <li><a class="dropdown-item" href="table-bordered.php">Bordered</a></li>
                        <li><a class="dropdown-item" href="table-dark.php">Dark</a></li>
                        <li><a class="dropdown-item" href="table-primary.php">Primary</a></li>
                        <li><a class="dropdown-item" href="table-danger.php">Danger</a></li>
                    </ul>
                </div>
            </div>
        </div>
    
    <table class="mt-5 table table-primary table-bordered">
        <tr>
            <th>Sr</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <?php
        $dbusername = "root";
        $dbpassword = "";
        $dbhost = "localhost";
        $dbname = "actor";
        $conn = new mysqli($dbhost, $dbusername, $dbpassword, $dbname);
        $sql = "SELECT Sr, Name, Age FROM student";
        $result = $conn->query($sql);
        if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
        ?>
                <tr>
                    <td><?php echo $row['Sr']; ?></td>
                    <td><?php echo $row['Name']; ?></td>
                    <td><?php echo $row['Age']; ?></td>
                </tr>
        <?php
            }
        }
        $conn->close();
        ?>
    </table>
    </div>
</body>

</html>

table-striped.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">
    <!-- Latest compiled and minified CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Boostarp Table Data Looping</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-9"></div>
            <div class="col-md-3">
                <div class="dropdown">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
                        Choose Table Style
                    </button>
                    <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="bootstrap-table-loop.php">Simple</a></li>
                        <li><a class="dropdown-item" href="table-striped.php">Striped</a></li>
                        <li><a class="dropdown-item" href="table-bordered.php">Bordered</a></li>
                        <li><a class="dropdown-item" href="table-dark.php">Dark</a></li>
                        <li><a class="dropdown-item" href="table-primary.php">Primary</a></li>
                        <li><a class="dropdown-item" href="table-danger.php">Danger</a></li>
                    </ul>
                </div>
            </div>
        </div>
    
    <table class="mt-5 table table-striped">
        <tr>
            <th>Sr</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <?php
        $dbusername = "root";
        $dbpassword = "";
        $dbhost = "localhost";
        $dbname = "actor";
        $conn = new mysqli($dbhost, $dbusername, $dbpassword, $dbname);
        $sql = "SELECT Sr, Name, Age FROM student";
        $result = $conn->query($sql);
        if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
        ?>
                <tr>
                    <td><?php echo $row['Sr']; ?></td>
                    <td><?php echo $row['Name']; ?></td>
                    <td><?php echo $row['Age']; ?></td>
                </tr>
        <?php
            }
        }
        $conn->close();
        ?>
    </table>
    </div>
</body>

</html>

table-bordered.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">
    <!-- Latest compiled and minified CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Boostarp Table Data Looping</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-9"></div>
            <div class="col-md-3">
                <div class="dropdown">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
                        Choose Table Style
                    </button>
                    <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="bootstrap-table-loop.php">Simple</a></li>
                        <li><a class="dropdown-item" href="table-striped.php">Striped</a></li>
                        <li><a class="dropdown-item" href="table-bordered.php">Bordered</a></li>
                        <li><a class="dropdown-item" href="table-dark.php">Dark</a></li>
                        <li><a class="dropdown-item" href="table-primary.php">Primary</a></li>
                        <li><a class="dropdown-item" href="table-danger.php">Danger</a></li>
                    </ul>
                </div>
            </div>
        </div>
    
    <table class="mt-5 table table-bordered">
        <tr>
            <th>Sr</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <?php
        $dbusername = "root";
        $dbpassword = "";
        $dbhost = "localhost";
        $dbname = "actor";
        $conn = new mysqli($dbhost, $dbusername, $dbpassword, $dbname);
        $sql = "SELECT Sr, Name, Age FROM student";
        $result = $conn->query($sql);
        if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
        ?>
                <tr>
                    <td><?php echo $row['Sr']; ?></td>
                    <td><?php echo $row['Name']; ?></td>
                    <td><?php echo $row['Age']; ?></td>
                </tr>
        <?php
            }
        }
        $conn->close();
        ?>
    </table>
    </div>
</body>

</html>

table-dark.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">
    <!-- Latest compiled and minified CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Boostarp Table Data Looping</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-9"></div>
            <div class="col-md-3">
                <div class="dropdown">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
                        Choose Table Style
                    </button>
                    <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="bootstrap-table-loop.php">Simple</a></li>
                        <li><a class="dropdown-item" href="table-striped.php">Striped</a></li>
                        <li><a class="dropdown-item" href="table-bordered.php">Bordered</a></li>
                        <li><a class="dropdown-item" href="table-dark.php">Dark</a></li>
                        <li><a class="dropdown-item" href="table-primary.php">Primary</a></li>
                        <li><a class="dropdown-item" href="table-danger.php">Danger</a></li>
                    </ul>
                </div>
            </div>
        </div>
    
    <table class="mt-5 table table-dark table-bordered">
        <tr>
            <th>Sr</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <?php
        $dbusername = "root";
        $dbpassword = "";
        $dbhost = "localhost";
        $dbname = "actor";
        $conn = new mysqli($dbhost, $dbusername, $dbpassword, $dbname);
        $sql = "SELECT Sr, Name, Age FROM student";
        $result = $conn->query($sql);
        if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
        ?>
                <tr>
                    <td><?php echo $row['Sr']; ?></td>
                    <td><?php echo $row['Name']; ?></td>
                    <td><?php echo $row['Age']; ?></td>
                </tr>
        <?php
            }
        }
        $conn->close();
        ?>
    </table>
    </div>
</body>

</html>

table-danger.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">
    <!-- Latest compiled and minified CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Boostarp Table Data Looping</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-9"></div>
            <div class="col-md-3">
                <div class="dropdown">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
                        Choose Table Style
                    </button>
                    <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="bootstrap-table-loop.php">Simple</a></li>
                        <li><a class="dropdown-item" href="table-striped.php">Striped</a></li>
                        <li><a class="dropdown-item" href="table-bordered.php">Bordered</a></li>
                        <li><a class="dropdown-item" href="table-dark.php">Dark</a></li>
                        <li><a class="dropdown-item" href="table-primary.php">Primary</a></li>
                        <li><a class="dropdown-item" href="table-danger.php">Danger</a></li>
                    </ul>
                </div>
            </div>
        </div>
    
    <table class="mt-5 table table-danger table-bordered">
        <tr>
            <th>Sr</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <?php
        $dbusername = "root";
        $dbpassword = "";
        $dbhost = "localhost";
        $dbname = "actor";
        $conn = new mysqli($dbhost, $dbusername, $dbpassword, $dbname);
        $sql = "SELECT Sr, Name, Age FROM student";
        $result = $conn->query($sql);
        if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
        ?>
                <tr>
                    <td><?php echo $row['Sr']; ?></td>
                    <td><?php echo $row['Name']; ?></td>
                    <td><?php echo $row['Age']; ?></td>
                </tr>
        <?php
            }
        }
        $conn->close();
        ?>
    </table>
    </div>
</body>

</html>

bootstrap-table.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">
    <!-- Latest compiled and minified CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap Table</title>
</head>
<body>
    <div class="container">
        <table class="table">
            <tr>
                <th>Sr.</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>1</td>
                <td>James Bond</td>
                <td>35</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Salena Gomez</td>
                <td>28</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Steven Chaung</td>
                <td>45</td>
            </tr>
        </table>
    </div>

    <!-- table striped -->

    <div class="mt-5 container">
        <table class="table table-striped">
            <tr>
                <th>Sr.</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>1</td>
                <td>James Bond</td>
                <td>35</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Salena Gomez</td>
                <td>28</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Steven Chaung</td>
                <td>45</td>
            </tr>
        </table>
    </div>

    <!-- table bordered -->

    <div class="mt-5 container">
        <table class="table table-bordered">
            <tr>
                <th>Sr.</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>1</td>
                <td>James Bond</td>
                <td>35</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Salena Gomez</td>
                <td>28</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Steven Chaung</td>
                <td>45</td>
            </tr>
        </table>
    </div>

    <!-- table dark -->

    <div class="mt-5 container">
        <table class="table table-dark table-striped">
            <tr>
                <th>Sr.</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>1</td>
                <td>James Bond</td>
                <td>35</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Salena Gomez</td>
                <td>28</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Steven Chaung</td>
                <td>45</td>
            </tr>
        </table>
    </div>

    <!-- table primary -->

    <div class="mt-5 container">
        <table class="table table-danger table-striped">
            <tr>
                <th>Sr.</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>1</td>
                <td>James Bond</td>
                <td>35</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Salena Gomez</td>
                <td>28</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Steven Chaung</td>
                <td>45</td>
            </tr>
        </table>
    </div>
</body>
</html>

bootstrap-table-loop.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">
    <!-- Latest compiled and minified CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Boostarp Table Data Looping</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-9"></div>
            <div class="col-md-3">
                <div class="dropdown">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
                        Choose Table Style
                    </button>
                    <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="bootstrap-table-loop.php">Simple</a></li>
                        <li><a class="dropdown-item" href="table-striped.php">Striped</a></li>
                        <li><a class="dropdown-item" href="table-bordered.php">Bordered</a></li>
                        <li><a class="dropdown-item" href="table-dark.php">Dark</a></li>
                        <li><a class="dropdown-item" href="table-primary.php">Primary</a></li>
                        <li><a class="dropdown-item" href="table-danger.php">Danger</a></li>
                    </ul>
                </div>
            </div>
        </div>
    
    <table class="mt-5 table">
        <tr>
            <th>Sr</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <?php
        $dbusername = "root";
        $dbpassword = "";
        $dbhost = "localhost";
        $dbname = "actor";
        $conn = new mysqli($dbhost, $dbusername, $dbpassword, $dbname);
        $sql = "SELECT Sr, Name, Age FROM student";
        $result = $conn->query($sql);
        if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
        ?>
                <tr>
                    <td><?php echo $row['Sr']; ?></td>
                    <td><?php echo $row['Name']; ?></td>
                    <td><?php echo $row['Age']; ?></td>
                </tr>
        <?php
            }
        }
        $conn->close();
        ?>
    </table>
    </div>
</body>

</html>

bootstrap-table-js.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">
    <!-- Latest compiled and minified CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Boostarp Table Data Looping</title>
</head>

<body>
    <div class="container">
        <div class="mt-3 row">
            <div class="col-md-2"><button type="button" onclick="secondary()" class="btn btn-secondary">Simple</button></div>
            <div class="col-md-2"><button type="button" onclick="info()" class="btn btn-info">Striped</button></div>
            <div class="col-md-2"><button type="button" onclick="warning()" class="btn btn-warning">Bordered</button></div>
            <div class="col-md-2"><button type="button" onclick="primary()" class="btn btn-primary">Primary Color</button></div>
            <div class="col-md-2"><button type="button" onclick="dark()" class="btn btn-dark">Dark Color</button></div>
            <div class="col-md-2"><button type="button" onclick="danger()" class="btn btn-danger">Danger Color</button></div>
            
        </div>
    
    <table id="table" class="mt-5 table">
        <tr>
            <th>Sr</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <?php
        $dbusername = "root";
        $dbpassword = "";
        $dbhost = "localhost";
        $dbname = "actor";
        $conn = new mysqli($dbhost, $dbusername, $dbpassword, $dbname);
        $sql = "SELECT Sr, Name, Age FROM student";
        $result = $conn->query($sql);
        if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
        ?>
                <tr>
                    <td><?php echo $row['Sr']; ?></td>
                    <td><?php echo $row['Name']; ?></td>
                    <td><?php echo $row['Age']; ?></td>
                </tr>
        <?php
            }
        }
        $conn->close();
        ?>
    </table>
    </div>
    <script>
        function secondary() {
            document.getElementById("table").className="mt-5 table";
        }
        function info() {
            document.getElementById("table").className="mt-5 table table-striped";
        }
        function warning() {
            document.getElementById("table").className="mt-5 table table-bordered";
        }
        function primary() {
            document.getElementById("table").className="mt-5 table table-primary table-striped table-bordered";
        }
        function dark() {
            document.getElementById("table").className="mt-5 table table-dark table-striped table-bordered";
        }
        function danger() {
            document.getElementById("table").className="mt-5 table table-danger table-striped table-bordered";
        }
    </script>
</body>

</html>

Related Posts

Bootstrap Table in PHP

admin

PHP & Bootstrap 5 Lesson

admin

PHP Lesson – Connecting with Database – 9-March-2023

admin

Leave a Reply