Create Dynamic Navbar Using PHP Mysql

As you might know that we use php to create dynamic web pages. Well, here we are going to create a dynamic navbar using php in which we obviously will need a database. A structured navbar. This is all about to get the data from the database and repeat that into loop.

To create a Dynamic Navbar Using php mysql is to easy. If you are a beginner then it can be bit difficult for you to understand this short flow. But it isn’t that much difficult.

Table of Contents

Create A Navbar With Html

Well, At least in starting we should have a static navbar so that we can understand which elements we need iterate on. Well, As you can see in the below image we have this kind of navbar. Put some random names. And I have used bootstrap cdn for css style.

	//bootstrap css cdn
https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css

Create Database Connection

Now, we don’t need to do anything more. Just need to build the database connection so that we can interact with database. And create a table from we are going to fetch these dynamic navbar names.

create database connection

//parameters 1.hostname 2.username 3.password 4.database name
 $db = new mysqli('localhost', 'root', '', 'project');

Create Database And Table

Now we have to create this database that we have passed as a parameter “project”.

Create A database table “navbar”. And In this table we will insert some name of navbar manually. You can use a form to insert names in this table but for now I’ll show you by getting the records from this database table.

You can go to created database table. There you will find a insert tab on screen then from there you can insert the data into the table.

Get Records On Frontend

Now, We have inserted some dummy names and we need to get the data on screen. You can do it by using a form and insert the data. But for now let’s see how we will get this data.

Now, Go to your code editor and write some lines of code to get this data.

<!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>Dynamic Nabvar</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
</head>

<body>
    <?php
    $db = new mysqli('localhost', 'root', '', 'project');
    if ($db->connect_error) {
        die("Connection failed: " . $db->connect_error);
    }
    $query = "SELECT * FROM navbar";
    ?>
    <nav class="navbar navbar-expand-lg bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <?php
                    $result = $db->query($query);
                    if ($result->num_rows > 0) {
                        while ($rows = $result->fetch_assoc()) {
                    ?>
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="#"><?= $rows['name'] ?></a>
                            </li>
                    <?php
                        }
                    } ?>
                </ul>
            </div>
        </div>
    </nav>
</body>

</html>

This is whole structure that I have built and you also can use the same code navbar.

Conclusion

This is the simple tutorial with you can easily build a dynamic navbar using PHP mysql.

Related Article : How to Use A Bar Chart In PHP Website

Disclosure : This post contains affiliate links. If you make a purchase through one of these links, I may receive a commission at no additional cost to you. Thank you for supporting Larachamp ❤🙌